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

Подписаться 57 тыс.

Просмотров 16 тыс.

50% 1

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/TylerPottsDev/yt-j...
// JOIN THE NEW DISCORD SERVER!
/ discord
// FOLLOW ME ON TWITTER
/ tyler_potts_
// MY GEAR FOR CODING AND RU-vid
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.com/store/apps/de...
// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

Хобби

Опубликовано:

22 сен 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@skolotoi4588 Год назад

great content, thank you, Tyler.

@senju31 2 года назад

Much love from Jamaica.

@VariousSoundEffects 2 года назад

Super Tuto merci.

@farnaamsamadi5386 2 года назад

Great and rare tuts. Please keep going.

@TylerPotts 2 года назад

Thanks, will do!

@subhadipsaha1359 10 месяцев назад

How can we add system audio as well ?

@brownwolfgaming4773 2 года назад

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

@TylerPotts 2 года назад

Thanks bud! :D

@rangabharath4253 2 года назад

Awesome 👍

@TylerPotts 2 года назад

Thanks 🤗

@user-cf3gi9zj3i 2 года назад

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

@TylerPotts 2 года назад

Have fun!

@NERO-ez1mn 2 года назад

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

@tabdig 2 года назад

Nice project

@TylerPotts 2 года назад

Glad you like it!

@Ro19975 2 года назад

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

@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?

@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?

@subhadipsaha1359 10 месяцев назад

Is it recording the desktop audio as well ?

@jhonimiassol4136 Год назад

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

@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?

@praveenp9279 7 месяцев назад

Its also record with system and user audio?..

@jpdoshi2811 2 года назад

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

@yairl1 2 года назад

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 2 года назад

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

@crazy27gaming39 2 года назад

can you please give me the download of the file

@Axelblaze9873 2 года назад

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

@MustafaAli-xj6lq 2 года назад

I would like to see that 🎉

@ImranKhan-kf4ez Год назад

do you have a website?

@appicsolutions2296 2 года назад

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

@TylerPotts 2 года назад

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

@meraklicoder 2 года назад

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

@user-cf3gi9zj3i 2 года назад

github copilot

@meraklicoder 2 года назад

@@user-cf3gi9zj3i ohh i guessed

@MustafaAli-xj6lq 2 года назад

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

@TylerPotts 2 года назад

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

@MustafaAli-xj6lq 2 года назад

@@TylerPotts thanks for the acknowledgement 🙂

@ChristopherCricketWallace 2 года назад

should probably put "Tailwind CSS" in the title somewhere

@flaviokonti5522 2 года назад

And Copilot

@aarondz789 2 года назад

It's funny.

@AnilBaniyaNep 2 года назад

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 2 года назад

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

@AnilBaniyaNep 2 года назад

@@TylerPotts Thanks Tyler

@AnilBaniyaNep 2 года назад

@@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?

@khangvo3975 2 года назад

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

@TylerPotts 2 года назад

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 2 года назад

@@TylerPotts It's Windows 10

@rohitdwivedi6268 2 года назад

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

@ZaidKhan-zv2vp 2 года назад

Cant view in 1080p

@TylerPotts 2 года назад

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

@starolat Год назад

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

@senju31 2 года назад

OMG No more need for downloading apps like that ? wow

@TylerPotts 2 года назад

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

@senju31 2 года назад

@@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 2 года назад

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 2 года назад

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 2 года назад

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

@TylerPotts 2 года назад

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