Firefox: drawImage (video) không thành công với NS_ERROR_NOT_AVAILABLE: Thành phần không khả dụng

Question

Cố gắng gọi drawImage với một video nguồn là nguồn cấp dữ liệu webcam có vẻ không thành công trong Firefox với NS_ERROR_NOT_AVAILABLE: Component is not available.

tôi đã cố gắng chờ đợi cho mỗi sự kiện cháy thẻ video: play, playing, canplay, loadeddata, loadedmetadata, và như vậy, và không có gì hoạt động. Điều này có vẻ là do các sự kiện này đang kích hoạt trước khi luồng được tải đúng vào phần tử <video>.

JSFiddle with error (Bạn có thể xem các lỗi trong giao diện điều khiển)

Một tác dụng phụ là chiều rộng và chiều cao của video cũng không đúng.

Answer 1

Đây là bug trong Firefox. Cách khắc phục dễ nhất là chỉ tiếp tục cố gắng cho đến khi lỗi biến mất, vì không có sự kiện nào xảy ra vào đúng thời điểm.

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

Về cơ bản, bạn phải quấn gọi drawImage trong một khối 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; 
    } 
    } 
}