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:
/
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/N9XKh/
Share Improve this question edited Aug 1, 2012 at 17:52 net.uk.sweet 12.4k3 gold badges26 silver badges42 bronze badges asked Aug 1, 2012 at 15:09 user1477955user1477955 1,6708 gold badges24 silver badges37 bronze badges1 Answer
Reset to default 8You 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.