navigator.mediaDevices为undefined解决办法

616 阅读1分钟

在我们使用navigator.mediaDevices.getUserMedia()方法是会遇到navigator.mediaDevices为undefined,这是由于浏览器的安全策略导致,目前只支持以下三种情况

  1. 地址为localhost:// 访问时
  2. 地址为https:// 时
  3. 为文件访问file:///

详细内容可以参考 MediaDevices.getUserMedia() - Web API 接口参考 | MDN

具体解决方法为:

  1. 创建HTTPS服务器,用HTTPS协议的方式发送请求。(需要申请证书)
  2. 修改chrome浏览器的安全策略:

a. 在chrome浏览器的地址栏中输入: chrome://flags/#unsafely-treat-insecure-origin-as-secure,将该 flag 切换成 enable 状态;
b. 在输入框中填写需要开启的域名或地址,如果有多个,则以逗号分隔;
image.png c. 重启浏览器后生效。
image.png 如果有其他更好的解决办法,欢迎补充。