Cocos 2 使用 webview 嵌入页面,摄像头调用没权限问题

server/2024/10/20 3:22:32/

webview__0">Cocos 2 使用 webview 嵌入页面,摄像头调用没权限问题

嗯,这么说呢,这篇博文看自己的实际需求哈,标题写的可能不是很准确。
我这边呢,是遇到这样一个功能,就是有一个服务,他是的页面呢,是打开电脑的摄像头,需要在cocos 程序里面呢,展示摄像头的实时画面。看上去挺简单哈,但是实际做起来,还是有点问题。

背景

另一项目组提供一个web服务,这个服务呢,是部署到后端服务器的web项目,最终提供一个页面的访问链接,这个访问链接呢,浏览器打开后,会自动打开电脑的摄像头采集画面。这个功能呢,需要在 cocos 中使用,也就是说需要在 cocos 中打开摄像头,实现相应的功能。

最开始我是这么想的, cocos 直接打开设备摄像头有点麻烦,所以我就打算直接使用 cocos 提供的组件 webview,直接把提供的 web 页面嵌入进来,这样子听起来就十分的简单了,OK,那就简单的试验一下。

webview__11">cocos 使用 webview 嵌入页面

这个功能十分的简单,cocos 提供了 webview 组件,只需要设置一下 url 就可以了。

但是有一个问题需要注意一下,就是 cocos 啊,目前只是支持插入 url,不能使用本地的 html 文件,所以提供的 web 页面需要部署起来,我自己本地使用 nginx 部署了一下。

使用很简单,添加到页面一个 webview 组件,然后把 url 填写上:

在这里插入图片描述

好了,完成了,我们现在只需要打开页面运行一下就可以了!

在这里插入图片描述

看上面截图,摄像头画面打不开,控制台报错了,报的意思是没有授权!

所以说我们需要授权一下。

解决问题

解决很简单,只需要在嵌入网页的 iframe 标签中添加一下授权就可以:

<iframe src="./wjw.html" frameborder="0" allow="microphone *;camera *;"></iframe>

主要就是加上 allow="microphone *;camera *;" 这段代码就可以了。

但是现在有这样一个问题,就是我们使用的是 webview 嵌套的网页,他是 cocos 提供的组件,他只能配置个 url,没有什么 iframe ,怎么办? 有办法!

首先我们给使用的 webview 关联一个 ts 文件,然后我们呢,打印一下这个 node:

    start() {console.log("WebViewFun start", this.node);}

我们看一下 node 里面有没有 iframe 这个标签!

在这里插入图片描述

看!找到啦!!!

后面就简单了,给他加上就可以了!加上之后,在把 url 赋值上去,还有,之前在组件配置的 url 就可以清空了,我们后边动态给赋值上去:

    start() {let iframeDom = this.node.getComponent(cc.WebView)["_impl"]["_iframe"];iframeDom.allow = 'microphone *;camera *'iframeDom.src = "http://127.0.0.1/"}

好了,我们看一下效果:

在这里插入图片描述

诶,画面出来了!完成!!


http://www.ppmy.cn/server/130307.html

相关文章

Android广播

文章目录 1.收发应用广播1.标准广播2.有序广播3.广播的静态注册 2.监听系统广播1.接受分钟到达广播2.接受网络变更广播3.定时管理器AlarmManager 3.捕捉屏幕的变更事件1.竖屏和横屏切换2.回到桌面与切换到任务列表 1.收发应用广播 1.标准广播 广播的收发过程分为三个步骤&…

LabVIEW提高开发效率技巧----调度器设计模式

在LabVIEW开发中&#xff0c;针对多任务并行的需求&#xff0c;使用调度器设计模式&#xff08;Scheduler Pattern&#xff09;可以有效地管理多个任务&#xff0c;确保它们根据优先级或时间间隔合理执行。这种模式在需要多任务并发执行时特别有用&#xff0c;尤其是在实时系统…

ubuntu 18.04虚拟机以太网网段与地平线J6板端连接配置

目录 1、板端IP地址确认 2、本机以太网端ip设置 3、虚拟机设置nat模式 4、虚拟机虚拟网络编辑 5、虚拟机端ip设置 6、虚拟机端验证是否可以ping通板端ip及是否可以联网 1、板端IP地址确认 ip&#xff1a;192.168.98.233 2、本机以太网端ip设置 ip&#xff1a; 3、虚拟…

【黑马点评】 使用RabbitMQ实现消息队列——2.使用RabbitMQ监听秒杀下单

2 使用RabbitMQ实现消息队列 2.1 修改\hm-dianping\pom.xmlpom.xml文件 添加RabbitMQ的环境 <!-- RabbitMQ--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </depe…

Spring Cloud Bus:实现分布式系统中的消息传递与状态同步

在分布式系统中&#xff0c;服务之间的消息传递和状态同步是一个关键需求。Spring Cloud Bus提供了一个轻量级的消息代理连接分布式系统的节点&#xff0c;用于广播状态更改或管理指令。本文将探讨Spring Cloud Bus的功能、使用场景及其在分布式系统中的作用。 Spring Cloud B…

构建高效新闻推荐系统:Spring Boot的力量

1系统概述 1.1 研究背景 如今互联网高速发展&#xff0c;网络遍布全球&#xff0c;通过互联网发布的消息能快而方便的传播到世界每个角落&#xff0c;并且互联网上能传播的信息也很广&#xff0c;比如文字、图片、声音、视频等。从而&#xff0c;这种种好处使得互联网成了信息传…

2-119 基于matlab的合成孔径雷达(SAR)RDA(距离多普勒算法)、RMA(距离徙动算法)、CSA(线性调频变标算法)算法点目标成像与分析

基于matlab的合成孔径雷达(SAR)RDA(距离多普勒算法)、RMA(距离徙动算法)、CSA(线性调频变标算法)算法点目标成像与分析&#xff0c;RDA算法通过参考目标的多普勒历程完成对应匹配滤波器设计&#xff0c;获得同距离处不同目标相对于参考目标的方位位置。RMA是一种高分辨率的频域…

独享动态IP是什么?它有什么独特优势吗?

在网络世界中&#xff0c;IP地址扮演着连接互联网的关键角色。随着互联网的发展&#xff0c;不同类型的IP地址也应运而生&#xff0c;其中独享动态ip作为一种新型IP地址&#xff0c;备受关注。本文将围绕它的定义及其独特优势展开探讨&#xff0c;以帮助读者更好地理解和利用这…