Firefox：drawImage（视频）因NS_ERROR_NOT_AVAILABLE而失败：组件不可用 [英] Firefox: drawImage(video) fails with NS_ERROR_NOT_AVAILABLE: Component is not available

问题描述

尝试使用视频调用 drawImage ，其来源是网络摄像头Feed，似乎在Firefox中失败了
NS_ERROR_NOT_AVAILABLE：组件不可用。

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.

我试图等待视频标签触发的每个事件：播放，播放，播放， loadeddata ， loadedmetadata 等等，没有任何效果。这似乎是因为这些事件在将流正确加载到< video> 元素之前触发。

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 （您可以在控制台中查看错误）

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.

推荐答案

这是 Firefox中的错误。最简单的解决方法就是继续尝试直到错误消失，因为没有事件在正确的时间触发。

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.

参见： http://jsfiddle.net/9aT63/25/

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

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

这篇关于Firefox：drawImage（视频）因NS_ERROR_NOT_AVAILABLE而失败：组件不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！