Capture high resolution video/image html5

Question

I use geUserMedia() to capture image from webcam Intro.

Best resolution that I get is 640 X 480, but I have HD webcam that records video with 1280 X 720, takes a picture 2592 X 1944.

How can I capture High Resolution photos?

Here is one sample of code. It doesn't care about canvas size:

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="1280" height="720" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">
    var video = document.querySelector("#vid");
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var onCameraFail = function (e) {
        console.log('Camera did not work.', e);
    };

    function snapshot() {
        if (localMediaStream) {
            ctx.drawImage(video, 0, 0);
        }
    }

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true}, function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    }, onCameraFail);

</script>

You can get full resolution pictures by using the Media Capture API. See the answers here; https://stackoverflow.com/a/36473227/200987 — oligofren, Nov 06 '17 at 13:23

score 12 · Answer 1 · answered Nov 18 '13 at 21:48

12

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

=> Setting media constraints (resolution, height, width)

answered Nov 18 '13 at 21:48

Roman

133
2
6

It's something new (wasn't there before). I'll take a look. Thank you! – Konstantin Dec 01 '13 at 22:14

score 4 · Answer 2 · answered Apr 11 '13 at 19:14

4

As far as I know WebRTC is currently limited to 640x480 no matter what camera you have. Hopefully this will change soon.

answered Apr 11 '13 at 19:14

Yoni Baciu

2,667
1
22
28

score 0 · Answer 3 · answered Oct 22 '14 at 06:27

For anyone else like me who finds themselves here, there's a useful update at http://webrtchacks.com/video-constraints-2/.

Looking at the original question, note that as far as I understand taking a still photo using WebRTC is actually extracting a still frame from the video feed, so you will always be constrained by the video resolution of the device, even if it is capable of capturing higher resolution stills itself.

score 0 · Answer 4 · answered Jul 06 '21 at 03:30

I used the below constraints to set a range of resolutions but the snapshot seems to be tied to the video size

var constraints = {
      audio: {deviceId: undefined},
      video: {
           deviceId: vid ? {exact: vid} : undefined
         , width: { min: 1280, max: 1560 }
         , height: { min: 720, max: 1440 }
      }
   };

navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError)

Capture high resolution video/image html5

4 Answers4

Linked