web调用摄像头问题

项目用到要web调用摄像头的情况。可以调用 navigator.getUserMedia 的方法。

经测试，除了本地运行（使用本地IP 127或localhost）可以正常调用摄像头，其余的都会报错，报错如图：

查资料得知因为加密的安全性问题：

目前查到的解决办法如下：

1. 使用https协议

2. 手动修改本机浏览器配置【chrome://flags/ 】，多个地址用【,】隔开，修改后底部会提示重启浏览器

重新打开页面，允许调用摄像头，就可以了

相关代码

navigator.getUserMedia({video: true,audio:true}, function onSuccess(stream) {
    console.log('已点击允许,开启成功');
}, function onError(error) {
    console.log("错误：", error);
});

let constraints = { video: { facingMode: "user" } };
   navigator.mediaDevices.getUserMedia(constraints)
   .then((stream) => {
      this.stream = stream;
    })

顺便推一个插件：vconsole。我是手机上调试的，没有办法F12，找到了这个插件，引入这个插件在移动端上有个悬浮圆，点击可以查看控制台，就像微信小程序调试的那样

<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>

 let vConsole = new VConsole();