WebRTC的出现使js能够操作录音设备和摄像机。如果我们使用web监控，考虑到大量数据实时传输到摄像头的问题，我们可以定期拍摄摄像头拍摄的照片。那么如何使用js获得相机拍照(截取图片)的功能呢？

视频流

主角还是webRTC中的getUserMedia方法(演示使用推荐的navigator . mediadevices . getuser media方法，navigator.getUserMedia类似)。首先，我们从摄像机获取视频流。

视频/视频

var video=document . query selector(' video ')；

var约束={

audio: true，

视频： {

宽度： 1280，

高度： 720

}

};

navigator . MediaDevices . GetUserMedia(约束)。然后(函数(mediaStream) {

video.srcObject=mediaStream

video . onloaded metadata=function(e){

video . play()；//载入相机数据后，开始播放

};

});

分辨率没设置也没关系，会用默认分辨率，分辨率超过硬件分辨率会用默认上限。

画布绘画

为了下载图片，我们需要画布。首先，我们需要在画布上绘制当前数据，然后使用画布的toDataURL方法将图片转换为base64格式的图片。

解决

众所周知，视频分辨率影响画布的大小(或者说画布的剪裁大小)。我希望画布上覆盖图片，并在全屏模式下剪切。

为了获得相应的分辨率，需要ImageCapture对象，传入的参数是一个MediaStreamTrack，需要调用MediaStream类型的getVideoTracks()方法。

var track=MediaStream . GetViteTracks()[0]，

imageCapture=new ImageCapture(跟踪)；

//从流中获取捕获的静止图片的信息

image capture . getphotossettings()；

根据分辨率设置画布大小：

ocanvas . width=photossettings . imagewidth；

ocanvas . height=photossettings . imageheight；

画

画的话，直接用2d上下文对象的drawImage方法就可以了。这个方法支持传入一个HTMLVideoElement元素，直接调用就可以画成功。

ctx.drawImage(视频，0，0)；

下载

下一步是使用A标签下载base64格式的图片。我的文章canvas里有详细说明本地保存图片。

将事件绑定到下载按钮，

document.getElementById('btn ')。onclick=function() {

ctx.drawImage(视频，0，0)；

var base 64 img=canvas . todaytaurl()；

var OA=document . CreateElement(' a ')；

oA.href=base64Img

OA.download='截图。png '；//下载的文件名可以在这里修改

OA . click()；

};

因为画布只有在下载时才会被绘制，所以绘制过程被移动到事件。

至此，网页上的摄像头截图完成，下面隐藏了画布和视频元素。