Capture high resolution video/image html5

问题

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>

回答1:

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

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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/15849724/capture-high-resolution-video-image-html5

标签

html

webcam

getusermedia