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

完成!

相关推荐
明月清风徐徐38 分钟前
Vue实训---6-完成用户退出操作
javascript·vue.js·elementui
杨荧2 小时前
【开源免费】基于Vue和SpringBoot的图书进销存管理系统(附论文)
前端·javascript·vue.js·spring boot·spring cloud·java-ee·开源
pocket0012 小时前
《只狼:影逝二度》mfc140.dll丢失解决指南
经验分享·游戏·电脑
○陈2 小时前
js面试题|[2024-12-10]
java·前端·javascript
易和安2 小时前
JS进阶DAY5|本地存储
开发语言·javascript·ecmascript
安冬的码畜日常3 小时前
【D3.js in Action 3 精译_044】5.1 饼图和环形图的创建(四):数据标签的添加
前端·javascript·信息可视化·数据可视化·d3.js·d3环形图·d3饼图
Samson Bruce3 小时前
【创建模式-蓝本模式(Prototype Pattern)】
开发语言·javascript·原型模式
浪遏3 小时前
对比学习 apply, call, 和 bind 👀👀👀
前端·javascript·面试
常常不爱学习3 小时前
CSS元素宽高特点、类型转化、显式和隐藏(display)
前端·javascript·css
图扑软件3 小时前
火电厂可视化助力提升运维效率
大数据·前端·javascript·人工智能·数字孪生·可视化·火电厂