Firefox: drawImage (Video) scheitert mit NS_ERROR_NOT_AVAILABLE: Komponente ist nicht verfügbar

Question

Versuch drawImage mit einem video deren Quelle zu nennen, ist ein Webcam-Feed scheint mit einem NS_ERROR_NOT_AVAILABLE: Component is not available in Firefox zum Scheitern verurteilt.

Ich habe Feuer für jedes Ereignis des Video-Tages zu warten, versucht: play, playing, canplay, loadeddata, loadedmetadata, und so weiter, und nichts funktioniert. Dies liegt daran, dass diese Ereignisse ausgelöst werden, bevor der Stream ordnungsgemäß in das Elementgeladen wird.

JSFiddle with error (Sie können den Fehler in der Konsole anzeigen)

Ein Nebeneffekt ist, dass die Breite und die Höhe des Videos auch falsch ist.

Answer 1

Dies ist ein bug in Firefox. Die einfachste Lösung besteht darin, einfach weiter zu versuchen, bis der Fehler verschwindet, da kein Ereignis zur richtigen Zeit ausgelöst wird.

See: http://jsfiddle.net/9aT63/25/

Grundsätzlich haben Sie den drawImage Anruf in einem try/catch-Block wickeln.

function drawVideo() { 
    try { 
    $vidCanvasCtx.drawImage($vid, 0, 0, $vidCanvas.width, $vidCanvas.height); 
    ... 
    } catch (e) { 
    if (e.name == "NS_ERROR_NOT_AVAILABLE") { 
     // Wait a bit before trying again; you may wish to change the 
     // length of this delay. 
     setTimeout(drawVideo, 100); 
    } else { 
     throw e; 
    } 
    } 
}