Ich versuche, einen Schnappschuss von meiner Webcam mit den navigator.mediaDevices.getUserMedia() und canvas.getContext('2d').drawImage() Funktionen zu machen.Rückruf-Ereignis für getUserMedia()
Wenn ich es so machen, es funktioniert perfekt:
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>Die Sache ist, ich will nicht auf einen Knopf klicken für die Aufnahme des Snapshots verwenden, aber nehmen die Snapshot, sobald der Kamerastream geladen ist. Ich habe versucht, den Schnappschuss() Funktion direkt aufrufen, nachdem die Videoquelle einstellen:
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);
}Aber es funktioniert nicht. Meine Leinwand bleibt weiß. Ich nehme an, dass der Kamerastrom zu diesem Zeitpunkt nicht vollständig geladen ist.
Gibt es ein anderes Ereignis, das ausgelöst wird, das ich zum Zeichnen des Snapshots verwenden könnte, sobald der Kamera-Feed geladen ist? Oder bin ich total auf dem Holzweg?
Vielen Dank im Voraus!
können Sie myVideo in Snapshot bitte drucken? –
Wenn ich myVideo in der Funktion snapshot() logge, heißt es: ' ' – xcess
vielleicht ein Blick auf dieses Problem wird helfen: http://StackOverflow.com/Questions/12256668/html5- drawimage-from-video-to-canvas –