Electron加载HTTP页面打开本地摄像头

最新推荐文章于 2025-09-10 20:14:45 发布

原创

最新推荐文章于 2025-09-10 20:14:45 发布 · 4.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #html

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，此时，加入白名单的远端页面就可以调用客户端本地摄像头了。