关于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浏览器的安全策略

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

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

记得不要提交代码

 

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

  • 7
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
navigator.mediaDevices.getUserMedia()方法用于调用设备的摄像头和麦克风。然而,由于不同浏览器的兼容性问题,可能会导致该方法在某些浏览器中无法正常工作。以下是解决navigator.mediaDevices.getUserMedia兼容问题的方法: 1. 检查浏览器兼容性:在调用navigator.mediaDevices.getUserMedia()之前,可以使用以下代码检查浏览器是否支持该方法: ```javascript if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // 浏览器支持getUserMedia方法 } else { // 浏览器不支持getUserMedia方法 } ``` 2. 使用适配器库:为了解决不同浏览器之间的兼容性问题,可以使用适配器库,例如webrtc-adapter库。该库可以自动处理不同浏览器之间的差异,使得navigator.mediaDevices.getUserMedia()方法在所有浏览器中都能正常工作。你可以通过以下步骤使用webrtc-adapter库: a. 在HTML文件中引入webrtc-adapter库的脚本: ```html <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> ``` b. 在调用navigator.mediaDevices.getUserMedia()之前,不需要进行任何其他更改。 3. 检查设备权限:在某些情况下,navigator.mediaDevices.getUserMedia()方法可能无法正常工作是因为用户未授予访问摄像头和麦克风的权限。在调用该方法之前,可以使用以下代码检查用户是否已授予相应的权限: ```javascript navigator.permissions.query({ name: 'camera' }).then((permissionStatus) => { if (permissionStatus.state === 'granted') { // 用户已授予摄像头权限 } else { // 用户未授予摄像头权限 } }); ``` 如果用户未授予相应的权限,你可以提示用户授予权限或提供其他解决方案。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值