关于navigator.mediaDevices为undefined，获取不到媒体权限的问题

当时的场景是公司搭建的内部服务网站没有测试环境（有点鸡肋，说是因为需要线上成员信息认证登录），也因为跨域问题，所以需要制定线上环境的域名，本地localhost用不了，协议是http的，导致接入一个语音需求的时候本地调试出现了问题。

主要原因是浏览器的安全策略导致了这个问题

// 获取媒体信息

navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia;

if (navigator.getUserMedia) {

// 支持

console.log('支持');

} else {

// 不支持

console.log('navigator.getUserMedia - 不支持');

return

}

MediaDevices.getUserMedia() - Web API 接口参考 | MDN

navigator.mediaDevices在目前以下三种情况下可以获取到

1. 地址为localhost:// 访问时

2. 地址为https:// 时

3. 为文件访问file:///

解决方案是

1、采用https方案，由于线上环境都是https协议的，所以这个不用考虑，只是本地调试是一个大问题，所以忽略

2、采取修改chrome浏览器的安全策略

在chrome浏览器的地址栏中输入： chrome://flags/#unsafely-treat-insecure-origin-as-secure，将该 Disabled 切换成 enable 状态；
在输入框中填写需要开启的域名或地址(带上端口号)，如果有多个，则以逗号分隔；
重启浏览器后生效