Navigate back to the homepage

How to solve RecordRTC recorded video seekable issue

Infinitbility
React
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 ( https://www.npmjs.com/package/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';
2
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 });
10}
11
12const injectMetadata = blob => {
13 const decoder = new Decoder();
14 const reader = new Reader();
15 reader.logging = false;
16 reader.drop_default_duration = false;
17
18 return readAsArrayBuffer(blob)
19 .then(buffer => {
20 const elms = decoder.decode(buffer);
21 elms.forEach((elm) => { reader.read(elm); });
22 reader.stop();
23
24 const refinedMetadataBuf =
25 tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
26 const body = buffer.slice(reader.metadataSize);
27
28 return new Blob([ refinedMetadataBuf, body ], { type: blob.type });
29 });
30}

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

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

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…

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]

Tutorials

React Native

Categories

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–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]