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';23const 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}1112const injectMetadata = blob => {13 const decoder = new Decoder();14 const reader = new Reader();15 reader.logging = false;16 reader.drop_default_duration = false;1718 return readAsArrayBuffer(blob)19 .then(buffer => {20 const elms = decoder.decode(buffer);21 elms.forEach((elm) => { reader.read(elm); });22 reader.stop();2324 const refinedMetadataBuf =25 tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);26 const body = buffer.slice(reader.metadataSize);2728 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() {23 const blob = recorder.getBlob();45 injectMetadata(blob).then(seekableBlob => {67 // seekableBlob use this blob to show video or want to store anywhere89 video.src = URL.createObjectURL(seekableBlob);1011 });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…
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.