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

问题描述：

如何在左侧获取网络摄像头视频的格式与图像的右侧相同？如何从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';

nope相同的结果... – irredev

等待！它实际上工作！这是我的错。我没有清除缓存。 – irredev

答

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

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

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

相关推荐