使用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);
}