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>

Answer 1

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

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