如何从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';