screenshot canvas getUserMedia Chrome

Question

I want to make a screnshot of the wecam video in Chrome beta. The code only produces a screenshot of a small part of the video, what went wrong?

here the code:

http://jsfiddle.net/N9XKh/

Answer 1

You haven't specified the dimensions of your canvas element so it is being created at the default size (300x150) which is smaller than the dimensions of the video element. As a result, when you draw the video to the canvas the snapshot is being cropped.

I would update the snapshot method to set the canvas width and height to match those of the video element like so:

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

  }

Updated fiddle here.