提取快照與相機源

Question

語境

我試圖捕捉通過客戶端的攝像機的快照並將其保存爲圖像。我有一個JSFiddle demo。

問題

我不是從視頻元素到畫布上用Context2D的drawImage獲得整個視頻領域取得成功。 Althought視頻是400 300

<video width="400" height="300" ... 

，並在畫布上是一樣的400 300

<canvas width="400" height="300" ... 

，當我畫我指定源和目標由300 400 ...

ctx.drawImage(video, 0, 0, 400, 300, 0, 0, 400, 300); 

這是我的客戶正在發生的事情的一個例子。

紅色鏡框元素是video和綠色的是canvas。

我懷疑這是因爲在視頻流是不 400通過300（甚至沒有4：3的縱橫比），但我無法找到又一個爲這個或HTML規格溶液至少一些跡象表明這種行爲是因爲視頻流。

有沒有人在這個領域有更多的經驗，並可以指向正確的方向？

對不起，在小提琴代碼質量差。

Answer 1

當您設置HTMLElement的width和height屬性時，您只設置其顯示大小，而不是其中的框架大小。

Canvas2dContext.drawImage(video, x, y)將取幀大小（可以通過強制性的getUserMedia btw來設置）。

所以，你需要無論是你的畫布的寬度和高度設置爲video.videoWidth和video.videoHeight屬性來獲取通過網絡攝像頭抓起全程質量圖像，OT調用ctx.drawImage(video, 0,0, 400, 300)因爲它是由CSS按比例重新調整它在畫布上，或getUserMedia通話過程中直接設定強制性（latests規格是navigator.mediaDevices.getUserMedia(video: { width: 300, height:300 });），但不幸的是，對於這個最新的，你不能確保瀏覽器將履行它，除非通過檢查video.videoHeight /寬;-)

var ctx = rendering.getContext('2d'); 
 

 
btn.onclick = function() { 
 
    switch (select.value) { 
 
    case 'css rescale': 
 
     rendering.width = 400; 
 
     rendering.height = 300; 
 
     ctx.drawImage(video, 0, 0, 400, 300); 
 
     break; 
 
    case 'full quality': 
 
     rendering.width = video.videoWidth; 
 
     rendering.height = video.videoHeight; 
 
     ctx.drawImage(video, 0, 0); 
 
     break; 
 
    } 
 
} 
 

 
var initVideo = function(stream) { 
 
    video.src = URL.createObjectURL(stream); 
 
    video.play(); 
 
}; 
 

 
navigator.mediaDevices.getUserMedia({ 
 
    video: true 
 
    }) 
 
    .then(function(s) { 
 
    initVideo(s) 
 
    }) 
 
    .catch(function(err) { 
 
    if (err.message.indexOf('secure origins') > -1) { 
 
     document.body.innerHTML = '<h3><a target="_blank" href="https://jsfiddle.net/x64ta5r3/">jsfiddle link for chrome and its https policy...</a></h3>(right click -> open Link...'; 
 
    } 
 
    });

<button id="btn">take a snapshot</button> 
 
<select id="select"> 
 
    <option value="css rescale">css rescale</option> 
 
    <option value="full quality">full quality</option> 
 
</select> 
 
<video width="400" height="300" id="video"></video> 
 
<canvas id="rendering"></canvas>

jsfiddle link for chrome and its https policy...