Hello Friends đź‘‹,

Welcome To Infinitbility! ❤️

This tutorial will help you to solve your recorded video seekable issue, and also how we create seekable recorded video using RecordRTC and ts-ebml.

If you are using RecordRTC for screen recording and geting issue seek bar when you play recorded video. Let’s solve this issue.

ts-ebml ( https://www.npmjs.com/package/ts-ebml ) help to RecordRTC recorded make video seekable. let’s install it

npm install ts-ebml --save

below code is help you to make Seekable Blob, add in your code. it’s some like extra steps after done recording video.

import { Decoder, Encoder, tools, Reader } from 'ts-ebml';

const readAsArrayBuffer = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(blob);
    reader.onloadend = () => { resolve(reader.result); };
    reader.onerror = (ev) => { reject(ev.error); };
  });
}

const injectMetadata = blob => {
  const decoder = new Decoder();
  const reader = new Reader();
  reader.logging = false;
  reader.drop_default_duration = false;

  return readAsArrayBuffer(blob)
    .then(buffer => {
      const elms = decoder.decode(buffer);
      elms.forEach((elm) => { reader.read(elm); });
      reader.stop();

      const refinedMetadataBuf =
        tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
      const body = buffer.slice(reader.metadataSize);

      return new Blob([ refinedMetadataBuf, body ], { type: blob.type });
    });
}

After added above code let’s see how we use on get blob from recordRTC.

recorder.stopRecording(function() {

    const blob = recorder.getBlob();

    injectMetadata(blob).then(seekableBlob => {

        // seekableBlob use this blob to show video or want to store anywhere

        video.src = URL.createObjectURL(seekableBlob);

    });
});

Here, i’m assuming recorder veriable is your recordRTC object. After recording done. you will get blob using recorder.getBlob(); and you have to pass in injectMetadata(blob). after that you will get seekable blob. let use it anywhere.

Thanks for Reading…