如何从js中的网络摄像头获取原始图像？

Question

如何使左侧的网络摄像头视频与绘制图像的右侧的格式相同？

有这个问题一段时间了，无法解决！

这是代码：

document.getElementById('capture').addEventListener('click', function() {
    var w = video.videoWidth;
    var h = video.videoHeight;
    canvas.width = w;
    canvas.height = h;
    context.drawImage(video,0,0,w,h);
    canvas.style.display='block';

});

Answer 1

您使用的是视频html元素的大小，而不是流的大小。 这就是照片被拉伸的原因。 您应该使用视频轨道的大小。

如果在调用MediaDevices.getUserMedia时指定了它， 请使用这些值。 否则，从视频轨道（ MediaStreamTrack.getSettings（） ）中检索它们。

Answer 2

video.videoWidth不是视频的实际宽度，因此您在新画布上会得到不同的比率。 尝试这个：

var videoRatio = video.videoWidth / video.videoHeight;
var width = video.offsetWidth, height = video.offsetHeight;
var elementRatio = width/height;
if(elementRatio > videoRatio) width = height * videoRatio;
else height = width / videoRatio;

canvas.width = width;
canvas.height = height;
context.drawImage(video,0,0,width,height);
canvas.style.display='block';