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

});

來源

2016-11-30 irredev

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

來源

2016-11-30 11:01:31 natchkebiailia

nope相同的結果... – irredev

等待！它實際上工作！這是我的錯。我沒有清除緩存。 – irredev

您在使用視頻HTML元素的大小，而不是流的大小。這就是照片被拉伸的原因。您應該使用視頻軌道的大小。

如果您在調用MediaDevices.getUserMedia時指定了它，請使用這些值。否則從視頻軌道進行檢索（MediaStreamTrack.getSettings()）

來源

2016-11-30 10:55:37 JEY

如何從js中的攝像頭獲取原始圖像？

回答

相關問題