DEV Community

Cover image for Lets create a screen recorder with JS

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...
Collapse
 
landb profile image
Branko Stancevic • 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;
  })
Enter fullscreen mode Exit fullscreen mode
Collapse
 
0shuvo0 profile image
Shuvo

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.

Collapse
 
landb profile image
Branko Stancevic

Ok cool! Thank you

Collapse
 
amk profile image
Amran AL Ketara

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

Collapse
 
0shuvo0 profile image
Shuvo

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

Collapse
 
monfernape profile image
Usman Khalil

Very clear explanation. Loved it

Collapse
 
0shuvo0 profile image
Shuvo

Many many Thanks

Collapse
 
monfernape profile image
Usman Khalil

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.

Thread Thread
 
0shuvo0 profile image
Shuvo

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

Thread Thread
 
monfernape profile image
Usman Khalil

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

Thread Thread
 
0shuvo0 profile image
Shuvo

Thanks a lot.
I also followed you back.

Collapse
 
jafb321 profile image
Jose Antonio Felix

It's pretty cool !!! thank you man

Collapse
 
0shuvo0 profile image
Shuvo

You're most welcome

Collapse
 
cooper4111 profile image
Cooper4111 • 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.

Collapse
 
pranavps020 profile image
pranavps020

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.

Collapse
 
andiduferense profile image
andiduferense • 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.

Collapse
 
prabhukadode profile image
Prabhu

Nice

Collapse
 
0shuvo0 profile image
Shuvo

Thank you

Collapse
 
bias profile image
Tobias Nickel

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

Collapse
 
0shuvo0 profile image
Shuvo

Glad you liked it

Collapse
 
aboss123 profile image
Ashish Bailkeri

Nice tutorial!

Collapse
 
0shuvo0 profile image
Shuvo

I'm really glad that you liked it.

Collapse
 
iacons profile image
Iacovos Constantinou

That's really great!!

Collapse
 
0shuvo0 profile image
Shuvo

Glad you found this helpful

Collapse
 
honzaled profile image
HonzaLed

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

Collapse
 
0shuvo0 profile image
Shuvo

I am really glad that you liked it

Collapse
 
mustafatoprakk profile image
mustafatoprakk

Thank you buddy. İt's very beautiful

Collapse
 
0shuvo0 profile image
Shuvo

Many Thanks I am glad you liked it

Collapse
 
dvlprroshan profile image
Roshan kumar

Really awesome tutorial !

Collapse
 
0shuvo0 profile image
Shuvo

I am glad you liked it.

Collapse
 
aminis profile image
Amin

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

Collapse
 
sbkrish profile image
Balakrishnan Subramaniyan • Edited

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

Collapse
 
ryansmith94 profile image
Ryan Smith

Did you repost this to Medium?

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

Collapse
 
yosi profile image
yosi

Great post. Thank you!

Collapse
 
0shuvo0 profile image
Shuvo

Glad you liked it

Collapse
 
suhakim profile image
sadiul hakim

wow

Collapse
 
nicenine98 profile image
nicenine98

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.

Collapse
 
0shuvo0 profile image
Shuvo
Collapse
 
d1_codes profile image
d1_codes

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

Collapse
 
0shuvo0 profile image
Shuvo

In your downloads folders.

Collapse
 
mena234 profile image
Mena Nasser • Edited

Very nice article, thank you.

Collapse
 
0shuvo0 profile image
Shuvo

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

Collapse
 
qq449245884 profile image
qq449245884

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.

Collapse
 
0shuvo0 profile image
Shuvo

Sure, You're most welcome

Collapse
 
pramon18 profile image
pramon18

This was a good article. Step by step articles like this are really a good idea. Good Job.

Collapse
 
0shuvo0 profile image
Shuvo

Many thanks, I apprecate your valuable comment a loy

Collapse
 
berriz44 profile image
berriz44-yt

Can I export the video in MP4 format?

Collapse
 
khairunnisaas profile image
Khairunnisaas

amazing tutorial!! but can we remove the share screen dialog before it start recording?

Collapse
 
pixelcrash profile image
Georg Kettele

Hi there, great tutorial!

My question, is there any chance, that I can record a fixed area off the screen x- and y-Position with a fixed width and height?
Thx