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

what is going on fellow web developers my name is tyler potts and in today's video we're going to be creating this screen recorder so here you can see we have this simple ui uh disbuilt with tailwind css don't worry if you have no experience with tailwind services i'm going to show you how i would say it all up but also you don't have to style it with tailwind sources you can use custom css or whatever you want but for the purpose of this tutorial to make this a lot quicker i'm going to use tailwind css so let me show you what we need to do today so we've got this screen recorder um with little you know tiles in there and here we can see record screen so when i click record screen obviously i've done this before but normally it would pop up in the top saying hey allow audio and i'd click yes so we can choose between windows a chrome tab you know all the stuff you can choose to screenshot from we're going to choose the entire screen so let's hit share and as you can see it's now here and it's now recording so as i'm talking it's actually recording my voice it's recording the screen you can see those mouse is flying off there and if i hit stop recording and as you can see it's now here and it's now recording so as i'm talking it's actually recording my voice so as you can see there hopefully you heard the audio i'm not sure if it's coming up but basically this video is now playing i'm just going to mute this and replay as you can see it plays you can see the mouse cursor is being moved and it's all there we can then also download this video and as you can see down here if i click open this may take a minute so i'm going to skip to when so as i'm talking it's actually recording my voice it's recording the screen okay guys if you're interested you can get the code from github over at tyler partsdeath youtube javascript screen recorder there just in case i forget to put a link in the description hopefully it should be in there if not just moan at me in the comments and i will get that done anyway let's get into the code [Music] [Music] [Music] okay as you can see here we have a blank folder called youtube which is now gonna have in here we're going to create an index.html file what's going to open up the terminal here so before we do anything else i'm just going to run mpm init y and this is just going to create a package file so we'll just let that go that's fine oh clear we're going to order mpm i d live hyphen surfer um so guys this is just so we can run this on a surfer i'm pretty sure if you open it up from the file it won't work you need some sort of uh surf surf function to actually surf this so we're going to install live surfer and don't forget to also install tailwind css if you want to use it if you don't then you do not need to install it please do not worry about actually install use having to use tail when css if you don't want to you can use any styling you wish um but for the purpose this source i am going to use tail and css okay guys so that is now done um and if we go into our package.json you can see our dependencies right there now we're going to set up two different scripts here we're going to set one called def which is basically just going to be our well we could probably call it css no we'll call one def which is going to start our live surface so what we say is live surfer dots and then we're also going to do no css inject so this because we're using tailwind if you're not using tailwind do not worry about this but if you are using tailwind i recommend adding this because else you're going to have a few issues later on um when when it's trying to live obviously it won't cause any issues to your actual app but for the purpose of speed and refreshing that's i i recommend doing it anyway and the next one is going to be css which is going to be um we're going to say tailwind tailwind css and then we're going to say i for input and we're going to say source and we're going to have a file called tailwinds.css which is going to compile into a folder called distro which is going to say uh we can call it main.css um normally i'd call it tailwinds as well but for the purpose of this i'll call it main.css so you can easily see between the two and perfect we're also then going to run mpx tailwind css in it now this should create us a tailwind config again if you're not using tailwind don't worry about this but in here we're just going to go font family and i just want to make sure my sans fonts are currently set to fiverr sans and sans serif just like that and that and also i want to put in here just in time mode and i want to set this to no sorry mode and then i want to set this to just in time jit it's a feature or again just if you don't use towing don't have to but in case you do this is the way i'm going about it and then we're also going to watch the dot html file so we can purge anything that doesn't need it uh ignore these two so that they're false they're they're they're not real don't don't believe them um and here we go that's all we're doing for the tail we're confident i just wanted to set our font in there just so it looked a bit good uh didn't look bad and then there you go we've got our package.json file all set up so let's create our source folder and inside there let's create our tailwind dot css we're then going to say at tailwind oh that's not an out symbol that symbol is on the other side tyler tailwind and we're going to say base at tailwind components uh i think i need that yeah i need those at tailwind utilities and i think that's it is there any more tailwind variants no that's fine just in time mode will actually override all these anyway because you know tailwinds that's tailwind for you so that's fine that's all in there now what we can run in the bottom is npm run and we can say tell your css which is then going to compile our css you can see it's done if we go to our dist you can see there is a bunch of code in here but it's only actually 500 lines because it's only using the classes we have in here and we have no classes so you can see here it's not adding any classes to our css yet but we also need to add in here watch because i've just realized we're going to want to refresh and keep editing our code and we need to actually watch the file and not just um you know so if we make any changes to index.html we need this to rerun so what we're going to do is we're going to say npm run css again and this time you should see it says rebuilding done and if we go in here and we start editing this file you can see it rebuilds itself at the bottom uh we can call this surfer or screen recorder not surfer recorder screw it out that's a different video i bet uh screen recording screen recorder we then want to link our distribution main css file and inside of the body what we're going to do is well first we're going to add a class to this and this class is going to be equal to background gray 800 and text white now hit save and you can see that's going to build so i just want to show you how tailwind works in here if we just scroll to the bottom you're going to see those classes have now been added so it's only going to use the classes we need which keeps it super small and super awesome just you know plug and tailwind here tailwind you need to you know give me a shout out um anyway we're going to have a header which is going to be background grey 900 and inside of this we're going to say dot container dot mx auto and that is it for that we're then going to have a well actually in here we're also going to have a flex justify center item center and also padding y4 so now as you can see here on the left here if you ever want to know what these what css is actually doing it's doing it here so you can see it all there um so there we go and next up we need now need to run our server well let's actually add our header tag in here let's just say h1 and we'll say screen recorder just like that and now we're going to create a new area over here and we're going to run npm run and we're going to say def which is going to start our development surfer it's going to open it up and as you can see this is what we currently get so let's just quickly add all the classes to this we're going to say class and we'll say text to excel font bold oh black what i mean we can but we could have stuck with black it's fine and then uppercase there you go that should be looking if we refresh refresh we good are you going to work you're not working you don't want to work you don't want to refresh it's fine we'll just we'll deal with you in a minute um okay in header we're going to have a main class with well um a main with dot overflow hidden and then inside of here we're gonna have a container.mx auto and also a padding y of 8 and a padding x of 4. do that and then we can have a h2 which will say video recorder and there we go that's that let's just give this a little class we're going to set the class to this to be text excel uh we'll give it text gray 500 and then we'll say uppercase we'll also say font light and mb4 hit save and there you go that's now updated let's also close that sidebar there just so you can read this better also if this text is too small i apologize i'll just zoom in now so you can actually see it a bit better so underneath our h2 what we want to do is we want to get our video source we want to give this the auto play and we also want to have the class of video feedback now this is going to be our selector so we're going to be able to select this with the video feedback class we're then going to also say background black width full height auto and margin bottom four so there you go you can see we've got a video there we also need to give this a margin bomber for just to push it down like that and i think that is pretty good let's then give it some control so what we're gonna do is well that's perfect except when we just need minus mx4 to give it some spacing we're then going to say button with the class of start recording dot mx 4 and let's just put in here start we could probably just say start or start recording i don't think it really matters we can then say flex 1 because we want it to span we're then going to use background gradients and in tailwind that's really easy we just go background gradients from purple 500 no let's do a 400 and then two pink 400 safe that's looking kind of fancy and then we want to have a padding of four so it's got some padding we then will have an uppercase to be well we want to just be uppercase and then text large font bold transition and then we also want to have a transition duration so we're going to say duration 300 and then on hover we're gonna say opacity uh 550 which is going to be half the no we're going to say 90 because we only want to go down to 0.9 and then we're going to have the disabled class which is going to say opacity 50. so if this is disabled it will basically only show 50 now we're going to duplicate this button we're going to also close off this diff here and instead of start recording we're going to say stop recording and we're actually going to set this class by default to disabled and there you go as you can see we have a start recording button and a stop recording button which is currently disabled um and we have a slight hover effect so we can see when we're hovering over a button there you go so that's basically the um the styling of the actual video here we now need to actually get the rest of this in so underneath this flex here this um container we're going to create a dot recorded video wrap dot hidden so it's going to not actually be visible at first but i'm going to have a h2 we're actually just going to copy this h2 because it's going to be the exact same class and in here we're just going to say recorded video so would say record download your video we'll do that i think that makes sense also let's remove hidden for now so we can actually see it there there you go so we can notice i'm missing an mb of 8 on here because i want to push that all the way down it's not going to load it's fine we'll just get it to work in a second so we've got mb4 we're then going to have the video with the class of recorded recorded video dot background black dot width full dot h auto and finally mba again hit save and there you go also sorry i said mba i'm an mb4 and there we go that's looking much better then underneath the video we're gonna have more buttons so we're just gonna copy this paste that in but we're going to remove one of the buttons and what's going to make it an anchor tag and this one's going to be called download and we're going to say download video because i think it looks a bit better um and then let's go say download video and we also need to add in here text center just because um obviously it's now a thing and i added that to the wrong thing that should actually go on here and there we go so that should now show a and we'll just add the href of nothing for now we'll also make it disabled because we don't want to use it yet there we go refresh let's just do like test no it doesn't want to refresh for some reason that's fine so that should hopefully be pretty good now it's looking good let's add back our class of hidden and there you go that's now i'm not going to show until we actually have a recorded video so that's all the markup we need so you can see here it's quite straightforward there's not a lot to it in terms of html but this is where it gets a bit more exciting inside this we're going to add a main.javascript file now let's close the sidebar and at the bottom here i'm just going to say script source dist main.js so we can actually link to this and now this is where it gets phone so we're going to be using the capture screen api or the get media api and also we're going to be using the records media api i think it's called record media api it's one of the two so we're going to set a few variables we're going to set a stream which is going to be by default equal to null we're then going to crack get audio so we're going to record audio separately we're going to get a mix stream which is going to combine the two but for now again we'll just get set to null we'll also get chunks which is going to be our chunks of data which will actually be equal to an array to start with we don't want to get our recorder which will be equal to null our start button which will be equal to null a stop button also equal to null again there's a lot of different things here but we're just going to get a bunch of them all set there um so we're going to start stop we then need a download button which will be equal to null although it's probably should be called download link that's fine and we'll get recorded video which will be equal to null as well and we can close that off there so i think that's all the variables we actually need and then once we've got that we can create an async function so the first thing we actually will need to do is we need to actually set up the stream and by that i mean we need to get our media devices so what we're going to do we're going to try and catch and in the try we're gonna say stream it's equal to and then we're gonna use a weight so this is why we're using async because we need to use a weight inside of here i'm gonna say navigator dot media deficit dot get display media so normally you would use just get user media if you wanted to get the user but we want to capture the screen so we're going to say get display media video true and then we're just going to end that there so that should be hopefully good for that we're going to get audio which is going to be await navigator dot media devices then this time we're going to say get user media and we're just going to say audio true we can actually pass through a object here and we can actually say stuff like echo cancellation true because we don't want it to be echoing we want noise suppression to be on by default so true and we could get a default sample rate and let's say what's the deficit 400 yeah there you go so that should hopefully be all steps and now what we're doing here is we're saying hey get get our stream so we're gonna get our stream data get our audio data which is going to be here so once we run this set up stream it's going to ask us if we want to allow audio on this website um it might not ask me because i've already done it it probably yeah look microphone live we do ask by default hopefully it should ask again so i can show you what i will say reload there you go and then after that now if we go down to here we need to get a catch which will have an error and inside there we'll say console.error error if there's any issues it will throw that and that's done we then underneath this we need to create enough function we're going to say set up video feedback and in the video feedback it's basically just going to um display inside of this screen here the video we're actually getting so we're going to say uh so we're going to say setup video feedback and we're going to say if stream so if we've got stream and it's not null we're gonna say const video it's equal to document dot query selector and we're gonna say in here is dots video feedback i believe and there you go we've got video feedback we're then going to say video source object sequel to stream and video dot play we're then going to say else if we don't have a stream we're just going to console uh we'll console.warn and we'll say no stream available and then we'll go down here hopefully that should be good now let's just see if we can get the actual video displaying now so what we're going to do is before we start recording or anything like that we're going to basically create a well here we'll say window underneath here we'll say window.adddefendlistener and we're going to say we're going to write load we're then going to use just an arrow simple arrow function uh delete one of those give me one of those bam just like that and we're going to say start button i mean there you go that's all the buttons we actually need but we do not need well we don't need that that's that's not needed um start recording we do need those but we are gonna just pause well we can keep start recording and there you go so let's have a look at these right so start button is equal to document.we select the start button is that what we called it start recording so it's start recording it was close it was close i assume stop recording download button did we call it download button or download video i think it's download video is download video just gotta make sure these are all right download video and then recorded video is there which is actually correct recorded video uh right there perfect so now we have all of those inside of our variable so that all set up great so now we need to create a start recording function so i'm just going to say function start recording and inside of the start recording function we're going to do a few things first we need to await for our setup stream to run so we need this to actually be an asynchronous function so we can actually call away because if we don't do away the stream may not work and if we go stream and audio this time because we need both um because obviously in this set video feedback we're not actually setting it up to get audio to playback because we'll hear the audio recording and i am not a fan of that i hate it um i turn it off with my own video so i can't hear myself talking um because it trips me up so that's what but in the actual recording session when we actually record it we need to have both we're then going to create a mix stream and this mixture is going to be a new media stream which can have an array and this is just going to say dot dot stream dot oh that's right stream dot get tracks and then we're gonna say audio dot get tracks as well so ashley's here let's just break this down so you can read it a bit easier and what's going on here is basically we've got if streaming audio we're going to mix our streams together you know don't cross your streams but in this case do cross them we're going to get our video stream and our audio tracks basically and combine them into one media stream we're now going to create our recorder so we're going to say recorder is equal to a new media recorder and we're going to pass in the mixed stream we're going to say recorder dot on data available and then we're going to create a handle data handle data available function we're going to create recorder dot on stop and we're going to have a handle stop function we're going to say recorder dot start and now we're going to pass through a number now this timer basically says so we call this function here on data available and now this tells us how how long how many times we should call on data available um so we're going to say every 200 milliseconds we're going to create a new trunk chunk and pass it into our on data available um you'll understand more once we actually create that function so once that's recorded started we're going to say start button dot disabled is true and stop button disabled is false to flip them and then we're just going to console.log and we're going to say recording has started just like that and now hopefully that should work we always need an else here and just do console.1 no stream available now we could then say if no stream is available let's uh try get another stream but for now we're just going to leave it at that now under here we want to create a new handle data function so we're going to say function handle data available now what we need to do in here is go we actually need to get an e and we need to say uh chunks dot push e dot data so that is actually correct so chunk stop push e.d so we're going to get the data from our media recorder here and we're going to pass it into an array of chunks and that's all this is that's all that does but then when we stop it so if we go function we need to actually create stop recording uh so let's leave that there we also need a function called start recording oh wait was that it that would start a coin don't worry ignore me there we've already got start recording we now we also need a function called handle stop which is actually going to do something different to that what um our stop recording will do so stop recording will actually just stop it so in here we're going to go recorder dot stop and then we're going to flip it and you can see here we're going to call all of this here which actually correct that should then stop our recording we're then going to go in handle stop we're going to pass through e here the event and we're going to create a new constant called blob which is equal to a new blob of chunks and then we're going to say it's type is equal to mp4 so you could do a webm or whatever you want i'm gonna do mp4 for this uh oh that's blog we want a blob so that's a blob of data so that's gonna combine all our chunks together merge them into a video and then we'll have a blob of data we can use we can play it we can do whatever we want we're not going to say chunks is equal to an empty array so we want to clear that array we've already used them we don't need to use it again we're then going to say download button dot href is equal to url.create object url blob so what this could do it's basically just going to say hey let's make sure we can convert this blob into a downloadable url so we'll turn it into a url we can download so we can download that video we're then going to say download button dot download is called video.mp4 mp4 you could probably have a name parameter here as well if you wanted to but for now i'm not going to and then we're going to say the button disabled is equal to false we're then going to say recorded video source so the the actual playback is going to be uh the same we're then going to say recorded video and we're not going to say play we're actually going to say loads we need to load it all up so it's ready we're then going to say recorded video dot on loaded data is equal to a function which we're just going to say record dot play but also inside of here we want to get a reference to our container so we're going to say document document dot query selector and then we're going to basically just go copy the cloud close uh html we're going to go copy the wrap here so you can see we have the wrap let's just pass this in so the reason we're getting this is we want to display x remember we have it hidden by default so what we're going to do is go classlist dot remove hidden we don't want to say rc dot scroll into view so we're going to actually scroll to it we're going to say behavior it's equal to smooth and we need to also set the position which i think is block and we're going to say start so it's going to start at the top of the block so it's going to scroll straight to the top of it obviously it might not scroll when we're in a small screen but when we're in a bigger screen it when it goes off screen you know how it is and then after that we just want to clear our track so we're just going to say stream dot get tracks for each stop what's going to do audio get tracks stop and then we can console.log console.log recording has been saved what has not been saved recording has been prepared there we go so hopefully if we now open up f12 here so you can see the console and we refresh this over here and if we hit start recording you can see it's going to ask us what you want to share to so let's record our entire screen hit share it's going to ask us do you want to use your microphone i'm going to click allow and now it's going to be like cannot surprise no setting disabled oh 55. let's go after look area 55 what did we do wrong stop button dot disabled so down here stop recording did we give it the wrong name let's have a look start oh we didn't even rename the actual button some people probably noticed that i did not so now we're going to hit start recording again we can click share and now it's actually recording so if i move around if i do some highlighting i do some other stuff blah blah blah blah and we hit stop recording stop recording oh we also need to uncomment our stop recording function so we can actually call the stop function and now now i promise you this is the one start recording third time's a charm share it starts recording so now we're currently recording let's just do some scrolling like hey guys look at my new video look how cool we are yeah we're awesome um stop recording it starts recording so now we're currently recording let's just do some scrolling like hey guys look at my new video look how cool we are yeah we're awesome um cool i think that's finished um it did not work so errored here so it says null so 92 um class name dot remove so it looks like we didn't actually last name rc is equal to document.query selector oh we misty dot god i've made a lot of mini mistakes in this haven't i saved but this is why it's here i show you the mistakes i make so you can fix them yourself and there we go we've we're we've now should be working this is the this fourth time the charm like people don't realize this third time's actually a lie it's the fourth time what really counts hit start share here we go we're now recording let's just do a quick like hey how you doing everybody let's stop the recording yeah here we go we're now recording let's just do a quick like hey how you doing everybody let's stop the recording and there you go you can see we can keep playing this video or we can actually download it here but for those if you've got a browser that doesn't support it i mean i'm pretty sure the only browser this supports is firefox um safari and i don't think the audio actually works in firefox or safari it's mainly chrome oprah and edge i think but otherwise but we can even do playback speed here like this is some interesting stuff let's just do a quick like hey how are you doing everybody i hope you can hear the audio if you can't i apologize i'll fix that in a future video just let me know uh normal and then we can hit download and as you can see it now downloads that mp4 we open it up this may take a second load here we go we're now recording let's just do a quick like hey how you doing everybody let's stop the recording and there you go you can see that works perfectly and now you can use this tool to record your own videos if we just hit refresh here we've got this start recording let's just start recording capture our screen it's like hey yo what's going on everybody my name is tyler potts welcome to our capture screen we're going to hit stop it's like hey yo what's going on everybody my name is tyler potts welcome to our capture screen awesome so i'm going to do a quick outro using this i'm going to cut and we're going to paste and we're going to use that video instead so this outro is actually going to be called using this screen recorder let's refresh and let's go what's going on everybody thanks for watching this video i hope you've enjoyed if you have don't forget to uh click that thumbs up button smash that subscribe button and hopefully i will see you in the next one don't forget if you have any comments or any feedback at all drop it in the comment section below and guys thank you for watching this video i hope you've learned so awesome how to capture and save your own videos and be awesome thank you for watching this video and peace out [Music] you

Channel: Tyler Potts

Views: 1,335

Rating: 5 out of 5

Keywords: webdev, javascript, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer, screen recorder, record, screen

Id: XAFWag-_FGM

Length: 32min 14sec (1934 seconds)

Published: Thu Sep 23 2021