解决: 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 谷歌浏览器配置方法

JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）相关推荐

JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
html5 调用摄像头支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
js调用摄像头拍照并访问后端代码
1.先上效果(注意我的摄像头是打开的这里获取的是实时的视频流): 图略,太丑了决定删了 2.index.html <!-- Copyright (c) 2018 ml5This software ...
js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
H5：获取手机媒体设备权限，如麦克风、视频等
简介 H5开发中,有的项目需要获取手机设备权限,如麦克风.视频. 具体实现 created() {if (navigator.mediaDevices.getUserMedia || navigato ...
Vue （用javaScript/JS）调用媒体摄像头拍照扫描银行卡
概述:在Vue中调用摄像头拍照进行银行卡识别. 流程:vue中调用媒体摄像头(无前后摄像头切换功能)-->根据规定的框(前端自己定制)放置银行卡-->将识别的图片通过接口传到后台,后台识别 ...
使用js调用设备摄像头并实现拍照
使用getUserMedia这个API来获取摄像头的权限并实现拍照在线体验:https://811w1z2xwj.codesandbox.io/ 下面是源码: <!DOCTYPE html&g ...
(转)解决在firefox下js调用as失败问题
解决在firefox下js调用as失败问题自:http://www.cnblogs.com/mfryf/archive/2012/04/17/2453024.html 问题描述:写了一个js与as的 ...
Android开发笔记（六十四）网页加载与JS调用
内置浏览器网页视图WebView 如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app中,省去了app重画页面与http通信的事情,无疑是更经济的做法.WebView就是A ...

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