Geek Answers Handbook

Capture high definition video / html5

I am using geUserMedia () to capture an image from an Intro webcam.

The best resolution I get is 640 X 480 , but I have an HD webcam, record video from 1280 X 720 , take a picture 2592 X 1944 .

How can I capture high resolution photos?

Here is one sample code. He 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>
+6
source share
3 answers

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

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

+6
source

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

+4
source

For anyone like me that ended up here, there is a useful update at http://webrtchacks.com/video-constraints-2/ .

If you look at the original question, please note that, as far as I understand, taking photos using WebRTC actually extracts a still frame from the video stream, so you will always be limited by the video resolution on the device, even if it is capable of capturing higher resolution images.

+1
source

More articles:


All Articles