Использование 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"

и он отлично работал с аудио и видео, я надеюсь, что этот ответ поможет вам