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

news/2024/10/10 14:22:59

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

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

背景

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

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

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.ryyt.cn/news/69795.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

Leetcode 864. 获取所有钥匙的最短路径

1.题目基本信息 1.1.题目描述 给定一个二维网格 grid ,其中:‘.’ 代表一个空房间 ‘#’ 代表一堵墙 ‘@’ 是起点 小写字母代表钥匙 大写字母代表锁我们从起点开始出发,一次移动是指向四个基本方向之一行走一个单位空间。我们不能在网格外面行走,也无法穿过一堵墙。如果途…

Hello-Java-Sec 项目 (代码审计)

一、项目背景: Hello-Java-Sec项目为 Github中 一个面向安全开发的 Java漏洞代码审计靶场。 靶场地址:https://github.com/j3ers3/Hello-Java-Sec 本地使用idea部署即可二、代码审计: 通过阅读代码可知,代码采用 @RequestMapping 注解的方式来处理 HTTP不同方法的请求,故…

记录一次本地安装AI ollama大模型数据对话 的经历

浏览器打开 Ollama官网 下载对应的版本,我这里下载的 是对应 windows的版本,下载后直接运行安装安装完成后 打开 dos控制台,win+r,cmd那个,输入ollama 如果显示如下截图内容,就说明安装成功了,接下来就是下载 具体的 大数据库了 安装大模型前,建议先修改环境变量,因…

APP应用分发多个步骤和策略过程,如何进行app应用分发?

进行APP应用分发是一个涉及多个步骤和策略的过程,以下是对该过程的详细解析: 一、前期准备应用程序准备:开发人员需要确保应用程序已经经过完整的测试和质量保证,包括功能测试、用户体验测试、性能测试等,以确保其稳定性和可靠性。 打包应用程序,将开发完成的APP进行编译…

利用 ACME 实现SSL证书自动化配置更新

SSL 证书自动化最近收到腾讯云的通知SSL证书要到期了,本想直接申请的发现现在申请的免费SSL证书有效期只有90天了,顺便了解了一下原因是包括Google在内的国际顶级科技公司一直都有在推进免费证书90天有效期的建议,免费证书加密等级低,难以应对今天日益复杂的网络环境,90天…

arm imx6ull docker启动失败问题查找与解决 内核配置相关

arm imx6ull docker启动失败问题查找与解决 内核配置相关1、增加POSIX Message qeue:could not get initial namespace: no such file or directory CONFIG_POSIX_MQUEUE=y 2、增加namespace failed to set to initial namespace CONFIG_NAMESPACES=y 3、创建网络失败,veth配…

ubuntu的镜像源+bionic版本

首先第一步 查找和你自己ubuntu版本匹配的版本号 匹配代号如下在终端输入lsb_release -a查看自己系统上的版本号可以看到我这个版本号的代号是bionic。 每个版本的镜像文件都是有规律的。 bionic版本的源如下:点击查看代码 # 阿里源 deb http://mirrors.aliyun.com/ubuntu/ bi…

PictureBox实现进入换色,离开换色,点击换色

实现和Word标题栏类似的效果可以看到有三种颜色: 默认时是(243, 243, 243),鼠标进入时是这样(210, 210, 210),鼠标按下的瞬间变为了(177, 177, 177) 4个关键事件:MouseEnter、MouseLeave、MouseDown、MouseUp MouseEnter:在鼠标进入控件的可见部分时发生private void pictu…