Я использую geUserMedia() для захвата изображения с веб-камеры Intro.Захват видео высокого разрешения/изображения html5
Лучшее разрешение, что я получаю 640 X 480, но у меня есть HD веб-камера, которая записи видео с 1280 X 720, делает снимок 2592 X 1944.
Как я могу фотографировать фотографии с высоким разрешением?
Вот один образец кода. Он не заботится о размере холста:
<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>
Изображения полного разрешения можно получить с помощью API Media Capture. См. Ответы здесь; https://stackoverflow.com/a/36473227/200987 – oligofren