Firefox：drawImage（视频）失败并显示 NS_ERROR_NOT_AVAILABLE：组件不可用

尝试打电话drawImage with a video其来源是网络摄像头源似乎在 Firefox 中失败了NS_ERROR_NOT_AVAILABLE: Component is not available.

我尝试等待视频标签触发的每个事件：play, playing, canplay, loadeddata, loadedmetadata等等，但没有任何作用。这似乎是因为这些事件在流正确加载到之前触发<video>元素。

JSFiddle 出现错误 http://jsfiddle.net/qPce4/（可以在控制台查看错误）

副作用是视频的宽度和高度也不正确。

这是一个bug https://bugzilla.mozilla.org/show_bug.cgi?id=879717在火狐浏览器中。最简单的解决方法是继续尝试，直到错误消失，因为没有事件在正确的时间触发。

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

基本上，你必须包裹drawImage在 try/catch 块中调用。

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;
    }
  }
}