Screenshot canvas getUserMedia Chrome

Question

I want to take screenshots of a wecam video in Chrome beta. Encodes only a screenshot of a small part of the video, what went wrong?

here is the code:

http://jsfiddle.net/N9XKh/

Answer 1

You did not specify the dimensions of your canvas , so it is created with the default size (300x150), which is smaller than the size of the video element. As a result, when you draw a video to canvas picture is reduced.

I would update the snapshot method to set the width and height of the canvas so that they match the video elements:

  // 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 .