Media Resource could not be decoded error when playing a blob object

I'm trying to record and play my webcam every 400 milliseconds. However, I'm encountering a problem. The browser successfully plays the first blob/400 milliseconds, but after that, it gives me this error:

Media resource blob:null/5cbff14c-2b4c-40fb-8a6b-3a4a62cc4abe could not be decoded,
error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR (0x806e0006)

Also, here is my code:

async function recordAudio()
{
    let mediaDevices = navigator.mediaDevices;
    let MediaStream = await mediaDevices.getUserMedia({audio: true, video: true});
    let video = document.querySelector('video');
    let chunks = [];
    let mediaRecorder = new MediaRecorder(MediaStream);
    mediaRecorder.start(400);
    mediaRecorder.ondataavailable = (e) => 
    {
        playStream([e.data])
        console.log("asdf");
    }
    playStream = (data) => 
    {
        console.log(data);
        blob = new Blob(data, {type: "video/webm"});
        video.src = URL.createObjectURL(blob);
        video.autoplay = true;
    }
}

Any help would be much appreciated.