Navigate back to the homepage

How to solve RecordRTC recorded video seekable issue

August 21st, 2021 · 1 min read
How to solve RecordRTC recorded video seekable issue

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 ( ) help to RecordRTC recorded make video seekable. let’s install it

1npm 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.

1import { Decoder, Encoder, tools, Reader } from 'ts-ebml';
3const readAsArrayBuffer = (blob) => {
4 return new Promise((resolve, reject) => {
5 const reader = new FileReader();
6 reader.readAsArrayBuffer(blob);
7 reader.onloadend = () => { resolve(reader.result); };
8 reader.onerror = (ev) => { reject(ev.error); };
9 });
12const injectMetadata = blob => {
13 const decoder = new Decoder();
14 const reader = new Reader();
15 reader.logging = false;
16 reader.drop_default_duration = false;
18 return readAsArrayBuffer(blob)
19 .then(buffer => {
20 const elms = decoder.decode(buffer);
21 elms.forEach((elm) => {; });
22 reader.stop();
24 const refinedMetadataBuf =
25 tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
26 const body = buffer.slice(reader.metadataSize);
28 return new Blob([ refinedMetadataBuf, body ], { type: blob.type });
29 });

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

1recorder.stopRecording(function() {
3 const blob = recorder.getBlob();
5 injectMetadata(blob).then(seekableBlob => {
7 // seekableBlob use this blob to show video or want to store anywhere
9 video.src = URL.createObjectURL(seekableBlob);
11 });

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…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide



More articles from Infinitbility

how to set keyboard type in react native

how to set keyboard type in react native

React Native keyboardType example

August 20th, 2021 · 1 min read
How to get data from json object in react native

How to get data from json object in react native

React Native JSON and Array usages example

August 18th, 2021 · 1 min read
© 2020–2022 Infinitbility
Link to $ to $ to $ to $ to $ to $mailto:[email protected]