JS调用媒体设备失败 --- getUserMedia undefine 问题(各浏览器配置方法)

解决: getUserMedia undefine 问题

问题: http请求的 chrome,edge, fireFox 等主流浏览器由于安全限制将不会暴露getUserMedia 方法,所以就不能够访问用户的媒体设备。

为什么会出现这种情况?

首先本地开发 127.0.0.1 不会出现这种情况,这种情况仅存在于线上环境并且没有SSL证书的HTTP协议网址。

如何解决

1. 使用HTTPS协议

为线上环境申请域名,配置SSL证书,实现HTTPS协议的请求,这样浏览器就不会拦截使用getUserMedia 方法

2. 适配各种浏览器的临时解决方案-配置浏览器的方法

主流浏览器配置方法
(1) Chrome 谷歌浏览器
第一步: 浏览器地址栏输入: chrome://flags/#unsafely-treat-insecure-origin-as-secure
第二步: 如图配置:
在这里插入图片描述
第三步:权限配置成功,访问页面相关功能,如图所示 允许使用摄像头
在这里插入图片描述
(2) edge 浏览器
edge 浏览器配置方法与 chrome 谷歌浏览器相同
(3) FireFox 火狐浏览器
第一步: 浏览器地址栏输入: about:config
如图:
在这里插入图片描述

第二步: 搜索首选项名称为填写 : insecure
如图所示
在这里插入图片描述
第三步: 将如上图所示的两项修改为 true (点击右侧切换按钮即可修改)
即:

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

非主流浏览器配置方法
(4) 360 浏览器等谷歌内核浏览器 均使用 Chrome 谷歌浏览器配置方法

  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值