DEV Community

Cover image for Simple Screen Recorder in 20 lines of JavaScript

Simple Screen Recorder in 20 lines of JavaScript

Nino Filiu on November 01, 2023

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...
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