记一次vue 使用TRTC出现navigator.mediaDevices is undefined

问题场景还原：

甲方BB要在项目中使用TRTC替换掉原有的视频方案，好吧，改！

在本地开发时，前后端，小程序端都没有问题，正常接入，正常使用。

同事说要帮忙测试，ok，开本地后，开本地前端（测试环境基于某些令人愤怒、无奈、不可说的原因不能使用），提供http://ip:port的方式给到同事，开始测试……开始视频……

poom，“这不行，出错了，看不到我英俊的脸庞啊”

查找问题，浏览器console出现血红血红的error标识：

<ERROR> navigator.mediaDevices is undefined
TypeError: Cannot read property 'getTracks' of undefined

ok，找吧。

原因：Chrome浏览器，在http路径下由于安全性原因无法使用摄像头、麦克风

例：http://111.222.33:8081

默认是在localhost、file和https 域下使用，就是http://localhost 、file://xxxx、https://xxxxxx才能使用

解决方案：

Chrome 打开chrome://flags/#unsafely-treat-insecure-origin-as-secure 

将 Insecure origins treated as secure 这一项进行修改

将ip和前端的端口（一定要加端口喔，不然没卵用）输入，并将后面的Disable改为Enable，再点击Relaunch，刷新页面

但是这样有个问题：

每次打开浏览器，顶部都会出现这个这个提示。（强迫症患者可以找找其他的方法）

再或者，换个浏览器试试？？？（笑哭）

---

---

2020-09-10更新

这个问题会导致谷歌浏览器无法调起笔记本摄像头（http），换成https就可以授权浏览器使用摄像头和麦克风了

 

不积跬步无以至千里。