I am working on an Electron app where I'm recording video using MediaRecorder API and posting buffer to the server with 5 seconds timeslice.

let recordedChunks = [];
const startBtn = document.getElementById('startBtn');
startBtn.onclick = e => {

  // Create the Media Recorder
  const options = { mimeType: 'video/webm; codecs=vp9' };
  mediaRecorder = new MediaRecorder(stream, options);

  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.onstop = handleStop;

  mediaRecorder.start(timeslice);    // timeslice being 5000

}

// handling available data 
function handleDataAvailable(e) {
  recordedChunks.push(e.data);
  var blob = new Blob(recordedChunks, {
    type: 'video/webm; codecs=vp9'
  });

  var buffer = Buffer.from(await blob.arrayBuffer());

  var data = { video_buffer: buffer};
  
  // for posting buffer to the server
  axios.post(API + '/video/', data, {
     observe: 'body',
     withCredentials: true,
   })
     .then((res) => {
       console.log(`Status: ${res.status}`);
       console.log('Body: ', res.data);
     }).catch((err) => {
       console.error(err);
     });
  
  recordedChunks = [];
}

And on my Express server, I'm handling the above buffer like this

const videoView = (req, res) => {
  const buffer = Buffer.from(req.body.video_buffer);

  const stored_stream = fs.createWriteStream('video.webm', { 'flags': 'a' });
    stored_stream.write(buffer);

    res.end(JSON.stringify({ 'success': true }))
}

The above code is working fine except for some cases that I don't know of.

Sometimes the recorded video on the server is incomplete or the frames freeze in between, and sometimes the video is completely corrupted but the video size is the same as that of the local video (since I'm also saving the same video locally and the local video plays fine every time.).

I'm using Electron@17.1.1 on Windows 10 with a good internet connection.

Any help would be appreciated as I don't have much experience working with JavaScript Streams.