Build a SCREEN RECORDER WITH AUDIO in JavaScript - JavaScript Beginner Tutorial
HTML-код
- Опубликовано: 22 сен 2021
- 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 RUclips
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 
Хобби
great content,
thank you, Tyler.
Much love from Jamaica.
Super Tuto merci.
Great and rare tuts. Please keep going.
Thanks, will do!
How can we add system audio as well ?
That's why i subscribe this channel.
Great content!
Thanks bud! :D
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?
hello, can you do that instead of recording the screen you can record a url where there is a video or an animated slider?
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
> true
Hey Tyler, The video was great. Can I get the download link for ur desktop wallpaper? It's too good
Is it recording the desktop audio as well ?
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?
is there any way to get an internal audio instead of mic
Awesome 👍
Thanks 🤗
Sooo cool, i have to try it👌😁😁😁
Have fun!
Its also record with system and user audio?..
Hey Tyler. thank you very much for the video!
is there an option to capture a server with no GUI (headless screen) on stream?
Not from a browser from what I'm aware off 🤔
Nice project
Glad you like it!
can you do the same for Electron JS with Webcam access, mute and unmute option?
I would like to see that 🎉
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
which extension are u using for intellisense? sometimes code block is appearing when u are coding...
github copilot
@@user-cf3gi9zj3i ohh i guessed
can you please give me the download of the file
The video I am recording is choppy. Can I increase the frame rate or something else to resolve the issue?
Yes you can! See docs! developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings/frameRate
do you have a website?
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.
Hey, unfortunately not. This is to do with the browser and not the actual website.
@@TylerPotts Thanks Tyler
@@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?
hmm, exported video can't fast forward/back, do you help me please :(((
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?
@@TylerPotts It's Windows 10
Can you make a video on screen share with video and audio
That's a cool idea! I'll see what I can do
@@TylerPotts thanks for the acknowledgement 🙂
that prompt which comes for screen sharing can we skip that and record only current tab
should probably put "Tailwind CSS" in the title somewhere
And Copilot
It's funny.
Cant view in 1080p
Hmm says the video is hd ready it might take a little while to kick in 😅
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.
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.
@@TylerPotts However, even trackers on websites do such actions. Surveillance of users is allowed in Russia. This is legal data collection
Sorry I can't help as it goes against the rules of my country 😩
вы иностранцы???
OMG No more need for downloading apps like that ? wow
Exactly! To my surprise the quality was really good too when I was running tests!
@@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.
360p in 2021.
It's 1080p...
@@TylerPotts Now it is :D