DEV Community

Lets create a screen recorder with JS

Shuvo on October 21, 2021

OBS studio is cool but lets create our very own screen recorder using JavaScript. And guess what? Its not limited to just recording the browser scr...

Read full post

Branko Stancevic • Oct 23 '21 • Edited

Great article! Keep it up! However, I have question...

Why you need to create chunks when e.data in dataavailable is already a blob?

Isn't that part kinda unnecessary?

Couldn't we just use it like this?

  let blob = null;

  mediaRecorder.addEventListener('dataavailable', (e) => {
    blob = e.data;
  })

Shuvo • Oct 23 '21

as you keep recording the dataavailable event will run multiple time. So basically instead you giving you the entire video once recording is done it will give you data in small parts as the video is being recorded.

Branko Stancevic • Oct 23 '21

Ok cool! Thank you

Amran AL Ketara • Oct 21 '21

YOU ARE AWESOME MAN!!
Do you have a YouTube channel, blog or something like that?

Shuvo • Oct 21 '21

Many many Thank.
Yes, I have a YouTube channel.
But I am introvert so I struggle to talk which is why my videos are not that good. But I'm trying to improve
youtu.be/mD_QQvJYQAI

Usman Khalil • Oct 24 '21

Very clear explanation. Loved it

Shuvo • Oct 24 '21

Many many Thanks

Usman Khalil • Oct 24 '21

The minute I saw the tutorial, the next thing I knew was that I'm gonna make this thing my self. Created in React and deployed. Thank you once again.

Shuvo • Oct 24 '21

Damn thats really great.
If you want something way more challenging you can try this

Usman Khalil • Oct 24 '21

Damn. You just earned a follower and my respect. Keep those challenges coming coach.

Shuvo • Oct 24 '21

Thanks a lot.
I also followed you back.

Jose Antonio Felix • Oct 22 '21

It's pretty cool !!! thank you man

Shuvo • Oct 23 '21

You're most welcome

Cooper4111 • Aug 23 '22 • Edited

TL;DR: your solution generates broken files for chrome.

There's an issue with Chrome, that leads to losing metadata on video files created using MediaRecorder. The file is playable, yet, it has no duration so you can't scroll it and it's always 00:00 / 00:00. You've added
let video = document.querySelector("video") video.src = url
Which is meaningless, unless you're trying to implement this workaround. But it requires changing the currentTime and doesn't actually work for saved file, only for <video> tag in document.

I'm not being toxic about your topic, just struggling myself to solve this. Any ideas are welcome.

pranavps020 • Mar 7 '22

Great Article mate , getDisplayMedia isn't supported in android& ios. Is thre any work around ?. All I'm looking for is to record a webpage as a video don't have to record out side browser like getDisplayMedia.

andiduferense • Feb 23 '22 • Edited

Why bother when you can use the usual programs like this and not bother. I just like such programs for their simplicity and convenience. Even a child can relax with them.

Prabhu • Oct 25 '21

Nice

Shuvo • Oct 25 '21

Thank you

Tobias Nickel • Oct 22 '21

awesome, this is a great extension to all the zoom clone tutorials 👍

Shuvo • Oct 22 '21

Glad you liked it

Ashish Bailkeri • Oct 21 '21

Nice tutorial!

Shuvo • Oct 21 '21

I'm really glad that you liked it.

Iacovos Constantinou • Oct 22 '21

That's really great!!

Shuvo • Oct 23 '21

Glad you found this helpful

HonzaLed • Oct 22 '21

Nice tutorial, i was wondering how to do this, your step-by-step tutorial is awesome

Shuvo • Oct 22 '21

I am really glad that you liked it

mustafatoprakk • Oct 27 '21

Thank you buddy. İt's very beautiful

Shuvo • Oct 27 '21

Many Thanks I am glad you liked it

Roshan kumar • Oct 22 '21

Really awesome tutorial !

Shuvo • Oct 22 '21

I am glad you liked it.

Amin • Aug 10 '22

Your script is just awesome. This script only record video. Can you please add audio option when recording screen.

Balakrishnan Subramaniyan • Dec 2 '21 • Edited

This is a cool tutorial. Liked a lot.
Could you please include an Internal Audio record method with this?

Ryan Smith • Jun 5 '22

Did you repost this to Medium?

javascript.plainenglish.io/lets-us...

yosi • Oct 27 '21

Great post. Thank you!

Shuvo • Oct 28 '21

Glad you liked it

sadiul hakim • Oct 25 '21

wow

nicenine98 • Oct 24 '21

hello
I am web developer. I have to build new site.
but I have to capture image from stream-video when user click capture button.
Also I have to extract from that images.
Help me.

Shuvo • Oct 24 '21

stackoverflow.com/questions/259705...

d1_codes • Oct 23 '21

Great Tutorial here.. Please i cant fin where the recorded files are been saved.

Shuvo • Oct 23 '21

In your downloads folders.

Mena Nasser • Oct 22 '21 • Edited

Very nice article, thank you.

Shuvo • Oct 22 '21

Yes
developers.google.com/web/fundamen...
But its hard to to both at once

qq449245884 • Nov 4 '21

Dear Shupvo，may I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.