How To Create A Video Chat App With WebRTC

now this is a bit of a different intro than usual and that's because I'm going to show you how to build a zoom clone where you can communicate on video chat with anyone you want as you can see I have my phone and my computer I'm talking with both of them and this can be used to call anyone that you want so let's get started now welcome back to web dev simplified times 4 my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started I just have a blank project open a Visual Studio code and a working demo of the project on the right as you can see in this top browser I am calling myself in this chatroom with this title and then also down here I have that same chat room open and if I were to join that chat room with another tab you can see that now all three of these windows have the three different calls inside of them and if I were to leave it'll exit that person out of the other chats so as you can see this is a very flexible and useful video-calling platform and it's automatically gonna create rooms for us so that we can chat in specific rooms instead of calling every single person on the application so to get started with this the very first thing that I want to do is to actually set up our project because we're gonna need some form of server to help us communicate the rooms that we have for our different users and then we're going to need obviously our front-end code for talking with the different users in the video chat so in order to get our servers set up let's just run NPM an it - why that's going to create for us this bully other plate package.json and now we need to install our dependencies so we can say npm i and the first dependency that we're going to need is Express because that's going to be the server we're going to use and we're going to use ejs as our templating language so we use that dependency and then we're gonna need something called socket IO which is going to allow us to communicate back and forth with the actual server easily now another dependency that we're going to need is going to be you UID so we can just say npm i uu ID and this dependency is what allows us to create these dynamic URLs right here with these different room numbers inside of them so we can just have dynamic unique uu IDs for all of our different rooms so the users can chat in specific rooms lastly we're gonna need one dev dependency so n p.m. I - - save dev this is going to be called node 1 and this allows us to quickly refresh our application every single time we make changes so we don't have to manually restart our server each and every time and speaking of our server let's create a server JS file where all of our server code will go and now in our package JSON let's create a script we're gonna call it dev start and we're just gonna inside of here put node Hmong server Jas and now if we come down here and we were to run npm run dev start it's going to run this server file and every single time we make changes for example a console dot log hi and rerun it you can see it's going to log that out and restart our server now inside of our server i just want to set up the very basic code for actually getting our server running so we can just create a express server by saying constance press is equal to require express and then we can create an app variable which is equal to running that express function and we're also going to need to get a server which is useful for socket IO so we can say server is equal to require of HTTP we just need to pass in here that server and then pass our actual app object here this allows us to create a server to be used with socket IO and speaking of socket IO let's bring that in Seoul say IO is equal to require of socket IO and we need to pass in this server to the return of this require function so it's actually creates a server for us based on our Express server and then passes that to socket IO so that socket IO actually knows what server we're actually using and how to actually interact with that and then what we can do is we can say server dot listen on port 3000 and that's actually going to start up our server on port 3000 but in order to get that to work I need to shut down my existing server on port 3000 so there we go I've shut down that other server but you'll still notice these videos are actually working and that's because the video chat does not communicate through the server it actually communicates directly with the person's computer so we don't have to worry about sending our traffic through the server the server is purely just for setting up our rooms and now if we just get rid of this go to local as 3000 this is going to be where our application is when we actually started up so if we save over here and if we refresh you should see cannot get slash and that's exactly what we want now the next step is to actually set up our Express server so we actually have a route at this home page here we can just say app dot set and this is going to be for our view engine we need to set up how we're going to render our views in our case we downloaded the ejs library so we're going to use ejs next we want to make sure we set up our static folder so we can say app dot use Express dot static whoops static and this is going to be called the public so we're going to put all of our JavaScript and CSS all in this public folder here so now that we have that set up we can actually work on this and get route here so we can just say apt-get of slash and this is going to take in a request and a response let's just say request and a response and then with that request in response all that we want to do is create a brand new room and redirect the user to that room because we don't have a home page for this application so if you go to the home page is just going to create a brand new room for you so let's create a route for our rooms we could say apt-get slash : a room and this is going to be a dynamic parameter that we pass in to the URL and it's going to again take requests and a response and inside of here what we can do is we can actually get our room from this room parameter here so we can say res ender room and we want to pass down our room ID and this room ID is just requests about params room and that's coming right here from our URL now up here we can take our response and we can redirect our user to slash room but we want to get a dynamic room so we can come in here slash and then we want to have some form of room ID here that we pass in and that's what that UUID library we downloaded is going to do so we can say Const and we need to say require here it's going to be equal to u UID and inside of here what we're going to do is we're going to take a function called v4 we're going to rename it to you UID v4 that way it's more self-explanatory what it does and instead of passing this room ID here we can call the UUID v4 function and it's going to give us a dynamic URL so now if we save and we go to local as three thousand we should actually get a random UUID being appended to the end of this try it enter you can see down here we have this random UUID that looks just like this being appended to the end of our URL if we come down here same thing we should get another random UUID if I just copy that in you can see we have two completely random rooms that are generated every single time we go to our home page and now it's saying that we don't have any view essentially that it's rendering we're trying to render this view called the room but we don't have a view called room yet so let's work on creating that view we can create a new folder called views this is by default where your views are going to go we'll create a new file called the room ejs and that's because we're using the ejs whew engine now inside of here if we hit exclamation point and hit tab you can see it generates a boilerplate HTML code for us and inside of here we can actually go through and render all the code we need for our room view now luckily for us this is actually really simple code we're going to need to have some grid which we're gonna put our videos we're gonna call this video grid and we're gonna have some really simple styles for styling out this video grid so we could say video grid and this video grid is going to be a display of grid we're gonna have grid template columns which we're gonna say repeat on autofill and we want to have 300 pixels so essentially we're going to have a 300 pixel wide video and then we're gonna set a grid Auto rows and we want to have 300 pixels and what this is saying is that every single one of our rows should be 300 pixels tall and every single one of our columns should be 300 pixels wide so essentially we're going to get a square video now in order to make sure our video fills that whole space we can select all of our video elements we can change the width to 100% the height to 100% and in order to account for aspect ratios for example if you have a really skinny video or really wide video you want to make sure it still only is a square so we can say object it and set that tick cover essentially what that's going to do is it's going to zoom in the video until it fills the entire square and then cut off everything around the edges it's just like if you did background sizing and you did covering that way it's the same thing and that right there is all of the code that we need to set up our Styles as I said it's really simple styles it's just a grid of video objects so now if we save that and we save over here and we just do it quick back to our home page and refresh you can see we have a random room ID generated and it's just going to be a blank page which has that one single empty video grid div on it now the next thing that I want to work on before we start diving into the front end is going to be thinking about what we want to handle on our server with socket IO so if we just come down here we can say IO dot on connection this is going to run any time someone connects to our web page we want to just admit socket that's the actual socket that the user is connecting through and here we can actually set up events to listen to so the first event I want to listen to is going to be when someone connects to a room so we can say socket dot on join room and inside of here we're going to pass in the room ID as well as the user ID so what this essentially does is what happens is whenever we connect with sake i/o we're going to set up this event listener that says whenever we join a room we're going to pass in the room ID in the user ID so on the front end what happens is as soon as everything is set up and we have a room and we have a user we're gonna call this joint room event here and then it's going to call all the code inside of this socket on now I'm trying to console.log a room ID and user ID so we can see exactly what's happening and we'll just save that for now now instead of our room ejs what we need to do is we need to take the room ID that we pass in here and we need to give it to our front-end code somehow and the easiest way to do that is just simply with a script tag instead of here what we can do is we can say Const room ID is going to be equal to and we want to have this syntax here with the less than sign that present an equal that's going to actually render code on our server so we know we have room ID being passed down from our server here so we can access that inside of here just like this close that off and we need to wrap this inside of quotes because it's actually going to be a string so now in our JavaScript we're going to have this room underscore ID variable we can actually see that by if I just refresh here and inspect the page go over to our console and type in room ID you can see that this room ID here matches exactly the URL right here for 8fa for 8fa so we're actually getting the room ID that we're currently in and we're passing that down through this room underscore ID variable now the next thing we need to do after that is make sure we can use socket IO inside of the front-end and luckily socket IO does all of this automatically we can create a script tag here and it's going to have a source of slash we want to go to socket IO slash socket of socket dot IO dot J s and let's just make sure we defer that and what this essentially is doing is loading all of these socket IO JavaScript code into our front-end and it's serving it from our own server here that's what happened when we set up our IO with our server like this so now we have that socket IO code and the last thing to do is to set up our own custom script we'll just call it script KS and we'll make for sure to defer this so now we have access to some script file which is going to come from a public folder which we need to make sure is at the root level and we'll create a file in here called script J s now inside here we have access to all of our socket IO code we have access to our room ID and with that we can actually call that socket IO join room event right here so inside of our script let's first and get a reference to socket we can just say socket is going to be equal to IO and then we need to pass in the path that we want to call and our case we're going to use the root path because that's where our server is set up at the root path so we have socket is going to connect to our root path of our application at localhost 3000 and then what we can do is say socket dot emit and this is going to send an event to our server we're gonna call it a join room and inside of here we need to pass our different arguments so we have our room ID and let's just pass a user ID of 10 for now so we can see if this works now if we save and we refresh over here you should see that we get passed our room ID as well as our user ID and that's because here we're printing that out whenever a user joins the room if we join this other room down here with a different browser you can see that we get that room ID as well as that hard-coded user ID of ten so now the next thing to work on is actually telling all of the other users in the same room that we have joined that we have a new user that just connected because we need to set up the video connections so to do that first we want this current socket to join a room so we can say socket join room ID but now we're joining this new room that we passed up here with this current user so anytime something happens on this room we will send it to this socket or essentially this user and then we can say socket - room ID which means we're going to send a message to the room that we are currently in we want to make sure this is a broadcast message all this does is says send it to everyone else in the same room but don't send it back to me because we already know that we connected we don't need to send ourself a message saying we connected then we can just say omit here and this is going to be our event which is a user connected we're gonna pass in the ID of that user that just connected so now we can go back in door script and we can actually listen for this event so we can say socket dot on user connected and this is going to take in a user ID and then what we can do is you're just a console that log user connected and we're gonna pass up the user ID for now just to see what this is actually doing so if we save and we just inspect our page here go to our console and if we refresh you'll notice nothing's actually happening ever refresh down here nothing's happening but if we have this user down here at the bottom join the exact same room as the user at the top you'll see user connected 10 which is the user ID that we have hard-coded so now when people are in the exact same room we're sending messages to other people in the same room saying hey someone else joined here's the ID that they have so you can try to connect to them but so far all we've done is just hard code these IDs we just have 10 hard-coded here so how exactly are we're going to handle this ID connection well there are a few different ways we could do it one way would be to hard code and write out all of the code by hand that we need to do to set up these fancy connections or we could take advantage of a library that's already built that does a lot of the hard work for us and this library is called PJs they have the ability to create connections between different users using web RTC and most importantly they have a server setup that you can use that allows you to create these dynamic IDs for connecting between different users and to set up that server is incredibly easy just open up a new tab in your terminal and we're going to run NPM I - and G and we want to call peer well this is gonna do is globally install this pure library which allows us to actually run a peer server and then we can just say peer the jsn a port will say port 3001 and now what happens is we have a peer server running on port 3001 and what this peer server allows us to do is to connect different users and it will give us an ID of a user which we can use here instead of this hard-coded number 10 we also need to make sure that we include this script tag here inside of our code so let's copy this script tag come over to our room ejs we'll just put it away at the top of our code and we'll just make sure that we set this to defer so it loads in the correct order from top all the way down to bottom now if we save that come into our script we have access to that peer library and we can create a new peer but since we're connecting to our own server we need to pass some parameters to this new peer so let's create up here we'll call it my peer it's gonna be equal to a new peer and this first parameter to peer is going to be an ID we'll just pass an undefined because we're gonna let the server take care of generating our own ID now the next thing that we passed - this is going to be our host in our case our host is just this slash here we just want it to be our root host and then a port which is our case going to be three thousand and one which going to put that inside of a string here so now we have a connection to this peer server and if I were to just save this and i refresh my browser you can see client connected and it's giving us an ID for our client we come over here you should see the same thing client connected and a new random ID for that user so now we're actually connecting to this peer server and all this peer server does is it takes all of the web RTC information for a user and it turns it into this really easy to use ID which we pass between different places and use with this pure library to actually connect with other peers on the network so now with that set up what we can use is we can say my peer dot on open and what this is saying is as soon as we actually connect with our peer server and get back an ID we actually want to run this code and this is actually going to pass us the ID of our user and inside of here let's move up our join room code and we'll pass in that user ID whenever we actually join so now if we save come back over here and we go over to our other terminals so we can see what our user information is we refresh here and we refresh down here and we inspect the console you can see that it says a user connected and it actually has an ID of the user and this is a unique ID if I were to refresh this page you can see I get a brand new ID because it's a new user of being connected to this exact room so now we actually have IDs that we can use to connect between our different users and actually make calls between them so now let's get into the fun part of this application which is setting up that video call connection and the first step is to render our own video on the screen so that's actually fairly straightforward to do the first thing I want to do is get a reference to that grid so we can just say document dot get element by ID we just called it a video grid this is going to have the place where we place all of our new videos and then we also want to get reference to a video so we'll say comes to my video is equal to document dot create element and we want to create a video element but most importantly we want to make sure that we take my video and we want to move this so we're going to say muted is equal to true because obviously we don't want to listen to our own video that really doesn't make sense so we're gonna make sure we mute ourselves and this isn't gonna mute us for other people it just mutes the video for ourselves so we don't have to hear our own microphone play back to us because obviously that would be really really annoying now the next step once we have that done is to actually try to connect our video so we can just say navigator dot media devices get user media and what this is going to do is take a options parameter here this object and we need to say that we want to get video so we'll say video true and we want to get audio so we'll say oh sure because we want to get our video and audio to send to other people and this is a promise so it's going to say dot then and it's going to pass those a stream and the stream is going to be our video and our audio and we want to tell our video object that we've created here to actually use that stream so let's create a function to do that we'll just come all the way down to the bottom here and we'll say add video stream and this is going to take in a vo and it's gonna take in a stream and now all this is gonna do is gonna take our video we're gonna set our source object equal to that stream this will allow us to play our video and then we want to add an event listener to our video so I'll say add event listener this is gonna be unloaded meta data just like event and this is going to be a function and all we want to do when this is done whoops there we go is we just want to say video dot play essentially what's saying is once it loads this stream and this video is actually loaded on our page we want to play that video then what we want to do is we want to take our video grade and we want to just append our video on to the grid of videos we already have now if I save this come up here make sure we call that add video stream function with my video and a stream we should actually see our video being appended to our page and as you can see that video just popped up and you may need to actually approve the camera permissions as you can see I here I have it allowing my camera to be used and the first time you load the page it'll ask for permission to use your camera and microphone but I've already given myself permission on localhost 3000 so I don't need to see that pop up but you most likely will see that so don't be alarmed that's perfectly normal and just browser behavior now the next thing we need to do is once our stream and video is set up we need to allow ourselves to be connected to by other users so we need to again use socket IO oops a socket dot on and we need to do this user connected event the one that we have down here we were just printing out our user and it's going to take in a user ID so we already have this event set up on our server working properly so we can get rid of this test code down here and when a new user connects we're going to call a function called connect to a new user and we're gonna pass in our user ID as well as our video stream that we want to send to that user that we're trying to connect to because the new user has joined our room so we had to send our current video stream to that user so I'll just come down here we'll create that function function connect to new user it's taking a user ID and a stream and now inside of this function we're gonna create a variable called call and this call variable is coming from our peer object so our peer up here we're gonna call a function called call and what this function does is essentially it's going to call a user that we give a certain ID to so we can say our user ID we're gonna pass at the stream we want to send to that user so we're calling this user with this ID and sending them our video and audio stream and then we want to listen to the event called a stream and what this event is saying is when we call this user we're gonna send them our video stream and then when they send us back their video stream we're gonna get this event here called stream which is going to take in their video stream so it's going to say you know user video stream in this user video stream we want to just add to our list of videos so we can say add video stream we want to add our user video stream as our stream and we're going to create a new video object this will say constant video is equal to document dot create element of the video so we can pass that video instead of here so now what's happening is we're taking the stream from the other user that we're calling and we're adding it into our own custom video element on our page and lastly we're gonna have to listen to on clothes and this clothes event all we want to do is just remove the video so we can say video dot remove what this closes listening for is essentially whenever someone beeves the video call they're gonna close that call and we want to make sure that we've removed their video so we don't just have random videos laying around from people that aren't connected anymore so now if we save I'll refresh this and everything should still work we have our video and if we go to the same room down here refresh you should see we get the video here but as you can see even though we're calling the other user we don't have their videos showing up and the reason for that is that we're not actually listening to when we get called we need to do is listen - when someone tries to call us on this my peer object so we can do that inside of here you say my peer dot on call so when someone tries to call us we're gonna get this call object we can work with all we want to do is answer their call we're going to send them our current to stream so we're going to answer their call and send them our stream so now let's see what happens we refresh this top one refresh this bottom one you can see this top browser is getting sent the video from the bottom browser up because a unit user connected but our bottom browser is not having any information about the top browser and the reason for that is we answered the call from our one peer but we're not actually responding to any video streams that come in so we need to say call that on stream we need to do pretty much the same exact thing this is going to be our other user video stream and then this we need to first come up here create a new video object to place this so I'll say document type create element which is a video we just need to make sure we add that video stream which is going to be our video element as well as our user video stream now everything should work if we refresh this browser you can see we get our just our self refresh down here and now we have both of these browsers communicating with one another so what's happening is we're able to receive calls by listening to our on call event and we're also able to make calls when new users connect to our room and if this user was for example in a different room called room you can see that no matter how many times i refresh this they're not added up here but as you can see by this frozen video on the right we're not actually closing our connection as well as we should be so we need to make sure we try to handle our video closes so that it works a little bit quicker but as you can see it took quite a while to disappear so in order to do this we need to go back to our server and inside of this socket our join room what we want to do is say socket not on disconnect we want to run another function and this function is going to be whenever our user disconnects from the server so this is handled by socket IO so essentially if I were to click the X button and leave completely or go to a different URL or whatever it is socket IO dot on disconnect is going to get called and inside of here I just want to send an event down to our room so just like before we have socket dot two room ID I want to make a broadcast event I want to emit a new event called user disconnected I'm gonna pass in the ID of the user that disconnected so now if I just come into my script we can just listen to that event will come all the way up here socket dot on user disconnected we should get a user ID I just want to console that logout the user ID so now if we put both of these users in the exact same room refresh everything we should get two videos now if we inspect come over to our console and we have this bottom person leave by going to a different room so we'll go to room again you can see we get that ID Priene printed out of the user that just left so now we can use that ID to try to remove the video call of that person since we no longer are connected to them anymore so in order to do that let's come into our script here and we need to keep track of which people we have contacted and what call they have setup so here when we connect to a new user we're gonna need to save some form of variable that tells us what the call is that we just made to that user so that we can remove it so what we can do is create a variable we'll just come up here when you say Const here's it's going to be equal to an empty object and then all the way down here when we connect to a user we can just save peers of that user ID is going to be equal to the call that we just created so now essentially every user ID is directly linked to a call that we make so now whenever we disconnect from a user what we can do is we can say peers of the user ID dot close and this is going to close our connection I just want to make sure that we only do this if we have a user so we could say if peers of user ID exist so if this is true then what we want to do is close the connection otherwise if this is not true then we don't actually have a connection to close so it doesn't make sense to call so now refresh down here refresh down here and make sure that they're in the same exact room you can see we have both users and now for this user leaves the room you can see that immediately the video was completely removed from up here and there was no long delay that we had to wait for it and that's all it takes to create your own zoom clone if you enjoyed this video make sure to check out my other project-based videos linked over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 549,921

Rating: 4.9518657 out of 5

Keywords: webdevsimplified, zoom clone, zoom webrtc, webrtc js, webrtc javascript, javascript project, webrtc tutorial, webrtc video, video chat js, video js, video chat javascript, video javascript, webrtc video chat app, webrtc video chat, webrtc js chat, webrtc javascript chat, webrtc tutorial beginner, webrtc, webrtc html, webrtc node js, webrtc nodejs, webrtc node, web rtc, web rtc js, web rtc javascript, webrtc project, video chat project, video chat js app, video chat node

Id: DvlyzDZDEq4

Length: 28min 52sec (1732 seconds)

Published: Sat Jul 25 2020