Create a ZOOM CLONE Using WebRTC & Socket.io

all right so in this video I'm going to teach you guys how to create a zoom clone using web RTC and node.js you can see in the example that there's two cameras and you can see them side by side so let's just get straight into it so in the source folder let's just create a new file or actually a new folder called client and then another folder called server so inside this client folder let's open it up in the terminal so we can go CD client and we go mpm and it V so then we could just do dot for the project name and we could also select vanilla and then we're going to add vanilla typescript so then once we're done we could just do mpm install socket.io Das client so that we can actually interact with socket.io that we're going to initialize on the server so then just click enter to install all the dependencies so now once it's done installing we could do we could run mpm run Dev and then let's start a new terminal and let's open up the server file I mean the server folder then let's run mpm init Dy to initialize the scaffold for the nodejs project and then we're just going to do we're just going to run a command called touch index.js so we can actually create an in index.js file and then we're just going to install the dependencies by running npm install socket.io close these Terminals and we we're not going to run npm runev on the server file yet because we actually have to finish writing the code so that we can actually run the code in the server yeah so now let's open up the index.js file inside the server folder so at first we're going to import the server the server class from socket.io and then we're going to initialize a new server called IO and then we're going to allow a cross cross origin so that we can actually allow our website to actually send requests to the socket.io folder so now we're going to listen for requests and then once we get a request we'll listen for some events on this socket so once we actually have a socket connected we'll we'll check for the join room connection or the join room event so that we can actually join the room so you can see that in socket.io we can invite sockets into rooms that they actually pertain to and these different rooms we will be using for the actual Zoom clone because different rooms have different users and these different rooms because they have different users can send data between these users using socket.io so now once a user has connected so yeah you can see that once we're doing join room we're joining the room and we're also broadcasting a user connected event so that everybody knows in this room that a user has connected and this is simply just running for everyone else inside this room that's not the user so then we're also going to Once We join the room we're going to listen to a call offer event right here and then we're also going to do a broadcast if we get a call offer so we're just going to resend the data back to the people to the other people inside the room and then we're going to do a call answer which we're basically going to do the same thing but right here you can see that I'm doing this line but that was just really for debugging and it doesn't really have anything to do with the code and now we're going to do new ice candidate and we're going to do the same thing just transmit it back into the rest of the people inside this room and then once the user has disconnected we're just going toit user disconnected right here and you can see that once we're done with all the events we're just going to listen on Port 300 I mean on Port 3,000 so that's really it and now we can close this file open up the terminal and inside the server folder let's run npm or actually node dot so now once it's good you can close this and let's open up the client folder so at first let's create a file or actually let's delete all the all these files right here so let's delete every single file that is in the main.ts and also the VM v.t. D.S file so these two files should be the only thing that you have in your Source in your Source folder let's go over here let's make a socket. TS file let's open it up so first thing we're going to do is import IO from the client and then we're going to create a socket as a connection to the Local Host so now we can actually save this file and we can close it and let's create another file called Web we're going to create a servers object and we're going to have some ice servers connected to it so that we could actually have connection between the users and these stun servers you could ref further I'm going to have some Link in the descriptions for some actual like documentation and here we're going to export a Greek perer connection using this data so now we can actually save this file and then let's create a new file in here called main oh actually let's just open up the main.ts file and let's just remove everything so then the first thing we're going to do is import everything we need so we're going to import socket and also PC from the files we created previously and then we're also going to create a remote stream object which is going to be def by default a n and this remote stream is just going to be a reference to Media stream that just collects the data from the user's camera so then we're going to create a call ID and also a user ID right here and you can see that the call ID can be null and the user ID just is a string and we're going to say that if the call ID is not is null so if the if the call ID is not included inside the URL so what we're going to do is say that the call ID is something and we're also going to push state so we're just going to push to an ID room to a room where the ID is actually valid so just to see this out just to see this play out we're going to open up the web server right here like this so you can see that if you go to the link you can see that we're automatically relocated to an a place with an ID so now we can close the terminal and then the next thing we're going to do is create some constants one of them is going to be a webcam video and the other one is going to be a remote video and these two pertain to different elements that we're going to create in a while so then we're going to say if the webcam video is not null we're going to say that the webcam video is muted because we don't actually want to listen to our own audio so then we're going to get the media for our device so we're going to get access to our video and our audio using the get user media function that we have on the window so then we're going to await this and then once we have awaited this we're going to set the remote stream to this media stream that's just empty and we're just going to say that the local stream. getet tracks so we're going to Loop over the tracks that we have on the local stream so right here we have the local stream right here and this includes the audio and also the video that we get back so what we're going to do is just say that we're going to have audio and video that we're going to have in our webcam so then we're going to say on track so we're going to listen to a p so we're going to listen to this every time we get a track added to us we're going to add it and we're going to also console the event so what we're basically doing is waiting so basically what we're doing is waiting for a a different peer to connect to us and send us the audio and video so that we can actually add it to our remote Stream So then we're going to say if the webcam video and the remote video are not know we're going to set their object their source source object to this and then we're going to just admit that we're going to join room and we're going to contact the socket saying that we want to join the room actually so we're just going to provide the caller ID and also the user ID so then we're going to wait for the event that the user is connected so once the user is connected we're going to create an offer and actually send them some of the data that we have so we're going to actually send the call offer to them so then we're going to say so once we are the user that's getting an offer we're going to say that we want to actually get the answer we actually want to create an answer this call offer so that we can actually get some of the data and then once we have answered this we're going to send back a call answer event so that the user that has sent the offer can react to it so then once we are the user that's reacting to it all we're going to do is just set the remote description right here so this basically what this basically does is receiv receives the data from the user that we have so we're getting the data from so we're getting the information from the data uh from the user from the other user like their camera and audio and we're displaying it inside our our PC which if you remember we're we're actually listening to the track function so then we're just going to say user disconnected so every time a user is disconnected what we're going to do is just close the remote Stream So then we're going to listen to new ice candidate and this is basically just another event that we have saying that we want to add ice candidate what we're basically doing is just making sure that everything works well inside of our project so then we're actually going to send new ice candidate to our socket every time our our PC or connection to a web RTC is actually refreshed and actually has a ice candidate we're going to emit it and we're actually going to get it right here so you can see that there's a clear communication between user to uh user to user using socket.io so now you can save this and we can actually close this file and now we can open up the index.html and what we could do is just in the app folder in the app div we could actually expand this right here so then the first thing we're going to do is just create a header so that all we're going to do is just a simple header and then we're going to create a section that contains both videos of us our webcam and of the actual user that that is going to send the video so then the first one is going to be you obviously this one is going to be m muted and it's going to be your webcam and the other one is going to be the other person that Tunes in to your video call that you share the link to so now we can save this file and now we can actually open up the server so now let's click allow and then copy this link over here paste it over to here and you see it should work and you can see that the audio is echoing a little bit because both calls are receiving the audio but it works thank you guys for watching I hope this video served you value let me know in the comment comment section down below if you guys want to see any extra videos let me know if you have any ideas any requests I'll surely get back to you as soon as possible thank you guys I hope to see you in the next one

Channel: Daniel Gorra

Views: 106

Keywords: Coding, Programming, JavaScript, React, Svelte, How to code, How to, Learning

Id: f1w2SbOWwOA

Length: 9min 40sec (580 seconds)

Published: Fri Apr 19 2024