javascript - スクリーンショット キャンバス getUserMedia Chrome

Question

Chrome ベータ版の wecam ビデオのスクレンショットを作成したいと考えています。このコードは、ビデオのごく一部のスクリーンショットしか生成しません。何が問題なのですか?

ここにコード：

http://jsfiddle.net/N9XKh/

Answer 1

要素の寸法を指定していないcanvasため、要素の寸法よりも小さいデフォルトサイズ（300x150）で作成されていますvideo。その結果、をスナップショットに描画するvideoとcanvas、スナップショットがトリミングされます。

次のように、要素の幅と高さに一致するように幅と高さsnapshotを設定するようにメソッドを更新します。canvasvideo

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

  }

ここでフィドルを更新しました。