Seeking is not working in recorded video with MediaRecorder API

Question

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?

Answer 1

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

Answer 2

get a look at getSeekableBlob at https://recordrtc.org/

this is the code:

function getSeekableBlob(inputBlob, callback) {
    // EBML.js copyrights goes to: https://github.com/legokichi/ts-ebml
    if (typeof EBML === 'undefined') {
        throw new Error('Please link: https://cdn.webrtc-experiment.com/EBML.js');
    }
    var reader = new EBML.Reader();
    var decoder = new EBML.Decoder();
    var tools = EBML.tools;
    var fileReader = new FileReader();
    fileReader.onload = function(e) {
        var ebmlElms = decoder.decode(this.result);
        ebmlElms.forEach(function(element) {
            reader.read(element);
        });
        reader.stop();
        var refinedMetadataBuf = tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
        var body = this.result.slice(reader.metadataSize);
        var newBlob = new Blob([refinedMetadataBuf, body], {
            type: 'video/webm'
        });
        callback(newBlob);
    };
    fileReader.readAsArrayBuffer(inputBlob);
}