问题引入:
navigator.mediaDevices undefined
场景:最近项目需求视频连线,音频对讲
问题:navigator.mediaDevices调用返回为undefined
原因:
通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境:
- localhost 域
- 开启了 HTTPS 的域
- 使用 file:/// 协议打开的本地文件
如果当前文档未安全加载,navigator.mediaDevices 将为 undefined,并且不能使用getUserMedia()。
解决方案:
- 创建HTTPS服务器,用HTTPS协议的方式发送请求。
- 在HTTP服务器上,可设置Chrome 的相应参数:
a. 在chrome浏览器的地址栏中输入: chrome://flags/#unsafely-treat-insecure-origin-as-secure,将该 flag 切换成 enable 状态;
b. 在输入框中填写需要开启的域名或地址,如果有多个,则以逗号分隔;
c. 重启浏览器后生效。
第二种方式只适合自己测试,本机浏览器使用。