调用webRtc getUserMedia 报错问题解决办法

在调用浏览器进行音视频播放或者麦克风权限的时候经常会报getUserMedia错误，以下是常见的两种原因：

1. 网络协议不安全；
2. 页面存在iframe嵌套，而需要授权的页面是iframe的子页面，且父子页面存在跨域访问；

---

网络协议不安全

一、这种情况首选的是生产环境升级http协议为https协议，这个时候浏览器就会放权。【当然本地使用localhost访问，浏览器默认是支持权限开放的】

二、如果在测试环境，不具备配置https的条件，可以采用在浏览器配置白名单方式放权：

1. chrome系（内核）浏览器：

• 浏览器地址栏输入: chrome://flags/#unsafely-treat-insecure-origin-as-secure
  

• 如图配置：然后重启浏览器就可以。
  

2. 火狐浏览器：

• 浏览器地址栏输入: about:config
  

• 如图搜索insecure
  

• 如图配置,将下面两项设置为true
  

media.devices.insecure.enabled = true
media.getusermedia.insecure.enabled = true

页面存在iframe嵌套

getUserMedia()使用跨源 iframe访问相机和麦克风，默认情况下它将失败，解决办法是在iframe标签里添加allow属性：

<iframe src="" allow="camera *;microphone *;autoplay *;"></iframe>