I am using React And Electron to write a recorded video using MediaRecorder to disk.

The video file is being generated successfully, however only the first blob of the video is playable. The video file size seems to be increasing if I leave it recording for more time so I think the blobs are being written to the file but in a corrupted way. By the way I'm following this approach unsuccessfully tho.

Front-end code:

const blob_reader_cam = new FileReader();

const handleDataAvailable = (e) => {
  if (!e.data || !e.data.size > 0) return;
  if (blob_reader_cam.readyState !== 1)
    blob_reader_cam.readAsArrayBuffer(e.data);
  else recordedCameraChunks.push(e.data);
};

blob_reader_cam.addEventListener("load", (ev) => {
  window.electron.api.writeCameraFile(ev.currentTarget.result);
  if (recordedCameraChunks.length) {
    ev.currentTarget.readAsArrayBuffer(recordedCameraChunks.shift());
  }
});

const startCameraRecording = () => {
  if (!cameraStream) return;
  const options = {
    mimeType: "video/webm; codecs=vp9",
    videoBitsPerSecond: 2500000,
  };
  mediaRecorder = new MediaRecorder(cameraStream, options);

  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.onstop = handleStop;
  mediaRecorder.start(1000);
};

Electron js code:

const storage_stream_cam = require("fs").createWriteStream(PATH_CAM);

writeCameraFile(data) {
      storage_stream_cam.write(Buffer.from(data));
}