Я пытаюсь сделать снимок с моей веб-камеры с помощью функций navigator.mediaDevices.getUserMedia() и canvas.getContext('2d').drawImage().Событие обратного вызова для getUserMedia()
Когда я делаю это так, он отлично работает:
function init(){
myVideo = document.getElementById("myVideo")
myCanvas = document.getElementById("myCanvas");
videoWidth = myCanvas.width;
videoHeight = myCanvas.height;
startVideoStream();
}
function startVideoStream(){
navigator.mediaDevices.getUserMedia({audio: false, video: { width: videoWidth, height: videoHeight }}).then(function(stream) {
myVideo.src = URL.createObjectURL(stream);
}).catch(function(err) {
console.log("Unable to get video stream: " + err);
});
}
function snapshot(){
myCanvas.getContext('2d').drawImage(myVideo, 0, 0, videoWidth, videoHeight);
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="debug.js"></script>
</head>
<body onload="init()">
<div id="mainContainer">
<video id="myVideo" width="640" height="480" autoplay style="display: inline;"></video>
<canvas id="myCanvas" width="640" height="480" style="display: inline;"></canvas>
<input type="button" id="snapshotButton" value="Snapshot" onclick="snapshot()"/>
</div>
</body>
</html>Дело в том, я не хочу использовать нажатие кнопки для моментального снимка, но взять моментальный снимок, как только загрузится поток камеры. Я пытался вызвать функцию моментального снимка() непосредственно после установки источника видеосигнала:
function init(){
myVideo = document.getElementById("myVideo")
myCanvas = document.getElementById("myCanvas");
videoWidth = myCanvas.width;
videoHeight = myCanvas.height;
startVideoStream();
}
function startVideoStream(){
navigator.mediaDevices.getUserMedia({audio: false, video: { width: videoWidth, height: videoHeight }}).then(function(stream) {
myVideo.src = URL.createObjectURL(stream);
snapshot();
}).catch(function(err) {
console.log("Unable to get video stream: " + err);
});
}
function snapshot(){
myCanvas.getContext('2d').drawImage(myVideo, 0, 0, videoWidth, videoHeight);
}Но это не работает. Мое полотно остается белым. Наверное, это потому, что поток камеры в данный момент не полностью загружен.
Итак, есть ли какие-либо другие события, которые можно использовать для рисования моментального снимка, как только загрузится питание камеры? Или я полностью ошибаюсь?
Заранее благодарен!
Вы можете распечатать myVideo в снимке, пожалуйста? –
Когда я регистрирую myVideo в функции моментального снимка(), он говорит: ' ' – xcess
Возможно, посмотрите на эту проблему: http://stackoverflow.com/questions/12256668/html5- Drawimage-from-video-to-canvas –