Unable to play the video stream from ondataavailable callback

Question

I am trying to continuously play the bytes received from the RecordRTC ondataavailable callback using MediaSource

However it throws "Uncaught (in promise) NotSupportedError: The element has no supported sources." from the video html element

I have the following code, what could be wrong? Does it look correct how I convert blob to arrayBuffer and feed into the buffer?

const videoElement = document.getElementById('video');
const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', handleSourceOpen);

function handleSourceOpen() {
    videoBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"'); // Ensure the MIME type matches your video format
    // When the buffer is updated and there's more data to append, append it
    videoBuffer.addEventListener('updateend', appendNextBuffer);
}


navigator.getUserMedia(
    {
        video: true
    },
    function (stream) {
        recordVideo = RecordRTC(stream, {
            type: "video",
            mimeType: "video/webm",

            recorderType: RecordRTC.MediaStreamRecorder,

            videoBitsPerSecond: 128000,

            timeSlice: 500,

            frameInterval: 30,
            
            ondataavailable: function (blob) {
                
                // main pushing video data to my array
                accumulatedVideoBlobs.push(blob)

                if (!videoElement.paused) {
                    return;
                }

                videoElement.play()
                // At the beginning, call the function to feed the blob into the buffer
                appendNextBuffer()
            },
        });


        recordVideo.startRecording();
    },
    function (error) {
        console.error(JSON.stringify(error));
    }
);


function appendNextBuffer() {
    if (videoBuffer.updating || accumulatedVideoBlobs.length === 0) {
        shouldAppendImmediately = true;
        return;
    }
    
    const nextBlob = accumulatedVideoBlobs.shift();
    blobToArrayBuffer(nextBlob, function(arrayBuffer) {
        videoBuffer.appendBuffer(new Uint8Array(arrayBuffer));
    });
}

function blobToArrayBuffer(blob, callback) {
    const reader = new FileReader();
    reader.onload = function(evt) {
        callback(evt.target.result);
    };
    reader.readAsArrayBuffer(blob);
}

I ran the code in Electron.js, so I have verified the video format is supported through

if (MediaSource.isTypeSupported('video/webm; codecs="vp8"')) {
    console.log("Supported");
} else {
    console.log("Not Supported");
}

What could be wrong?