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

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

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


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.


My assumption is that the headers are somehow broken.


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?



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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.