I am trying to record 3 movies after eachother, with different instructions showing to the user. The code seems to work fine, the instructions change, the variables I am logging check out fine (chunks recorded, saving recording).

After running the script, I have 3 webm files, all roughly the same size. However, only one is playable. The other two are corrupted. Been tinkering alot in the code, but everything seems to be fine.

Would love if someone could give a hand!

Initialization:

    var constraints = { audio: true,video: {width: {min: 1280}, height: {min: 720}, facingmode: 'user'}};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => { video.srcObject = stream; cameraStream = stream;  startRecording(); });

StartRecording function:

function startRecording() 
{
    if(stage == 1) 
    {
        console.log('Started stage '+stage);
        lineOne.innerHTML = "Kijk recht in de camera";
        line.animate(1);
        fName = 'base'; 
         
        
    }
    if(stage == 2) 
    {
        lineOne.innerHTML = "Kijk over uw linkerschouder";
        line.set(0);
        line.animate(1);
        fName = 'left';
    }
    if(stage == 3) 
    {
        lineOne.innerHTML = "Kijk over uw rechterschouder";
        line.set(0);
        line.animate(1);
        fName = 'right';
    }
    blobs_recorded = [];
    mr = new MediaRecorder(cameraStream);
            
        
    mr.addEventListener('dataavailable', function(e) {
            blobs_recorded.push(e.data);
             
    });
        
        
    
    mr.start(500);
    setTimeout(function(){stopRecording(fName);},5000);     
   
    
    
}

Stop recording / save file / start next movie:

function stopRecording(name) 
{
    recording = null;
    mr.stop();
    console.log("stopped recording");
    console.log(blobs_recorded.length);
    recording = new File(blobs_recorded, name+'.webm', { type: 'video/webm' });
    
    var xhr = new XMLHttpRequest();
    
    
    const upload = new FormData();
    upload.append('file',recording);
    upload.append('fileName',name);
    upload.append('code',code);
    upload.append('renterId',renterId);

    
    xhr.open('POST','upload.php',false);
    
    xhr.send(upload);
    stage = stage+1;
    lineOne.innerHTML = "";
    if(stage < 4) 
    {
        startRecording();
    }
    

}

After running the script, I got a base.webm / left.webm and right.webm, but only base.webm is playable, the other two are corrupted.