当时的场景是公司搭建的内部服务网站没有测试环境（有点鸡肋，说是因为需要线上成员信息认证登录），也因为跨域问题，所以需要制定线上环境的域名，本地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浏览器的安全策略

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

3、在本地做了一次proxy，我的项目是vue的，在vue.config.js中添加：

记得不要提交代码

采用第2、3套方案可以解决本地调试问题，如果线上不是https协议，那就要申请证书了