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
第二步: 把你的项目的域名直接写入Insecure origins treated as secure(不安全的来源被视为安全的)的输入框即可,如图配置:

image.png

第三步:然后点击“Relaunch"重启浏览器配置就生效了。

第四步:再去请求的时候就会提示,选择允许使用摄像头即可。

image.png

edge 浏览器
edge 浏览器配置方法与 chrome 谷歌浏览器相同


FireFox 火狐浏览器
第一步: 浏览器地址栏输入: about:config

第二步: 搜索首选项名称为填写 : insecure

第三步:找到下面的设置为true

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

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

复制内容

留言讨论


评论


乖,登录后才可以留言! 登录

广而告之

Copyright © 2020-2023 春藤技术,春藤建站 All Rights Reserved
备案号:豫ICP备20020705号 公网安备 51LA统计