截圖canvas getUserMedia Chrome

Question

我想在Chrome測試版中製作一段wecam視頻。 該代碼只生成一小部分視頻的屏幕截圖，出了什麼問題？

這裏的代碼：

http://jsfiddle.net/N9XKh/

Answer 1

所以正在以默認大小（300x150），這比video元件的尺寸較小創建它您還沒有指定您的canvas元件的尺寸。因此，當您將video繪製到canvas時，快照正在裁剪。

我更新snapshot方法來設置canvas寬度和高度以匹配video元件的像這樣：

// create snapschot   
    function snapshot() { 

     // set the canvas to the dimensions of the video 
     canvas.width = video.clientWidth; 
     canvas.height = video.clientHeight; 

     ctx.drawImage(video, 0, 0); 

     document.getElementById("huhu").src = canvas.toDataURL('image/webp'); 

    } 

更新撥弄here。