Web Api MediaDevices .getUserMedia() navigator.mediaDevices is undefined

chrome中非https无法打开摄像头

MediaDevices .getUserMedia()方法提示用户使用媒体输入的权限，该输入会产生MediaStream并包含包含请求的媒体类型的轨道. 该流可以包括，例如，视频轨道（由硬件或虚拟视频源（如相机，视频记录设备，屏幕共享服务等）产生），音频轨道（类似地由物理或视频产生）虚拟音频源（如麦克风，A / D转换器等）以及其他轨道类型.但是getUserMedia()方法仅在安全上下文中可用. 安全上下文是指浏览器有把握地确定其包含使用HTTPS / TLS安全加载的文档，并且对不安全上下文的暴露程度有限. 如果未在安全的上下文中加载文档，则navigator.mediaDevices属性是undefined ，使得无法访问getUserMedia() .

即通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境：

• localhost 域
• 开启了 HTTPS 的域
• 使用 file:/// 协议打开的本地文件

参考：http://s0developer0mozilla0org.icopy.site/en-US/docs/Web/API/MediaDevices/getUserMedia#Security

开发时，通过本地ip访问（手机也同样设置），可以通过访问下面的链接打开设置：

chrome://flags/#unsafely-treat-insecure-origin-as-secure

在输入框中输入你链接的 host， 如： http://192.168.3.107:3000 ，重启浏览器生效。