Firefox: DrawImage (видео) терпит неудачу с NS_ERROR_NOT_AVAILABLE: Компонент не доступен

Question

Попытка вызвать drawImage с video, источником которого является подача веб-камера, кажется, терпят неудачу в Firefox с NS_ERROR_NOT_AVAILABLE: Component is not available.

Я попытался ждать для каждого события активируется тег видео: play, playing, canplay, loadeddata, loadedmetadata, и так далее, и ничего не работает. Кажется, это связано с тем, что эти события срабатывают до того, как поток правильно загружен в элемент <video>.

JSFiddle with error (Вы можете просмотреть ошибки в консоли)

Побочным эффектом является то, что ширина и высота видео также неправильно.

Answer 1

Это bug в Firefox. Самое простое исправление - просто продолжать попытки, пока ошибка не исчезнет, ​​так как никакое событие не срабатывает в правильное время.

См: http://jsfiddle.net/9aT63/25/

В принципе, вы должны обернуть drawImage вызов в Try/поймать блок.

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