javascript - 将 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);
}