高要seo整站优化,广西网站设计欣赏,工程建设标准化网站,南昌企业网站排名优化electron 打包 webview 嵌入需要调用电脑摄像头拍摄失败问题 这篇文章是接我cocos专栏的上一篇文章继续写的#xff0c;我上一篇文章写的是 cocos 开发触摸屏项目#xff0c;需要嵌入一个网页用来展示#xff0c;最后通过 electron 打包成 exe 程序#xff0c;而且网页里面…electron 打包 webview 嵌入需要调用电脑摄像头拍摄失败问题 这篇文章是接我cocos专栏的上一篇文章继续写的我上一篇文章写的是 cocos 开发触摸屏项目需要嵌入一个网页用来展示最后通过 electron 打包成 exe 程序而且网页里面是需要调用电脑摄像头进行拍摄的。 问题
通过前一篇文章确实实现了cocos 中使用 webview 嵌入页面调用摄像头进行拍摄并且使用 electron 打包后也是没有问题的但是当时开发的时候忽略了一个问题就是跨域和安全性的问题。
因为上一篇文章使用的测试页面是我本地电脑启动的服务使用 localhost 进行访问所以一切正常但是如果是其他电脑启动这个服务用 ip 地址的方式进行嵌入访问就是出现摄像头打不开的问题别说让用户授权是否允许访问摄像头它连弹这个框都不弹出来。
原因
原因是什么呢其实不管是嵌入的 webview像是普通的谷歌浏览器、edge浏览器这些如果直接访问另一台电脑的 ip 打开需要使用摄像头的网页也是连弹窗都不弹窗直接失败
这是浏览器的安全机制像是摄像头、麦克风这种涉密隐私数据要求必须是安全访问也就是必须要通过 https 的方式才会弹窗询问用户是否允许这个网页访问电脑摄像头如果是 http 的话浏览器会直接自动拒绝连询问用户都不会询问所以直接打不开。当然了如果是本机的 localhost 的方式访问还是询问的。
解决办法
1. chrome 谷歌浏览器
如果是用谷歌浏览器访问的话倒是也简单只需要单独配置一下当然正式上线肯定没法用了需要安装证书把 http 改成 https 就不会遇到这个问题。如果是单纯测试一下的话只需要修改一下电脑的浏览器设置就行。
在浏览器地址栏输入 chrome://flags点击回车进入配置 然后输入unsafely敲击回车然后选择“已启用”在输入框输入允许访问的网站地址如果多个地址的话拿英文逗号分开。编写完他就保存了然后需要重启浏览器才会生效哈需要重新启动一下浏览器。 重启之后他会在浏览器顶部显示这样一句话表示配置好了。 看提示也知道这是不安全的自己测试可以平时不要自己改哈
保证配置的没有出现问题这样的话你再去访问那个需要调用摄像头的 http 网页就会提示你是不是允许授权它访问电脑摄像头了。
谷歌浏览器是这样其实 edge 浏览器也可以这样配置是一样的。
记住用完了改回去
2. electron 打包 webview 页面配置
就像我们上篇文章是使用的 webview最后是用 electron 打包的这种情况下没有配置页面怎么办
这个时候就需要去配置一下 electron。
首先在 electron 的 main.js 文件中添加下面这段代码就可以了。 const { protocol } require(electron)
const { app } require(electron)protocol.registerSchemesAsPrivileged([{scheme: http,privileges:{standard: true,secure: true,bypassCSP: true,allowServiceWorkers: true,supportFetchAPI: true,corsEnabled: true,stream: true}}
])app.commandLine.appendSwitch(unsafely-treat-insecure-origin-as-secure, [http://192.168.78.12:8080])// 也可以设置全部 极其不建议
// app.commandLine.appendSwitch(unsafely-treat-insecure-origin-as-secure, [*])然后就可以了但是这样做的话很危险极其不建议这样操作有很大很大的安全风险
app.commandLine.appendSwitch 方法用于向 Chromium 的命令行参数添加自定义开关。代码段中使用 unsafely-treat-insecure-origin-as-secure 开关并将其值设置为一个包含单个元素 * 的数组。
这个开关的用途是允许开发者将不安全的源通常是使用 HTTP 而非 HTTPS 的网站或应用视为安全的。这通常用于开发环境以便能够绕过浏览器对安全性的某些限制这种行为非常不建议使用虽然这个开关可以在开发过程中提供便利但它带来了重大的安全风险并且绝不应该在生产环境中使用。始终优先考虑应用的安全性并避免在不受信任的环境中降低安全标准。
完成
