Ist es möglich, zu erkennen, wann die Kamera mit getUserMedia betriebsbereit ist?

Question

Ich benutze webcam.js erfolgreich mit einer eckigen App, damit Benutzer ein Bild von sich selbst aufnehmen können. Allerdings habe ich ein Problem, bei dem einige Benutzer nichts hochladen - alle weißen oder alle schwarzen Fotos. Ich vermute, dass einige Kameras langsamer als andere starten, was es Benutzern ermöglicht, Bilder von sich selbst zu machen, die leer sind, bevor die Kamera wirklich funktioniert.

Ich möchte in der Lage zu erkennen, wenn die Kamera tatsächlich eingeschaltet ist und streaming, so dass ich warten konnte, bis dann die Take Photo-Schaltfläche verfügbar ist. Normalerweise wird das Videoelement eine halbe Sekunde lang leer gelassen, wenn die Kamera eingeschaltet wird oder die Quelle geladen wird oder was auch immer passiert. Auf meinem Computer kann ich, wenn ich mich schnell bewege, nur knapp auf die Take-Bild-Taste klicken, bevor der Videodampf geladen wird, und es wird ein Bild aufgenommen, das ganz schwarz angezeigt wird. Ich schätze auf einigen Computern, dass die halbe Sekunde länger sein könnte, möglicherweise genug, so dass Leute versuchen, Bilder zu machen, bevor sie sich selbst auf dem Bildschirm sehen.

Wir versuchen auch, dies mit etwas besserem UX zu lösen, aber es wäre großartig, wenn es eine Möglichkeit gäbe, Leute daran zu hindern, Bilder zu machen, bevor die Kamera fertig ist. Bisher konnte ich noch nichts über die Erkennung der Kamera feststellen, habe aber über die Möglichkeit nachgedacht, die dominierende Farbe eines aufgenommenen Bildes zu erkennen, und wenn alles schwarz oder weiß ist, muss der Benutzer das Foto erneut aufnehmen mit etwas wie diesem: Get average color of image via Javascript. Natürlich ist es nicht ideal, wenn der Benutzer diese Schleife durchläuft, wenn wir darauf warten könnten, den Take-Picture-Button zu zeigen.

Vielen Dank im Voraus!

Answer 1

Mit video.onplaying für mich gearbeitet (https fiddle für Chrome):

var snap =() => navigator.mediaDevices.getUserMedia({ video: true }) 
 
    .then(stream => { 
 
    video.srcObject = stream; 
 
    return new Promise(resolve => video.onplaying = resolve); 
 
    }) 
 
    .then(() => canvas.getContext('2d').drawImage(video, 0, 0, 160, 120)) 
 
    .catch(log); 
 

 
var log = msg => div.innerHTML += "<br>" + msg;

<button onclick="snap()">Snap!</button><div id="div"></div> 
 
<video id="video" width="160" height="120" autoplay></video> 
 
<canvas id="canvas" width="160" height="120"></canvas> 
 
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>