Edit Question - KnowledgeHub

Title Body

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>

Tags (comma-separated) Cancel