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 标签中添加一下授权就可以：

html 复制代码

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

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

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

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

ts 复制代码

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

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

看！找到啦！！！

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

ts 复制代码

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

好了，我们看一下效果：

诶，画面出来了！完成！！