html5调用摄像头截图功能

第html5调用摄像头截图功能关于html5调用音视频等多媒体硬件的API已经很成熟，不过一直找不到机会把这些硬件转化为实际的应用场景，不过近年来随着iot和AI的浪潮，我觉得软硬结合的时机已经成熟。那我们就提前熟悉下怎么操作这些多媒体硬件吧，首先图像识别是其中最热门的应用场景，首先实现调用摄像头以及截图。

demo的效果请看：摄像头截图

API兼容性

核心的api就是navigator.MediaDevices，从caniuse可看出，PC端除了IE，已经没多大问题。移动端新版本浏览器也支持，同时很多项目都已经转向小程序，加上移动端一向紧跟最新标准，问题也不大。接着就是支持度就更好的video标签。最后还有canvas，支持度就更加乐观了。

硬件的获取

使用到的api：enumerateDevices，它返回的是一个promise，结果就是设备列表。设备的对象属性主要包括deviceId，groupId，kind。其中deviceId，groupId是设备的标记，可以通过这两个id调用所属的硬件。而kind顾名思义就是硬件类型了。有了enumerateDevices就可以遍历硬件，同时可以实现选择对应的硬件并调用。

//遍历多媒体硬件

navigator.mediaDevices.enumerateDevices().then(function(devices){

console.log(devices);

deviceId:

groupId:8cac2d9a9e5d30a7bfc5a33b9971a3d40a850f7b0f6634b7f41f7dbe1de0a519

kind:audioinput

label:

}[]

调用摄像头

接着开始调用对应的硬件，这里会使用到另一个api，getUserMedia，同样它返回的也是一个promise，结果是一个视频流。有了视频流就好办了，把stream设置到video的srcObject，马上一个视频监控的应用就出来了。

getUserMedia的参数设置比较复杂，具体可参考MDN里面的文档getUserMedia，我这里设置的是对应的摄像头及视频的尺寸。loadedmetadata事件在元数据（metadata）被加载完成后触发视频播放。

//调用摄像头，并将流导入video

navigator.mediaDevices.getUserMedia({

video:{groupId,width:800,height:600}

}).then(function(stream){

video.srcObject=stream;

mediaTrack=stream.getTracks()[0];

video.onloadedmetadata=function(e){

video.play();

.catch(console.log);

视频的截图

最后就是截取视频画面了，这就用到了canvas的drawImage，这个api不仅支持把canvas对象和image对象渲染进画布，同时还支持video对象，这就完美解决了我们的需求，核心代码如下：

//写入画布，并转换为base64

ctx.drawImage(video,0,0,canvas.width,canvas.height);

constimgURL=canvas.toDataURL('image/jpeg');