Electron启动的Chromium窗口中，如何使用HTTP协议打开本地摄像头

  • Chrome浏览器调用本地摄像头安全策略
  • Chrome使用http协议打开的远端页面如何调用摄像头
  • Electron启动的Chromium窗口中，如何使用HTTP协议打开摄像头


Chrome浏览器调用本地摄像头安全策略

Chrome浏览器在46版本后，对于摄像头的调用更加严格，默认情况下，只允许三种调用方式：
1.https协议打开的页面；
2.客户端本地启动服务的页面，即localhost打开的页面；
3.直接打卡客户端本地文件，即file:///协议打开的文件；
http协议打开的远端页面不允许访问摄像头，调用navigator.mediaDevices时返回undefined。

Chrome使用http协议打开的远端页面如何调用摄像头

新版Chrome提供了实验性功能，unsafely-treat-insecure-origin-as-secure属性，可以将开发人员设置的白名单地址定义为安全链接（http://IP:Port），从而可以实现http协议打开的远端页面调用客户端摄像头，具体实现方式如下：

在地址栏输入chrome://flags/, 搜索unsafely，将需要加入白名单的地址填入，并将右侧下拉框选为Enabled

用自带浏览器下载镜像 浏览器摄像头镜像_客户端


注意，确保摄像头没有被操作系统禁用，设置完成后，重启Chrome，此时，加入白名单的远端页面就可以调用客户端本地摄像头了。

Electron启动的Chromium窗口中，如何使用HTTP协议打开摄像头

下面是重点，本以为在Chrome测试http成功后，使用Electron可以一帆风顺，用以下代码设置unsafely-treat-insecure-origin-as-secure属性：

app.commandLine.appendSwitch('unsafely-treat-insecure-origin-as-secure', 'http://IP:Port');

启动页面后，调用navigator.mediaDevices时仍旧返回undefined，无法访问客户端摄像头，查询原因，Electron并不支持unsafely-treat-insecure-origin-as-secure这个属性，github很多人问过类似问题，都是尝试失败

要继续寻找别的办法了，在github看到一个帖子的回复，使用Electron提供的protocol接口，注册自定义协议并拦截基于现有协议的请求，直接线上代码：

protocol.registerSchemesAsPrivileged([
    {
      scheme: 'http', 
      privileges: {
        bypassCSP: true,
        secure: true,
        supportFetchAPI: true,
        corsEnabled: true
      }
    }
  ]);

在 app 的 ready 事件触发前调用一次该方法，对http协议赋予特权，将其定义为安全的协议，此时，再启动的Chromium窗口，使用http协议打开的远端页面，就被浏览器认为是安全的，可以调用客户端本地摄像头了。