I'm trying to record a webcam video in the browser and save the stream on a node server.

Approach with MediaRecorder API

// CLIENT
// Init MediaRecorder with camera stream 
recorder = new MediaRecorder(...)
// Serialize data and send it to backend
recorder.ondataavailable = (event) => {
   const reader = new FileReader();
   reader.readAsArrayBuffer(event.data);
   reader.onloadend = function (event) {
     socket.emit('message', reader.result);
   };
}

// BACKEND
// Receive data and append it to the file
client.on('message', (data) => { 
  fs.appendFileSync(filePath + fileName + videoFileExtension, data);
  ... 
}

Problem

The first time the video is played in the browser the controls for forward and backwards are not working. Once it has been played, controls are ok.

Assumption

My assumption is that the headers are somehow broken.

Question

Any ideas how to repair the video captured by MediaRecorder and streamed to the NodeJS? Or how to save the data chunks properly in a video file so that controls work?