11

Trying to call drawImage with a video whose source is a webcam feed seems to fail in Firefox with an NS_ERROR_NOT_AVAILABLE: Component is not available.

I have tried to wait for every event the video tag fires: play, playing, canplay, loadeddata, loadedmetadata, and so on, and nothing works. This seems to be because these events are firing before the stream is properly loaded into the <video> element.

JSFiddle with error (You can view the error in the console)

A side effect is that the width and height of the video is also incorrect.

Achal Dave
  • 4,079
  • 3
  • 26
  • 32

1 Answers1

34

This is a bug in Firefox. The easiest fix is to simply keep trying until the error goes away, since no event fires at the correct time.

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

Basically, you have to wrap the drawImage call in a try/catch block.

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;
    }
  }
}
Achal Dave
  • 4,079
  • 3
  • 26
  • 32
  • thanks, sadly I have to wait for a few more hours before I can – Achal Dave Sep 04 '13 at 00:15
  • I am using firefox v33.0 and they still haven't solved this bug. Also, using the try catch block makes it painfully slow on firefox. – shash7 Oct 28 '14 at 12:31
  • this didn't work for me, using an image instead of a video, and kept looping infinitely. – Ray_Poly Jul 21 '15 at 11:32
  • While the bug linked in this answer is closed, this still appears to be a thing according to [another bugzilla entry](https://bugzilla.mozilla.org/show_bug.cgi?id=1481406#c2) that was previously posted as an answer by another user. – geisterfurz007 Nov 29 '19 at 15:56