electron 打包 webview 嵌入需要调用电脑摄像头拍摄失败问题

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 文件中添加下面这段代码就可以了。

javascript 复制代码
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 的网站或应用)视为安全的。这通常用于开发环境,以便能够绕过浏览器对安全性的某些限制,这种行为非常不建议使用,虽然这个开关可以在开发过程中提供便利,但它带来了重大的安全风险,并且绝不应该在生产环境中使用。始终优先考虑应用的安全性,并避免在不受信任的环境中降低安全标准。

完成!

相关推荐
轻语呢喃5 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想18 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷19 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson23 分钟前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip4 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘4 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js