实现拍照功能需要使用电脑的摄像头，可以使用 navigator.mediaDevices.getUserMedia() 方法，传递相应的参数就能开启摄像头
navigator.mediaDevices 是一个媒体设备对象，通过 getUserMedia( )方法开启音频和视频媒体设备。
getUserMedia
参数：
- options：需要开启的设备的配置对象，可以开启audio、video
getUserMedia() 方法返回的是一个promise，promise得到的结果是 mediaStream 对象。把它赋值给 video.srcObject 就能播放。
开启视频媒体设备，需要在参数中设置
navigator.mediaDevices.getUserMedia({video:true}).then(res => {});
上面是简单的使用摄像头的能力，还可以设置摄像头的分辨率
// 设置固定值
navigator.mediaDevices.getUserMedia({video:{width:2400, height:1080}}).then(res => {});
// 设置区间
navigator.mediaDevices.getUserMedia({video:{width:{min:1080,max:2400}, height:{min:1080,max:2400}}}).then(res => {});
还可以设置使用前摄像头还是后摄像头
// 使用前摄像头
navigator.mediaDevices.getUserMedia({video:{facingMode:'user'}}).then(res => {});// 使用后摄像头
navigator.mediaDevices.getUserMedia({video:{facingMode:{ext:'enviroment'}}}).then(res => {});
开启音频设备
navigator.mediaDevices.getUserMedia({audio:true});
示例
<img src="" alt="" id="img" /><canvas id="canvas"></canvas><video src="" id="video"></video><button id="button"></button>
navigator.mediaDevices.getUserMedia({video:true}).then(meidaStream => {const video = document.getElementById('video');const button = document.getElementById('button');const canvas = document.getElementById('canvas');const img = document.getElementById('img');// 设置为none不让其他的元素显示，只显示最终的结果video.style.display = 'none';canvas.style.display = 'none';// 把摄像头得到的数据流，赋值给video让其显示video.srcObject = mediaStream;video.onloadmetadata = function (){// video播放得到的数据流video.play();}button.onclick = function (){// 按钮点击的时候暂停播放，把当前的视频帧传递给canvas绘制然后通过toDataURL()方法导出图片video.pause();canvas.drawImage(video, 0, 0, canvas.width, canvas.height);const imgSrc = canvas.toDataURL();img.src = imgSrc;}
});
补充
mediaDevices 对象处理上面使用的方法外，还有下面这些事件和方法
方法
- enumerateDevices()：列举出能使用的输入、输出的媒体设备
该方法返回一个promise对象，promise返回的数据是可使用的媒体设备的列表
navigator.mediaDevices.enumerateDevices().then(res => {console.log(res);});
事件
devicechange：当设备连接到系统或移除时触发
该事件可以用于监听设备的连接，当有设备连接时获取设备，没有设备时可以向客户端输出提示信息。
