How to get original image from webcam in js?

Question

How can I get the webcam video on the left to be in the same format as the right where the image is drawn?

Had this problem for a while and can't figure it out!

here's the code:

document.getElementById('capture').addEventListener('click', function() {
    var w = video.videoWidth;
    var h = video.videoHeight;
    canvas.width = w;
    canvas.height = h;
    context.drawImage(video,0,0,w,h);
    canvas.style.display='block';

});

Answer 1

You are using the size of your video html element instead of the size of the stream. That's why the photo is stretched. You should use the size of the video track.

If you specified it while calling MediaDevices.getUserMedia use those values. Otherwise retrieve them from the video track ( MediaStreamTrack.getSettings() )

Answer 2

video.videoWidth is not the real width of video so you get different ratio on new canvas. Try this:

var videoRatio = video.videoWidth / video.videoHeight;
var width = video.offsetWidth, height = video.offsetHeight;
var elementRatio = width/height;
if(elementRatio > videoRatio) width = height * videoRatio;
else height = width / videoRatio;

canvas.width = width;
canvas.height = height;
context.drawImage(video,0,0,width,height);
canvas.style.display='block';