web调用摄像头问题

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

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

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

web调用摄像头问题_第1张图片

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

1. 使用https协议

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

web调用摄像头问题_第2张图片

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

web调用摄像头问题_第3张图片

相关代码

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,找到了这个插件,引入这个插件在移动端上有个悬浮圆,点击可以查看控制台,就像微信小程序调试的那样



 let vConsole = new VConsole();

你可能感兴趣的:(前端)