Build a SCREEN RECORDER WITH AUDIO in JavaScript - JavaScript Beginner Tutorial

Learn how to build a screen recorder like OBS in JavaScript. This tutorial will show you how to use the Media Capture API and Media Recorder API to record both your screen and audio.
Repo: github.com/Tyl...
// JOIN THE NEW DISCORD SERVER!
/ discord
// FOLLOW ME ON TWITTER
/ tyler_potts_
// MY GEAR FOR CODING AND KZbin
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
Screenbar Light: amzn.to/3iFRS7w
All of these products I own and have tested!
// INTERESTED IN GAME DEV?
Game development channel: / muddywolf
// CHECK OUT MY GAME
play.google.co...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[@NERO-ez1mn]

oh hell no!!!!!!!!!!!!!! the channel is getting like a masterclass never seen anyone doing this. Hope somehow in the future we will see intergrated by a database. i think not everybody knows how to do server side language with express i think? apollo express graphql uploading and downloading functionality. please hit like to make it more like a PETITION for Tyler hhe. THANKS TYLER for AWESOME TUTS BTW

[@skolotoi4588]

> true

[@senju31]

Much love from Jamaica.

[@farnaamsamadi5386]

Great and rare tuts. Please keep going.

[@TylerPotts]

Thanks, will do!

[@subhadipsaha1359]

How can we add system audio as well ?

[@skolotoi4588]

great content, thank you, Tyler.

[@brownwolfgaming4773]

That's why i subscribe this channel. Great content!

[@TylerPotts]

Thanks bud! :D

[@Ro19975]

Hey Tyler, The video was great. Can I get the download link for ur desktop wallpaper? It's too good

[@subhadipsaha1359]

Is it recording the desktop audio as well ?

[@VariousSoundEffects]

Super Tuto merci.

[@jhonimiassol4136]

is there any way to get an internal audio instead of mic

[@AltaRosso]

Cool video man. Saved me a lot of money from buying one of those screen recording software's where I could just make my own. Thanks! Quick question though: It's probably just me but as I was recording VS code, after I hit save the screen recorder closes. Basically I'm recording myself coding. Is there a way to avoid that?

[@АлишерАзимов-д8ш]

Sooo cool, i have to try it👌😁😁😁

[@TylerPotts]

Have fun!

[@rangabharath4253]

Awesome 👍

[@TylerPotts]

Thanks 🤗

[@praveenp9279]

Its also record with system and user audio?..

[@jpdoshi2811]

Can I make html, css and javascript to executable app, especially this web app as browser uses much memory, if u can help, it would be so cool, btw, good tutorial

[@atreyuarg]

hello, can you do that instead of recording the screen you can record a url where there is a video or an animated slider?

[@MustafaAli-xj6lq]

Can you make a video on screen share with video and audio

[@TylerPotts]

That's a cool idea! I'll see what I can do

[@MustafaAli-xj6lq]

@@TylerPotts thanks for the acknowledgement 🙂

[@interim17]

Such a cool project! I'm trying to iterate on this and have a question. If I remove the first element of the chunks array before passing it to the Blob constructor, the video is no longer playable, but removing other elements of the chunks array doesn't affect playability of the output video. Why is this? What is special about the first element in the chunks array?

[@Axelblaze9873]

can you do the same for Electron JS with Webcam access, mute and unmute option?

[@MustafaAli-xj6lq]

I would like to see that 🎉

[@yairl1]

Hey Tyler. thank you very much for the video! is there an option to capture a server with no GUI (headless screen) on stream?

[@TylerPotts]

Not from a browser from what I'm aware off 🤔

[@tabdig]

Nice project

[@TylerPotts]

Glad you like it!

[@crazy27gaming39]

can you please give me the download of the file

[@ImranKhan-kf4ez]

do you have a website?

[@meraklicoder]

which extension are u using for intellisense? sometimes code block is appearing when u are coding...

[@АлишерАзимов-д8ш]

github copilot

[@meraklicoder]

@@АлишерАзимов-д8ш ohh i guessed

[@ChristopherCricketWallace]

should probably put "Tailwind CSS" in the title somewhere

[@flaviokonti5522]

And Copilot

[@appicsolutions2296]

The video I am recording is choppy. Can I increase the frame rate or something else to resolve the issue?

[@TylerPotts]

Yes you can! See docs! developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings/frameRate

[@AnilBaniyaNep]

Hi Tyler, Is there any way to change the text of pop up screen share? I wan't to change the text share screen to record screen.

[@TylerPotts]

Hey, unfortunately not. This is to do with the browser and not the actual website.

[@AnilBaniyaNep]

@@TylerPotts Thanks Tyler

[@AnilBaniyaNep]

@@TylerPotts Hi, I couldn't figure out the direct way to record the screen without showing the dialogue of screen share as In Jitsi meet web application. What should I have to do for it?

[@starolat]

вы иностранцы???

[@rohitdwivedi6268]

that prompt which comes for screen sharing can we skip that and record only current tab

[@khangvo3975]

hmm, exported video can't fast forward/back, do you help me please :(((

[@TylerPotts]

I'm not sure that's an issue with the app as when I save the video I can rewind, is this on your machine? Are you on windows?

[@khangvo3975]

@@TylerPotts It's Windows 10

[@aarondz789]

It's funny.

[@ZaidKhan-zv2vp]

Cant view in 1080p

[@TylerPotts]

Hmm says the video is hd ready it might take a little while to kick in 😅

[@senju31]

OMG No more need for downloading apps like that ? wow

[@TylerPotts]

Exactly! To my surprise the quality was really good too when I was running tests!

[@senju31]

@@TylerPotts I am very happy to hear. I saved this in my front-end playlist. Will definitely check it out later. This is one of those things that's an unexpected but pleasant surprise.

[@che-love-4ik314]

Do you know the code for such a case when a visitor goes to a site and the same site immediately starts recording both video and sound? If the visitor uses the phone, then the site must record video from both the front and the back, and when the visitor leaves the site, the site will immediately stop and save the record with all metadata such as IP address, connection time, what browser, provider the visitor uses. I will be grateful if you can help me with this.

[@TylerPotts]

I'm pretty sure you're not allowed to do that as it is dangerous and illegal unless the user allows it. I don't believe you can do front and back cameras though.

[@che-love-4ik314]

@@TylerPotts However, even trackers on websites do such actions. Surveillance of users is allowed in Russia. This is legal data collection

[@TylerPotts]

Sorry I can't help as it goes against the rules of my country 😩

[@educationey9572]

360p in 2021.

[@TylerPotts]

It's 1080p...

[@educationey9572]

@@TylerPotts Now it is :D