Browser MediaRecorder API - video controls not working / headers set incorrectly?

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?

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.