打开 chrome://flags/#unsafely-treat-insecure-origin-as-secure
- 选 enabled
- 填写需要调试的 URL，多个 URL 以,隔开
- 完全重启 chrome 后起效（改了之后下面也会有个
relaunch 按钮）
重启后发现，就可以非https调试了
毕竟现在 edge 和 chrome 内核一样了，所以操作方法一样，只是打开链接不同:edge://flags/#unsafely-treat-insecure-origin-as-secure
至此，问题就解决了，要想到线上使用，还是需要https，现在没 https 寸步难行
what?chrome 会报错？你代码写错了把！chrome 报错 navigator.mediaDevices is undefined最近在开发一个摄像头项目（多人会议，需要摄像头~~）。然后同事的电脑调试好好的，到我这里就报错了，我的 chrome 版本一直都在最新的，为啥到我这反而还不兼容？原来是以后的内容会越来越严格chrome：想调用摄像头？可以啊，拿出你的https证书给我瞧瞧解决问题毕竟不可能到处都有 https 证书把，总得本地调试把，localhost 域名总会有吧。于是发
报navigator.mediaDevices.getUserMedia为undefined的错误，其实是因为navigator.mediaDevices没有找到。但这也只是表相，其根本原因是浏览器的安全策略，特别是chrome浏览器。
一般来说，JS开发有三种访问环境。
一、使用file协议打开的本地文件
比如，file:///Us
navigator.mediaDevices.getUserMedia
应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下：
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
看上去很简单，最终却写的怀疑人生。
API环境
问题一：（为什么不管怎么配置都显示前置摄像头）
想正常使用API必须在https环境下进行，否则你会发现不管怎么写，都只能调用默认的摄像头（大部分都是前置，只有少部分是后置）
前端开发者可以将文件上传至码云仓库，获取
最近在开发中，有一个功能需要实现录制屏幕的功能，我这边使用了recordrtc库，在过程中本地开发都没有问题，部署到线上环境时出现 navigator.mediaDevices为undefined，查找了不少文章和官方文章才得以解决由于浏览器的安全策略导致了这个问题，目前经尝试，在以下几种情况中 navigator.mediaDevices 可以正常使用
另附上 recordrtc 使用源码以供参考 (参考源码使用了element UI)...
最近做了一个通过webRTC实现在线视频功能的网页，在自己的电脑上用localhost打开两个网页是可以的，但是设置了一个简单的HTTP请求的NodeJS服务器之后，在局域网中用ip地址访问就不行了，浏览器会弹出 navigator.mediaDevices undefined 的错误。
网上搜了蛮多的，终于找到了原因：
通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境：
localhost 域
开启了 HTTPS 的域
最近在做云视频会议项目，公司用的是trtc。准备先把网页端demo整合到项目里面去，然后修修改改就是自己的东西了！这也算是知识盲区吧。本以为很简单的事硬生生卡了我两天。为啥以为很简单呢、因为trtc的demo在本地文件夹打开index.html都能直接用。一放进项目就不行。想想都好气哎。
看我的访问路径，划重点！后面要考
遇到的就是下面这个错，这个错直接导致的就是无法调用摄像头获取视频流。
这个是谷歌webrtc的问题。无法收集到navigator.media
问题原因：
由于electron mainWindow.loadURL(‘http:127.0.0.1’) 访问是已http协议，而chrome浏览器在访问http请求时考虑隐私安全是无法打开许多Web API的(如：navigator.mediaDevices)，你会发现 navigator.mediaDevices = undefined
问题如下：
https://github.com/electron/electron/issues/15298
由上连接可知以前的解决方法为：
app.comman
最近在开发过程中，有一个具体需要要使用摄像头内嵌到h5页面中实现拍照效果，相当于变相通过还H5调原生拍照、摄像等效果。
在这个过程中发现在开发环境时，各种访问媒体设备都没有问题，但是当部署到服务器上，手机和电脑浏览器都无法调起摄像头，比较郁闷，阅读了很多文章和原生文档后才知道原因并解决。
问题分析解决
这是由于浏览器的安全策略导致的，目前本人翻阅到的文档，有下面三种情况是可以调起设备的，也就是navigator.mediaDevices不为undefined：
地址为localhost://
通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境：
1.1 localhost 域
开启了 HTTPS 的域
使用 file:/// 协议打开的本地文件
其他情况下，比如在一个 HTTP 站点上，navigator.mediaDevices 的值为 undefined。
如果想要 HTTP 环境下也能使用和调试 MediaDevic...
作用：为用户提供直接连接摄像头、麦克风的硬件设备的接口
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream)
.....
catch(function(error)
参数表...
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 {
// 用户未授予摄像头权限
如果用户未授予相应的权限，你可以提示用户授予权限或提供其他解决方案。
