DEV Community

Cover image for Simple Screen Recorder in 20 lines of JavaScript
Nino Filiu
Nino Filiu

Posted on • Updated on

Simple Screen Recorder in 20 lines of JavaScript

Let's say you're fed up of the state of screen recorders' paywalls and limitations and want to go on coding your own - it turns out you can already have basic functionnalities in a few lines of code.

We can ask the browser to get the capture video stream for us using the screen capture API, but for security reasons we must ensure a user gesture triggered the capture, for example a button click:



const button = document.createElement("button");
button.innerHTML = "capture";
document.body.append(button);
button.addEventListener("click", async () => {
  // TODO
});


Enter fullscreen mode Exit fullscreen mode

On click, get the video stream and record it



const stream = await navigator.mediaDevices.getDisplayMedia();
const recoder = new MediaRecorder(stream);
recoder.start();


Enter fullscreen mode Exit fullscreen mode

Stop the recording when the user stops sharing the screen

Image description



const [video] = stream.getVideoTracks();
video.addEventListener("ended", () => {
  recoder.stop();
});


Enter fullscreen mode Exit fullscreen mode

Obtain the recorded file and download it



recoder.addEventListener("dataavailable", (evt) => {
  const a = document.createElement("a");
  a.href = URL.createObjectURL(evt.data);
  a.download = "capture.webm";
  a.click();
});


Enter fullscreen mode Exit fullscreen mode

And voilà, you have a simple screen recorder!

It has many limitations that would be fun to resolve - audio recording, webcam integration, long running streams, etc - but I just found that doing such a powerful thing already with so few lines of code was too awesome not to share.

codepen link

Top comments (14)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Heyo! Wonderful post here. 🙌

Just a heads up that you can embed CodePens here on DEV if you wanna.

To do so, you just use this syntax:

{% codepen https://codepen.io/ninofiliu/embed/BaMzxQM %}

You definitely don't have to do this, but just letting you know if you'd like to.

Notably, CodePen embeds behave a bit differently than most embeds on DEV (GitHub, YouTube, internal DEV embeds) which use a simplified syntax, for example:

{% embed https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstley %}

Hope this is helpful to ya and thanks for sharing such a helpful post here on DEV!

Collapse
 
eshimischi profile image
eshimischi

WebCodecs is even more interesting new Api. Just implemented live video converter from the camera and screen capture, still some experimental functions but works perfectly in the modern Chrome, webworkers.

Collapse
 
ninofiliu profile image
Nino Filiu

Yes! Webcodecs is amazing. I'm rewriting supermosh.github.io so as to use web codecs atm!

Collapse
 
samuel_kelv profile image
Samuel Kelv

Wow, nice. Can I know more about the project?

Collapse
 
dsaga profile image
Dusan Petkovic

Oh interesting, wasn't aware that it was this simple.

Collapse
 
jpkeisala profile image
Jukka-Pekka Keisala

You learn something new every day. Thanks for this post, I am sure I will make this in use on somewhere, some day.

Collapse
 
bogomil profile image
Bogomil Shopov - Бого

Please consult the browser support before using it. Great article!

Collapse
 
ninofiliu profile image
Nino Filiu

I did :) both the recorder APIs and the screen capture APIs are in full support :)

Image description

Image description

Collapse
 
bogomil profile image
Bogomil Shopov - Бого

I was talking about the others, so they might want to try it out on a different browser and to be surprised when it's not working :)

Collapse
 
jordantylerburchett profile image
Jordan-Tyler Burchett

Nice read and cool idea. Looks like a very handy API

Collapse
 
onlinemsr profile image
Raja MSR

Thank you for sharing this informative and well-written post, Nino! This article on creating a screen recorder with JavaScript is impressive!

Collapse
 
samuel_kelv profile image
Samuel Kelv

Wow, great project idea. I'm not able to find the download link

Collapse
 
mebble profile image
Neil Syiemlieh

Incredible how many APIs browsers have to implement. I guess many browsers rely on chromium for all/most-of these APIs? I wonder if new browsers like arc and vivaldi do that too

Collapse
 
anuj1405 profile image
Anuj Kumbhar

Thank you for sharing with us with this information