3

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?

Lyubomir
  • 19,615
  • 6
  • 55
  • 69
  • Hi! This is a well known bug in Chrome; the duration of the recorded media isn't added to the headers of the final file. Sadly, this bug is currently marked as WontFix by the Chromium team. However, there are a couple of workarounds: - On the backend, using ffmpeg to fix the headers: ffmpeg -i old.webm output.webm - On the frontend, the workaround on [this answer](https://stackoverflow.com/questions/38443084/how-can-i-add-predefined-length-to-audio-recorded-from-mediarecorder-in-chrome/39971175#39971175) or using the package [ts-ebml](https://www.npmjs.com/package/ts-ebml) – ACBM Mar 07 '19 at 23:10
  • Possible duplicate of [How can I add predefined length to audio recorded from MediaRecorder in Chrome?](https://stackoverflow.com/questions/38443084/how-can-i-add-predefined-length-to-audio-recorded-from-mediarecorder-in-chrome) – ACBM Mar 07 '19 at 23:11

1 Answers1

0

Here are two possible solutions

  • Run ffmpeg -fflags +genpts -i video.webm -r 24 mynew.mp4 to convert from webm to mp4, this repairs the headers. You can then convert back to webm in a similar fashion.

  • Hide the video - manually set <video /> tag's duration to the actual duration - Chrome will jump to the end and repairs headers, controls will now work. Show the video and replay (with already corrected headers and controls).

I went with the first approach - convert to mp4.

Lyubomir
  • 19,615
  • 6
  • 55
  • 69