browser-sync start --proxy "localhost:3000" --https
文章目录问题描述解决办法1. 使用 mkcert 生成本地证书2. 找到 browser-sync 包的位置，替换 certs 文件夹下文件，如下3. 使用 https 启动问题描述需要其他电脑上调试本地项目。我是在开发电脑上启动本地项目，使用 browser-sync 代理，让其他电脑通过 IP 访问，例如：http://x.x.x.x:3001 。这样是可以在其他电脑上访问到我的本地项目，可是报错 navigator.mediadevices.enumeratedevices is not a
navigator.mediaDevices.getUserMedia
应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下：
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
看上去很简单，最终却写的怀疑人生。
API环境
问题一：（为什么不管怎么配置都显示前置摄像头）
想正常使用API必须在https环境下进行，否则你会发现不管怎么写，都只能调用默认的摄像头（大部分都是前置，只有少部分是后置）
前端开发者可以将文件上传至码云仓库，获取
<script>
navigator.mediaDevices.enumerateDevices()
.then(gotDevices).catch(handleError);
// 遍历所有的设备，包括视频和音频设备,找到双目摄像头
function gotDevices(deviceInfos) {
console.log(deviceInfos);
function handleError(er
navigator.mediaDevices.enumerateDevices方法 的兼容性问题
经测试发现，除谷歌浏览器和现在使用Chromium内核的Microsoft Edge浏览器外，enumerateDevices()方法存在一些兼容性问题。
首先，如果不先获取媒体权限，用enumerateDevices()获取到的设备列表中label为空，即无法识别设备名字。这个考虑有两种方案解决：
a）在调用enumerateDevices()时，对于label为空的情况手动定义设备名字，在进入会议调
使用 Blob 构造函数可以直接在客户端上创建和操作 Blob（通常等效于一个文件）。
Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因。
var blobObject = new Blob(["I scream. ...
最近在开发中，有一个功能需要实现录制屏幕的功能，我这边使用了recordrtc库，在过程中本地开发都没有问题，部署到线上环境时出现 navigator.mediaDevices为undefined，查找了不少文章和官方文章才得以解决由于浏览器的安全策略导致了这个问题，目前经尝试，在以下几种情况中 navigator.mediaDevices 可以正常使用
另附上 recordrtc 使用源码以供参考 (参考源码使用了element UI)...
一. getDisplayMedia
WebRTC 提供了 mediaDevices.getDisplayMedia API 获取本地桌面数据，例如在共享屏幕时我们需要将本地桌面发送给对方。
var promise = navigator.mediaDevices.getDisplayMedia(constraints);
调用该函数后会弹窗提示选择希望共享的屏幕或窗口（例如本地有双显示器屏幕可以选择其中一个屏幕，或者选择希望共享的应用窗口），该函数调用...
获取用户媒体的承诺
用于 （较新的基于的API）的轻量级Ponyfill / Polyfill。 必要时包装较旧的基于回调的 。
通过browserify / webpack / etc使用时，表现为小马填充（不涉及全局）。 或作为独立库包含时，作为polyfill（设置全局变量）。
压缩和压缩后，小于0.5kb（大约是getUserMedia填充片大小的5％）。
注意：这仅适用于Web浏览器，并且仅适用于。
此外，该库不会尝试重新格式化跨浏览器支持的约束，因此，如果您需要高级音频/视频约束，则可能是一个更好的选择。
npm install --save get-user-media-promise
bower install --save get-user-media-promise
从GitHub下载。
使用诸如Require.js，
chrome 报错 navigator.mediaDevices is undefined
最近在开发一个摄像头项目（多人会议，需要摄像头~~）。然后同事的电脑调试好好的，到我这里就报错了，我的 chrome 版本一直都在最新的，为啥到我这反而还不兼容？
原来是以后的内容会越来越严格
chrome：想调用摄像头？可以啊，拿出你的https证书给我瞧瞧
毕竟不可能到处都有 https 证书把，总得本地调试把，localhost 域名总会有吧。于是发
最近在开发过程中，有一个具体需要要使用摄像头内嵌到h5页面中实现拍照效果，相当于变相通过还H5调原生拍照、摄像等效果。
在这个过程中发现在开发环境时，各种访问媒体设备都没有问题，但是当部署到服务器上，手机和电脑浏览器都无法调起摄像头，比较郁闷，阅读了很多文章和原生文档后才知道原因并解决。
问题分析解决
这是由于浏览器的安全策略导致的，目前本人翻阅到的文档，有下面三种情况是可以调起设备的，也就是navigator.mediaDevices不为undefined：
地址为localhost://
navigator.mediadevices.getusermediaios是WebRTC API中的一个方法，可以在iOS设备上获取媒体流，包括摄像头图像、麦克风录音等。目前，navigator.mediadevices.getusermediaios的兼容性较差，只有少数iOS设备能够使用，具体版本如下：
- iOS 11及其以上版本支持获取媒体流，包括Safari和Chrome浏览器。
- iOS 11以下版本的Safari浏览器不支持navigator.mediadevices.getusermediaios方法，而Chrome浏览器需要使用Chrome for iOS版本才能获取媒体流。
需要注意的是，navigator.mediadevices.getusermediaios虽然在iOS设备上使用较少，但在其他设备和浏览器上兼容性良好，可以满足开发者获取媒体流的需求。因此，在开发过程中需要仔细选择API方法，避免因兼容性问题给用户造成不便。
