dimanche 27 avril 2014

Webcam - Capture haute résolution vidéo/image html5 - Stack Overflow


I'm using get user media to capture image from webcam


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


Best resolution that I can get is 640X480 but I have HD webcam that record video with 1280 X 720 take a picture 2592 X 1944


So how can i capture HighRes photos?


Here is one sample of code. As you can see 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>



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


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




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



I'm using get user media to capture image from webcam


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


Best resolution that I can get is 640X480 but I have HD webcam that record video with 1280 X 720 take a picture 2592 X 1944


So how can i capture HighRes photos?


Here is one sample of code. As you can see 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>


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


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



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


Related Posts:

0 commentaires:

Enregistrer un commentaire