Using MediaSource for video with MediaRecord

Question

I'm trying to broadcast a video from my webcam in javascript. I'm using MediaStream to get the video from my webcam, MediaRecorder to record such video in chunks (which would be transmitted to the server), and MediaSource to assemble these chunks and play them seamlessly in a video container called watchVideo on the source below.

It all works perfectly when i'm capturing only video, i.e. constraints = { video: true } ; but if I add audio, the watchVideo doesn't display anything, and the console shows me the following error:

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

This is the relevant part of the code:

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

I came across the question and it actually helped me more than many answers related to this topic. I don't know if you are still interested in the answer but I have tried

mime="video/webm; codecs="vp9,opus"

and it worked fine with audio and video, I hope this answer will help you