CODEWITHSUNDEEP
javascripthtmlgoogle-chromecanvas
user1477955
user1477955

Reputation: 1670

screenshot canvas getUserMedia Chrome

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/

Upvotes: 4

Views: 2941

Answers (1)

net.uk.sweet
net.uk.sweet

Reputation: 12431

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.

Upvotes: 8

Related Questions