將 MediaSource 用於帶有 MediaRecord 的視頻

Question

我正在嘗試從 javascript 中的網絡攝像頭播放視頻。 我正在使用MediaStream從我的網絡攝像頭獲取視頻，使用MediaRecorder以塊的形式錄制此類視頻（將傳輸到服務器），並使用MediaSource組裝這些塊並在名為watchVideo的視頻容器中無縫播放它們在下面的源代碼中.

當我只捕獲視頻時，這一切都完美無缺，即constraints = { video: true }; 但是如果我添加音頻， watchVideo不會顯示任何內容，並且控制台會顯示以下錯誤：

Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

這是代碼的相關部分：

var mime = 'video/webm; codecs=vp8';


if (navigator.mediaDevices) {
    constraints = { video: true, audio: true };
    navigator.mediaDevices.getUserMedia(constraints)
    .then(handleUserMedia)
    .catch( err => {
        console.log("ERROR: " + err);
    }) 
}

function handleUserMedia(stream) {
    source = new MediaSource();
    watchVideo.src = window.URL.createObjectURL(source);
    source.onsourceopen = () => {
        buffer = source.addSourceBuffer(mime);
    };

    var options = { mimeType: mime }; 
    mediaRecorder = new MediaRecorder(stream, options);
    mediaRecorder.ondataavailable = handleDataAvailable;
}

function handleDataAvailable(evt) {
    var filereader = new FileReader();
    filereader.onload = () => {
        buffer.appendBuffer(filereader.result );
    };
    filereader.readAsArrayBuffer(evt.data);
}

Answer 1

我遇到了這個問題，它實際上對我的幫助超過了與該主題相關的許多答案我不知道您是否仍然對答案感興趣，但我嘗試了 mime="video/webm; codecs="vp9,opus" 和它適用於音頻和視頻我希望這個答案會有所幫助