CODEWITHSUNDEEP
javascripthtml
Kyle
Kyle

Reputation: 2379

Javascript Camera Snapshot stretched too large

I am trying to take a snapshot from someone's webcam through javascript. The code works except the resultant image is stretched way too much to me readable.

I've messed around with the: ctx.drawImage(video, 0, 0);line

I've tried ctx.drawImage(video, 0, 0,1280,720); with no difference

I've tried ctx.drawImage(video, 0, 0,100,100); with major difference. It made the whole image appear but way too small for the eye.

Code:

<html>
<head>
<video autoplay></video>
<img src="" width=1280, height=720>
<canvas style="display:none;"></canvas>
<script>
  var errorCallback = function(e) {
    console.log('Reeeejected!', e);
    video.src = 'failure.mp4'; // fallback.
  };

navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
var hdConstraints = {
  video: {
    mandatory: {
      minWidth: 1280,
      minHeight: 720
    }
  }
};

function snapshot() {
    if (localMediaStream) {
      ctx.drawImage(video, 0, 0);
      // "image/webp" works in Chrome.
      // Other browsers will fall back to image/png.
      document.querySelector('img').src = canvas.toDataURL('image/webp');
    }
  }

 function success(stream) {
     video.src = window.URL.createObjectURL(stream);
    localMediaStream = stream;
 }
video.addEventListener('click', snapshot, false);
navigator.getUserMedia(hdConstraints, success,errorCallback);
</script>
</head>
</html>

Result:

Video:

example input

Image Output:

example output

Upvotes: 0

Views: 1431

Answers (1)

Kyle
Kyle

Reputation: 2379

So in conjunction with @Loktar's comment, I determined that the secret was to set the canvas size in the html like so:

<canvas style="display:none;" width=1280 height=720></canvas>

This allows for a full screen (aspect correct) capture.

Hope this helps someone else!

Upvotes: 1

Related Questions