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

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

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



这是代码：

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';

});

最佳答案

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';