Firefox: drawImage (video) fails with NS_ERROR_NOT_AVAILABLE: Component unavailable

Question

Attempting to call drawImage with video from a webcam does not seem to work in Firefox with NS_ERROR_NOT_AVAILABLE: Component is not available .

I try to wait for each event that the video library fires: play , playing , canplay , loadeddata , loadedmetadata , etc., and nothing works. This seems to be due to the fact that these events fire before the stream is correctly loaded into the <video> element.

JSFiddle with an error (you can view the error message in the console)

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

Answer 1

This is a bug in Firefox. The easiest fix is ​​simply to continue trying until the error disappears, since no event is triggered at the right time.

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

Basically, you should 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; } } }