当时的场景是公司搭建的内部服务网站没有测试环境(有点鸡肋,说是因为需要线上成员信息认证登录),也因为跨域问题,所以需要制定线上环境的域名,本地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 状态;
- 在输入框中填写需要开启的域名或地址(带上端口号),如果有多个,则以逗号分隔;
- 重启浏览器后生效
3、在本地做了一次proxy,我的项目是vue的,在vue.config.js中添加:
记得不要提交代码
采用第2、3套方案可以解决本地调试问题,如果线上不是https协议,那就要申请证书了