4

I'm trying to build a screen recording with MediaRecorder API.

As Suggestive MediaRecorded Approach

var chunks = [];
var recorder = new MediaRecorder(stream);

recorder.streams = [stream];

recorder.ondataavailable = function(e) {
    chunks.push(e.data);
};

recorder.onstop = function(){
      var blob = new Blob(chunks, {type: "video/webm"});
      chunks = [];

      var mimeType = 'video/webm';
      var fileExtension = 'webm';

      var file = new File([blob ? blob : ''], getFileName(fileExtension), {
          type: mimeType
      });
};

Using this approach recording is working fine, but recorded video seeking is not working.

I had done some searching on web regarding this problem, I came across that video header doesn't containing duration.

On printing file object on console it contains following properties,

lastModified : 1527592713006
lastModifiedDate : Tue May 29 2018 16:48:33 GMT+0530 (India Standard Time) 
name : "Recording-May,29 2018 4:48:33 PM.webm"
size : 1971220
type : "video/webm"
webkitRelativePath : ""

One can see file object doesn;t contained duration property.

Can anyone suggest any javascript library available which can repairs video header on client side only while preparing the video file?

Akshay Rathore
  • 699
  • 1
  • 7
  • 21
  • As per [this bug report](https://bugs.chromium.org/p/chromium/issues/detail?id=642012) the length info will be missing in Chrome. Firefox [seems to have solved the problem](https://bugzilla.mozilla.org/show_bug.cgi?id=969290). Can you confirm you're only having the problem on Chrome? – Octavian Naicu Jul 13 '18 at 12:15

1 Answers1

4

This is a well known bug in Chrome. Basically, 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 or using the package ts-ebml

ACBM
  • 567
  • 1
  • 9
  • 26