Want to make a video chat app? Watch this video for WebRTC!

good morning developers if you are new to the channel my name is Rob and in this video in one hour I'm going to give you everything you need to make your own web RTC application and the structure is going to go like this first of all we're going to talk about what web RTC is you may already know what some things are you may be confused or or don't know what some are if you're like me I started learning back in 2015 and back in those days I thought I knew what stuff was but I was confused I just didn't know it so this will allow us to to make sure that we are on the same page about what it is and what it's capable of the second thing we'll do is I am going to draw out the entire process from beginning to end visually in as simple of terms as I possibly can so we'll have a browser over here could be a PlayStation 5 it could be a Windows desktop we'll have one over here it could be a Samsung phone it could be a MacBook Pro right they're somewhere on the internet they're not connected how do we get them connected and this may be the most valuable thing in this entire video for you you because at least for me it's what I needed so bad back in in those early days is is for someone to break it down in a simple term what typically happened was there weren't there wasn't near as much uh information available then but I would go to the docs or a tutorial and I would start reading and I would run into ice candidate oh okay I don't know what that is so I'd click on it and it would take me to another page and I would start reading there and they St they talk about stun servers and turn servers and I'm clicking on more links and 3 hours later I have literally 50 tabs open and I have no idea what anything does and so I go hide in the closet until I'm brave enough to to try again so we want to avoid that right that's not necessary because it it is going to be a lot of new material but it's not that complicated it's just going to be different because you're used to http you're probably a web person and you're used to doing things on the web this is this works a little bit differently so we'll talk through those Concepts and then third I have already made a project project and I will I will help you pull it down I will help you get it running and then we'll talk through it line by line we are not going to code together okay and if that doesn't sound interesting to you please let me explain typically when I teach something new I would like to start with a A an empty folder and you type every single line along with me I everybody has been there at least it seems to happen to me a lot where I want to learn a new thing and and the the teacher says hey go download this Repository npm install pip install grade you know whatever and then we make a new file and we start coding and I'm thinking hey you can't do that to me I I don't know what what happened in all those files we downloaded there there's 15 here and do I always have to use these do are there security concerns are there dependencies in there that I don't know about did you make architectural decisions what's going on here uh we never talk about it okay that's not what we're going to do right that really frustrates me because I want to be able to apply this and I want you to be able to apply it as well uh I'm going to have you pull the code down and we'll talk through it line at a time but we're going to do that last because I want to go through conceptually how it all works first and there are two reasons why I'm not going to code with you the first reason it is a really big distraction when we're working on something that's got all these new Concepts you're going to be working hard to try and figure out what all the pieces are right what what's the signaling server's job why why do we need it what is the connection what are its methods again adding in coding and really what you're going to be do is typing because you're going to be trying to keep up with me if if you are typing you're going to you're going to make typos your code's not going to work you're going to pause me you're going to be trying to compare our screens and that's just a another layer of complexity that we can get rid of as i' I've had a lot of success with this in these these types of situations the second reason is when you are ready to to code line by line but the second reason is because it takes a really long time to make a web RTC app line at a time for someone who is brand new okay if you are ready or when you are ready to do that I I have two options for you one I am making a playlist on YouTube okay it's not finished as of the making of this video it might be when you're watching this and if it is I'll link it and you can go through that whenever you are ready there you go if it's not ready and you are ready to keep going and you want to learn from me I also have a udemy course now it costs money uh I'll put a link in with a coupon it'll be $10 to $13 something like that uh and and that is ready to go right now so that may be the only option you have if if you want to wait for the playlist that will come out I I'm just not 100% sure on on when it will okay so that's the structure we're going to do what is web RTC we'll talk through how does a connection happen how do we get the video feed to go and then three we'll we'll walk through the code one line at a time okay so what what is web RTC we'll look at the docs here in just a second but real quick it is a way to do a video chat in the browser it it allows us to pull down the feeds and then send them directly to another browser and it is awesome it still blows my mind that literally in one line we can pull all this this data back it takes a lot more to send it but we will get to that okay let's look at the docs quick web RTC this is this is Mozilla so the these are the mdn docs but web RTC stands for web realtime communic is a technology that enables web applications and sites okay we'll stop there web right it's in the title web RTC and they are for web applications this is a browser thing web RTC exists entirely in the browser now we are going to need a server and I will get to that but that's not strictly speaking part of web RTC web RTC is a JavaScript API so if you have a browser right a a Windows desktop a Linux desktop an iPhone a PlayStation 5 maybe you've got a coffee maker with a browser in it right whatever you've got it is a browser thing that runs in JavaScript and it's part of the language okay we don't have to install anything it comes but it's not node it's not C++ there's no servers involved strictly speaking in the web RTC part though again we are going to need one web RTC is a browser thing okay it allows you to capture and optionally stream audio and or video and and then you can also exchange our data without an intermediary okay so we'll stop there for just a second I am going to divide web RTC up into two pieces there is that that first part they meant capture okay and that is get user media I will refer to it at times as gum but get user media is how we can pull down the camera feed we can pull down the mic feed and we can even pull the screen down okay this is incredible again it it's one line literally to put this inside of a variable doing stuff with it is a little more complicated but get user media allows us to get that stuff we have to ask for permission it would be really bad if if we didn't because you know that that would not be safe but once the user grants permission we have this stuff and then the second part there was optionally stream audio and or video media without an intermediary so the other part I'm going to put PC here that is short for peer connection this is there's literally a JavaScript object called RTC peer connection we are going to make one we'll call it peer connection and this is peerto peer okay what does that mean well in the old days this is how it worked uh because video chat has been around for decades I mean it wasn't very good but you could do you could add a Skype plugin in the browser or something like that we don't have to do things that way anymore because this is how it used to work you have client one and they want to have a video chat with client two right browsers in order to do that we had to have a server and it its purpose was no more than you send me your audio video feed and I will send it right on through to the other client you send me yours and I'll send it right on through to the other client right that's how it worked is we had to pass it through the server but this is obviously silly because the server's only acting as a pass through so this creates a whole bunch of complications it increases bandwidth right or it increases latency it takes time to send it here and then time to send it here instead of just going straight there there's potential bugs that that happen on the server if the server goes down the SE the connection would be severed even though the browsers are still okay there might be security problems right there a whole Myriad of things what web RTC allows us to do is get rid of that we will create the peer connection that's the dot here and then we will connect directly to one another and pass the stream back and forth this is as fast as you can possibly be because the computers are connected directly to one another okay exciting stuff that's the peer connection part the the gum or the get user media is getting the feed and then this is passing it back and forth okay a couple things to note here quick this connection is UDP and I want to talk about that briefly web RTC uses UDP p and that stands in contrast with TCP which you probably are more used to working with if we look at the docs again quick it says at the bottom there it says we can exchange arbitrary data between browsers okay does that mean that you you would use this and you could pass files back and forth instead of using websockets or socket.io okay the answer to that is no because it is UDP based what is the difference between UDP and TCP well HTTP again that's probably what you're familiar with as a web person HTTP is buil built on top of TCP and TCP is reliable it has acknowledgments built in it is stable so if there's uh latency it will introduce latency if the network is overwhelmed Etc okay TCP is good because it can guarantee a lot of things and you think well Rob these are all good why why would we always use that well because UDP is fast in all capital letters it doesn't care about those things it sacrifices nothing for Speed okay why would you want that well think about it if you're on a zoom call or a video conferencing or whatever and suddenly everybody freezes because your internet's gone down and it's down for 10 seconds when it comes back up do you want to pick up where you left off and people start talking again just like you unpaused it no you want to pick up exactly where things are at right now and you and you maybe have to say hey sorry um my internet went down I missed the last 10 seconds but you'll be live same thing with an online video game that can't be TCP because if if you're in a fight when your heroes in a fight and your connection stops the rest of the world doesn't wait for you to catch up your your hero might die or your city gets taken over but then your your internet connection catches up and you need to know exactly where things are at so you can start playing again we use UDP on these connections websockets and then we're going to use socket.io uses TCP so they are very much compc ment they do not compete with one another you you you never usually have to make a hard decision about whether to use UDP or TCP this is fast and unreliable this is reliable it's still fast it's just not as fast as as UDP okay so that is a brief overview of what web RTC is we have two browsers that we can pull down their camera their mic or their screen we can connect directly to another browser and pass it back and forth so we don't have have to send the video feed up to the server right more latency maybe security maybe you don't want the server to have your video and it makes it as fast as possible okay let me clear this out and let's talk through how the process works so we've got our two browsers somewhere on the internet client one client two we don't know what device they're on we don't care they're at our website which means they're they're running a browser and they want to have a t conference or a video chat and we are going to use web RTC what's the process for that to happen What are the components how how does everything work together again this is what I wish someone would have shed me about 10 years ago when I first started working uh on on this stuff watch it as many times as you need to because it's it's conceptual like this piece does this and so on it will really help when we go and we code I have a file called task list. MD in the GitHub repo I've got a link down in the description but I'll put it up here uh real quick there are 23 points here there aren't really 23 points because we do the same thing on both clients we just do them in kind of different orders so it's really about half that but you can refer to that as we talk through things and I will I will try and mention some of the numbers uh I'm not going to write them up on the board because we're going to get messy uh as it is okay we're going to approach this by asking the question if I'm client one I need to know what in order to get to client two what web RTC stuff do I need to have in order to establish this connection okay the first thing is I need to know where you are okay client one needs to be able to find client too we'll come back to that the second thing is I need to know what you are sending okay if you think about this like if you had a Brazilian person who was going to call a Chinese person on the telephone the Brazilian person is going to talk in Portuguese and the Chinese person person is going to talk in Chinese and that's not going to work they're not going to be able to understand each other in fact they'll frustrate each other so if client one here is going to talk to client to and they're going to be on different devices at least potentially right an iPhone and a and a Linux desktop they're going to have different codecs they're going to have different timings we need to not only be able to find each other but we also need to communicate hey this is what I'm going to send to you so that you can make sense out of it okay those are the two things that have to we have to solve and this big long list we're going to have over here is going to solve those two things okay so the very first thing that is going to happen is that get user media somebody has to start a feed give the browser permission to pull down the the video audio or the screen feed okay we are going to block the app until that happens technically you can you can do some stuff without it but I'm going to block it until someone gives us access because we can't we can't do anything with the perer connection if we don't have anything to send okay that's number one on that task list number two is to create the peer connection and I'm putting a line under it we are going to pass or or do a bunch of stuff with the peer connection this thing is really really important and I'm going to draw a DOT here on both sides that is our peer connection that's the thing or sort of like the network socket that that is going to connect to the other side this thing has all the cool methods and and all of the stuff that we need it's the capable part okay that's that's step two step three we are going to pass stun servers to the the peer connection okay first scary term at least it was for me because I kept running into it and I didn't understand what it meant okay we have an issue here so coming back to the where are you could you just give the other person your public uh IP address you can't because of something called Nat so there's Network address translation there are also firewalls and there is also vpns okay these two you may know what they are you may not vpns mask your IP address so you're sitting in front of a different IP firewalls or for security it kind of works the same way Nat well back when uh IP ipv4 was created in the early 80s there were 4 billion IP addresses okay it's ridiculous astronomical number we'll never need that many except we do we have way more than 4 billion devices connected right now so we don't have enough IP addresses to go around so at the very least coming in here and hitting this you're not going to be able to get to this with a public IP address you're going to hit some kind of router and the router is going to be in charge of I've got this device over here on it got this device yes I have this device and so on so we need to figure out how do we specifically get to this client otherwise we're going to be sending the feed potentially to the wrong place okay so this creates a problem and the stun server is how we solve that problem the stun server stands for session traversal forn okay so remember this connection which is not established yet so I'm not going to draw it all the way across this is UDP and what we do is we go out to we're going to use Google stun servers there's a bunch online they're free almost all are free to use cuz they're super cheap but its job we're going to have our client or rather our peer connection we're going to pass the stun server it's going to go out and say Hey Google stun servers I want to tell somebody how to get to me could you please figure that out right trace a route and then I I'll be able to tell them how to get here Google will do that and it will send back what are called ice candidates okay so another scary term ice stands for interactive connectivity establishment it's really really fancy way of saying hey I found a way for you two to connect if you give somebody this ice candidate it will be a route to get to you okay I'll show you when we get to the console but that is what the stun server does now we're not going to use this for a while because we have no way to get it to them we we can tell them how to get to us but we don't actually know how to give it to them yet so we still have a a ways to go but we're going to pass the stun server when we create the peer connection and it is going to generate some ice candidates so we can answer this question here's how you get to me so rather than where are you we are going to get to that but we're going to answer the question here's how to get to me okay so those are our first couple number four is we need to add the tracks okay and adding the tracks maybe that sounds a little bit confusing but when we run a get user media we create media tracks and these are very common JavaScript things they they've been around for a long time they're not new with with web RTC but a media track it can play inside of a video tag we need to take those tracks and we need to add them to the peer connection okay you'll see why in just a second but when we are ready to start sending uh sending data over to the other side that's what we're going to send are the tracks that we added to that peer connection again this dot I'll make a a note here that is the peer connection so we've given it stun servers so that the stun servers can find out how to get to this computer we've added tracks so that once we've established the connection the peer connection has something to send okay now we're going to we're going to answer this other question what are you sending well once we have added the tracks we are going to on this side create an offer okay maybe sounds scary let's break it down because it's not too bad what is an offer well we're going to go a little bit further here and go to another uh another scary term web RTC has an RTC so realtime communication session description I'm not going to write the whole thing out okay an RTC session description is an object and it has two things it has a type and it has an sdp okay what does that mean well the type is going to be one of two things it is a string of offer or answer so whoever made it and who Whoever has it will know which side this is the other thing stands for session description protocol and the session description protocol has the answer to that question I am sending this codec so that when you get the video feed you'll know what codec it's in it has the timing information so there's no reason to go into that that detail now but this sdp is is going to be on client one this is what I'm going to send I'm going to get it over to you to client 2 so you'll know what to expect client 2 is going to do the same thing except instead of an offer it's going to be an answer it's again it's an object this side when we create the offer is going to have a type of offer along with its feed information we can't create this until we've added the tracks technically you can but it would be useless because the sdp would be pretty much empty I've done that before client 2 is going to do the same thing going to create the answer which is going to have a type of answer and an sdp with its information we need to get them to each other so again the where are you that's the ice candidate we're going to we're going to get them to each other this sdp and that will answer those two questions okay so we create an offer which comes up with this RTC session description which has the type and the sdp in it okay another uh I'm going to call it kind of tricky thing the peer connection let's actually put it uh let's put it underneath peer connection there is a local description uh it's actually a method called set local description that belongs to peer connection and there is a remote description okay the local description means this is my RTC session description so when this side creates an offer it is going to run set local description and it's going to hand the the peer connection this so that the peer connection knows my type is this and my sdp is this once client 2 sends it's over we're going to run set remote description and we're going to set its RTC session description which has its type and its sdp okay again I know there's a lot of stuff here but it it's it's really just answering these two questions stun an ice candidate we got to go out we got to find out a way to get here Google could you please tell us here's an ice candidate that's a way to get to you great got it we need to add tracks to the connection so that we actually have some data we need to create an offer an offer is just this thing the offer has the type in the sdp the sdp is what I am sending or the the the the format so to speak and we're going to have to hand it to our local once we get theirs we're going to hand that to our remote okay that's how the peer connection works on the client side I think that takes care of us up through number seven from number eight and number nine we get into sort of the the other side of it here or the the side that as I said we have to have a server sort of okay how are we going to get these we need to send this thing over to the other side we don't have any way to get to them and we don't have any way to give them our ice candidate so that they can find us so what are we going to do this is where the signaling server comes into play okay and this might be confusing but it is not part of web RTC the reason for that is because once you have created this once you have the type and and the codec information you can get it to the other person any way you want technically if you wanted to you could print it off in the console you could copy it and you could paste it to Twitter and then anybody out there could could paste it into their own app and start a web chat that's silly but you could do that they give the example in the docks of of carrier pigeons back in the Middle Ages you would tie a note to a bird's ankle or or or foot and it would fly home and that's how you could send messages back maybe if you were at War you could do that you could train pigeons and you could you could literally write down your you know the object on a piece of paper it flies to this person and they take it off the bird's ankle and write it down and then put it in the console and then you could have your chat I hope no one has ever done that but you could they haven't established the way that you're supposed to do it but realistically the way that everybody does it is with a websocket server okay so we are going to create a socket.io server if you're not familiar with socket.io it is a a library that uses web sockets almost all the time under the hood I have a video on on why you choose socket.io over websockets uh I have other videos on how socket iio works and so on if that's interesting to you but this thing uses TCP so our connection between the browsers is UDP really fast want it to be live socket.io and websockets use TCP because we need this to be reliable we want to send some information up to the socket server and then over to client 2 and we need to make sure that it gets there okay what do we need to send we need to send those two things what are those two things where are you it will be the ice candidates what are you sending it will be this thing the offer the offer which has the type and the codec information okay why do we need this thing why do we need and I'm going to put on here the signaling server why do we need this why can't we send this because this is going to be a domain this is our website everybody on on planet Earth can get to this thing it's going to be our signaling server.com right or whatever whatever your signal or your your node server is going to be so we are going to send to the signaling server number eight and nine we're going to send the offer again the offer is this thing it has the type which is going to be the offer for client one in the sdp which is this client's codec information and as they come in we are going to send up our ice candidates this is the what I'm sending and this is the how to get to me the signaling server is just going to wait okay I've got your stuff great once somebody else comes in and wants to talk to you I will send this on to them we do not send the feed we only send the offer and the ice candidate up okay that is eight and nine in that task list now the next part is going to be over here for client 2 client 2 is going to is going to load up pretty much all the same stuff and I think number 10 is is joining the socket server that just means that we're going to take from client one over to client two I'll put here the offer and the ice candidates so these were sent up from client one to this to the signaling server they're going to get sent over to client 2 because both clients can find the signal okay so client 2 now has the remote client 2's remote is client one client one's remote is client two right the other side is always going to be the remote that means client two has an offer so what does it need to do it needs to run get user media needs to needs to create its own feed its own audio and video and so on it needs to create its own peer connection what does it need to add to the peer connection well it's going to have have to send stun servers why because we got to find a way to get to it because over here we have all these same problems we've got the Gat we've got the VPN and we've got uh the firewall to consider so this is going to need to to get its own ice candidates it's going to need to add its own tracks from gum to the peer connection so that once it's able to send stuff over it will have the the right media once it has added tracks it is going to put underneath here it is going to create an answer and an answer is the same thing as an offer but the type is going to be answer instead of offer okay so over here we've got an offer over here now we're going to have an answer they're going to be the same object different type and then they're going to have their own respective STP to let the other side know what is being sent okay once we've got that this side now has everything it needs to set the local description which which will be the answer this side creates the answer I'll put Dash local and down at the bottom I'll put offer and the offer will be the remote and it it is ready to go in terms of I know what they're going to send the ice candidates were sent over to me so I know how to get to them so I am ready to go okay it needs to send its own answer up to the Ice uh up to the signaling server so we'll come from this side over here send up the ice candidates and send up the answer right the signaling server takes that and says hey client one I got good news for you somebody sent me an answer and somebody sent me some ice candidates okay so over here now we have the uh offer is the local on this side and the answer is the remote on this side as soon as that stuff has been passed on through we have answered both of these questions from both sides both sides have a local and a remote a local and a remote which means both sides know which type they are which type the other side is they know what their codec is and they know what the the other s side's codec is with the ice candidates they know how to find each other the signaling server is now done and this connection can finish okay I'll go over it one more time watch this video again if you need to I know this looks crazy right if you just watched it for the first time if all these concepts are new I I get that it's overwhelming it took me a long time to figure it out but the the process is really really comes down to this the browsers cannot find each other on their own they need the signaling server the saket iio server to help out because that has a domain they do not know what the other is going to send somebody has to communicate that to them that's the signaling server's job okay client one client two they both go through the same process get some media create a peer connection give that peer connection some stun servers so that we can create ice candidates so I can tell the other person how to get to me add tracks to the peer connection so we are actually going to send something when when we finally get this create an offer if you're over here create an answer if you're over here that thing is your RTC session description is going to answer this question take both of those things take this the offer or this which is the answer on this side take the ice candidates which you got back from the stun server send them up like we already talked about that send it up once both sides are connected send it across make sure to set the remote because you got the other sides now I got the other sides and you'll be connected okay it is it is gonna seem like magic the first time I totally get it as you work on it it will make more sense let's go look through our code I am over to github.com and this link will be in the description so you can follow it or you can type it in github.com Robert Bunch which is my username and then the repo name which is/ webrtc DST starter I don't use any third party stuff at all I've kept this as absolutely simple as possible I can't stand it when I'm I'm trying to learn something new and there's a bunch of third party stuff in there and I have to make accounts and I you know again I I want to know that I can reproduce this so I've kept this as simple as possible so hopefully it will be useful to you beyond this video uh but I want to help you get the code and then we'll talk through briefly what assumptions uh I have made if you know how to clone repos and that's what you want to do go ahead and do that otherwise click on the green code button and click download zip and that will download download the code to wherever your downloads go you'll need to extract the folder out of the zip file and put it wherever you're you're going to work on it so while you are getting here uh I've got it open I I left it inside of my uh my downloads folder you can see the path there that's where I'm going to work on it put it wherever you need to um the things you need to know uh I am on my Windows machine it shouldn't matter I hope because I uh for the terminal window am going to use Powershell if you are on a Windows machine and you're not using Powershell I would love to know what the reason is because I I can't stand uh the Doss terminal anymore you are on your own uh Linux and Mac users I think all the commands will be identical if there if there anything comes to mind I will make note of it but it should be exactly uh the same you have to know JavaScript I I should have mentioned that already but it is a JavaScript API it won't make any sense here if you don't know JavaScript you have to have no JS installed and for all of this stuff uh if you need help with with it uh I may have a playlist either in the description or on the way one of the two but um you have to have node installed I can link a a video on how to do that you should have it already um if you're looking for help on how to use node the same uh holds true there we are going to we we just have two dependencies uh and they are right here Express and saket iio yes make sure is there we'll talk about that in a second we're actually going to install that independently um but Express we need that in order to serve up our files that's why you have to have node installed um we also are going to use it for our socket IO server this is the thing you're most likely to be unfamiliar with um it happens to be something I'm passionate about so I'll have a playlist that covers it it is pretty straightforward and there's a good chance you'll be able to follow me um again it's not it's not strictly speaking web RTC it is the signaling server I don't think I've ever done a web RTC app without socket.io or websockets so uh you'll either need to be familiar with that or you'll need to just trust me and be able to follow uh follow along um let's go ahead and uh when you you are up and running go to your terminal window uh and in the folder uh that that has the the code in it in my case it's web RTC starter main run npm install to install a socket.io and uh an Express okay and I'm going to use nodemon um you can use node node Monon is uh I strongly suggest it if if you don't use it uh it will restart the server if uh you make changes but if we run it on server.js we will get an error and it says ct. key is missing so I'm going to kill the server here and hop back over to server.js and you can see here on line three I'm running https not just HTTP uh scroll down a little bit further here I am running on Port 8181 so we'll get to that in a second but I am assuming we're going to run this on https if we come back over to the docs quick to get user media so you can just search for get user media this is the the URL but it says right here this has to be run in a secure context this feature will only work in HTTPS some browsers will support local host some won't so I'm just going to assume we're running it on https and then we we will all be on the same page so in order to do that if you come over to the GitHub repo inside of tasklist MMD which we we looked at briefly earlier up at the top here I have the the process for installing uh or setting up https on our on our local here I'm going to copy this command makert DG come back over to the terminal and I am going to paste that in the - g means it will install globally so you can use uh makert anywhere uh on your computer we come back over let's grab this number uh two create CA this will create the certificate Authority not the actual certificate yet so you can see it creates these two files here ca. key and CA doert if I open this up they are right here so you want to see those inside the the root of your your folder and it'll be some ridiculous uh hash okay it it will not be readable at all and then lastly we can actually create the certificate now now that we have the the certificate Authority so grab number three paste that in and then it will create those two files uh that that we saw a minute ago okay so if I run nodemon on server.js again you you should hopefully have no errors which is what we want to which is what we want to see so if you come over to Local Host 8181 without an S you will get this page isn't working because we're not serving it up on regular HTTP if you put in HTTPS you will get this screen okay and if you want me to go into more detail about how makert works I have a video that I'll link in the description as well but it is going to who whatever your browser is it should say hey this is trouble uh I I don't know that this is safe okay if you click on not secure up here it'll say the certificate's not valid that's because we made it and it isn't signed by a trusted Authority in my case Chrome has no idea who who signed this it was my local so you're going to have to uh proceed and trust yourself or you you won't be able to actually see the application but that brings us uh to the to the page which loads up if I'm going to I'm going to grab the console here quick um okay I'm going to click on call this is how the application is going to start but it is going to but I got a little ding there um it says the device is in use I'm going to have to disable my video stream uh in order to show this I will be right back I have refreshed uh my page and if I click on call I have already allowed it but it probably will ask you if you you want to give permission uh you can see that up here this uh this little uh icon says hey you know these are the cameras that you have allowed just sort of for future reference you can see my very my green screen that needs ironed badly and a whole bunch of chatter down here okay so we've got the feed coming through if you copy this uh link I have opened up an incognito window and pasted it in um back over here I've just I've generated an arbitrary number uh for for the users so we can keep them separate this is 71391 I'll refresh this there we go we get something different there 28885 if I click answer here um because this is Incognito it'll want to make sure that I'm okay with that and we have the feed on both sides except this is not all that helpful because it's the same feed how do we know that it's working well I'm going to refresh this and get rid of that we're going to come back over uh to server.js here and line 24 I I'm I'm going to take you quickly through this so that if you would like to run it on another device I'm going to run it on my phone more than likely you have a phone with a camera in it you can go through this process uh I'm going to uncomment that inside of of our core's origin here and we need to put our local IP address so whatever Network you are on you should not expose your your public IP address that is not safe uh but if we come back over to the terminal uh kill the server and on Windows you run ip config uh on a a Linux machine it'll be if config but you need to find your local IP address which probably starts with 192168 depends on on how your network is set up what your Cedar blocks are and so on but this is my local IP yours will probably be different so you'll need to do a little bit of that leg work on your own but if I paste that in here uh I can now come to this URL instead of Local Host go to this colon 8181 uh and and my phone as well as my desktop will be able to to hit it okay we need to go over to scripts.js and we need to change that here line six so I'm I'm going to comment out line seven comment in line six and I've got that same thing local Dev IP here I'm going to paste that like so again don't do this public that's not that's not safe do your your internal IP address and and that is okay okay so run the server again so noon on server.js we'll come back over here and refresh okay that that initial call is gone it doesn't work anymore because we're not running at Local Host we're now running at 192 so you need to change this to whatever your local IP address is again mine is 1921 1681 144 um it's going to give us that same same oh no are you sure this is okay we're at a different domain so Chrome is doing its job in my case click Advanced proceed and I am back to where I was I am going to load this up on my phone so I'm going to click call my feed will show up here let me punch this in okay I get that same uh I'm afraid that this is dangerous I'm going to proceed tap the green button and there we go you can see let me get rid of this uh okay here I am on my phone and there I am on my webcam uh this is weird so I'm going to get rid of that you should be in business uh at this point where you've got uh your own feed locally here and then if you want to run it somewhere else over here you can if you want to use Local Host that's fine um again I prefer when I'm doing web RTC to be able to test it out this way so you should be up and running uh on on your local so that now you can Tinker with it if you want to if you want to check console. logs and so on to see what your stuff looks like what we did uh is back in task. MD uh we installed makert globally we created certificate uh with these two lines here and then I have line four optionally to run it locally update the files with your local IP address that's in those two places uh here in our cores or origin on the server and then in scripts uh when we connect to the socket I uh IO server okay we also ran npm install to get Express and and uh and socket.io going okay so let's talk through our code um index.html there's no reason to look through any of that stuff index.html is our first file and this is being loaded up by our Express server so we'll come back to that in a minute uh but we have just a bunch of HTML tags I am using bootstraps so things look a little better than the other might uh we've got some bootstrap stuff here this is where the username goes I put that in there just so that you can keep it straight if you're on the same computer running running two different tabs you'll be able to tell which is which this button here uh is what is that that call button so hopping back over here that's that blue call Button there's a hangup Button as well right next to it and then the answer uh div this gets populated as more offers exist on the server so this will add a new green button for every offer that exists this videoos div here uh our video tag is right there and that is for the local video this video tag is for the remote video okay we've got waiting here um if you initiate the call as you already saw uh it it will put waiting on there that's why I've got a little bit more here it's the same the same thing essentially just with a different ID I have autoplay plays in line and controls you can you can fill it with those if you want but this is where we're going to put the local feed once we run get user media once we get video from the other user we're going to put it in here in line 24 okay so this is all of the videos this is just the local and we have this waiting which will show up until uh someone actually answers on the other side okay that is it for the HTML down below we have socket.io this uh this is going to get added or created by the server we don't need to create that file that's built into socket.io or how it works our scripts.js file we will look at in just a second line 30 uh I have separated things out so that scripts.js is going to be pretty much the web RTC stuff and then the socket listeners right here is going to be the listeners that we add to socket.io on the front end okay so that's why we've got both of these files it just keeps things separate a makes things a little bit easier uh to find okay so please let's uh let's go to scripts.js uh like I said I have a username and a password Here the password is garbage I just included it for for part of the template I will show you where sakad looks for it as I said we generate a random number here uh between one and looks like 100,000 and then I just stuck my my name to the front of it you can you can do whatever you want with that if you want to change it we take that once it's generated and put it inside of that uh that div we looked at a minute ago okay line six um this is when we are connecting to our socket server so IO where does that come from we'll back over in scripts.js uh or sorry back over in index. HTML I mean this thing right here line 28 that is going to add the the io object to to the window so scripts.js we have IO because we have socket IO included right here and if we come back over here I can prove it to you if we open up the console and I console.log I it's right there we can do the exact same thing with window. uh the same object either way okay so that's where that comes from we are connecting to our signal server so the signal server has to be up our node server which is socket.io this has to be running in order for uh the app to not to not break otherwise JavaScript will will complain and we send an object so this first thing is the the URL where the socket server at the second thing is an object um and it has off and we send up username and password okay let's hop over to the server just real quick before we go any further just so that this is clear inside of server we bring in the fs module that's part of nodejs you don't have to do anything you don't have to install that that's just a native core module https is the same way Express we npm installed that remember that was in our package.json we create an app this is going to make us an Express app we bring in socket.io this was in our package.json so these are the two things that we we actually had to install and then line seven here app.use what that does is it tells Express that if you find any file in the current folder serve it up that's why when we come over here this our our index.html file loads up just fine because this line is here it tells Express Serve up all the the HTML the CSS and so on okay this part here we already looked at briefly but this is why we need the fs module uh the file system module we need to get the contents of these two files so that on line 18 we have our Express server which we run https we call create server we hand it an object with those two files and then we hand it the express app we created back here online 7 okay so this thing right here creates a secure https server that is going to handle static files as well as HTTP traffic okay so watch that again if you need to you can you can ask questions of course too line 20 is where we actually create our socket iio server so I call it IO and then we run socket.io that's the node module we imported back up here on line six and we handed our Express server that's the https server we just made we we give it a second thing here uh which is an object it has cores we have to put this in otherwise the browser won't be able to get here and then uh you give it a property of origin in this object with an array of all of the valid uh domains so right now you can come from local host or you can come from this local IP address otherwise um you you will get blocked and then lastly what methods are okay get and post methods are are what the the socket iio server will uh will actually listen for and we saw this already but this is running on Port 8181 so back over to scripts we send up the username and the password well on server if we scroll down a little bit the very first thing we do and this is Socket I own and I'm going to get away from here and back to scripts I just want you to know where this is io. on so IO is our socket IO server right here we are going to listen for this event the connection event you can think about this like in http.get okay you give it a route ex except here this is TCP traffic instead of HTTP traffic if someone connects we're going to run this call back just like in Express you'd have wck and res in here we just happen to have the socket right here is where you can pull out the username and the password which which are coming up in that o object okay so back over in scripts we are sending up this o object it has a username and a password the username and the password are right here on line one and two we send those up back over to server we have username and password as part of that Au object you can make decisions here if you want to disconnect them as hey you gave me a bogus password then it will disconnect the socket if you wanted to put the username in somewhere uh we we actually do use that we'll talk about that later um but that is we'll get away from sck iio but that's what the username and password are for they are not essential uh but they are nice uh nice to have that gets us uh to where we have our user username on the screen we have connected to our socket IO server we've sent up the username and password let's do the web RTC part now um just a convenience variable we grab the local video div and the remote video div because we're going to need these in a couple different places create a couple different variables um local stream this is a variable that's going to hold the local stream we're going to drop that in this element same thing for the remote stream we'll put it in this element the peer connection this is empty right now but that's where we're going to create our local peer connection so that the two clients can talk to each other line 19 I have a Boolean called did I offer um this is just again a convenience variable that we can send up to the signaling server it'll make it easier to sort and figure out who the offerer is and who the answerer is remember there's two sides to every connection uh that will do the trick there okay line 21 down to 30 remember we talked about uh the stun servers that's what we've got here the property though is ice servers so we have peer configuration when you create the peer connection which you'll see here in just a second it is uh in this function we're going to pass it this this thing peer configuration it is an object and the object has one property for us which is I servers and we're going to send it an array an array of one object that object has a URL property which is an array which finally we get down to our data it's it's multi-layered for for configuration options don't worry about any of that that's not important in this uh in this introduction the important thing here is that this is where you put your stun servers the stun servers if you remember will figure out how to get to us so we can tell the other client and these are Google's public stun servers you can use different ones if you want uh it's st.l and then this one is stun one. .l okay so we will use this I'll I'll reference it in a little bit but these are our stun servers that's why they are there okay we get to this part um const call this is a a function so we'll skip over top of it we have another function called answer offer we're going to skip over top of that we have ADD answer skip that fetch user media skip that create peer connection and then finally down at the bottom here uh we get Add Ice uh add new ice cand it uh we get down to line 156 so these are all functions and we will talk about them when we when we call them line 156 is the next line that we actually run um we grab the call button so that is an index. HTML that is uh this guy right here we grab that and we add an event listener we add the click listener so that when it's clicked on we will run the call function so come back up top here someone has clicked on that lovely blue button and we will run our call function we call await here so we have to have async I'll wait for this function to run remember I said I'm going to block the the the program until the user approves well let's go down and check out uh fetch user media it is uh right here so my line 81 fetch user media returns a promise so that's why we have that await there or we can have that await we return it promise and we have a try catch block here because we're inside of a on a sync line 84 this is that miraculous line where uh literally in one line um I have commented out uh audio there um but you could do it in one line you could you could get the users's feed it's mindblowing but uh we store in a variable called stream call a wait because uh this thing is going to return a promise Navigator is a native window object um geolocation uh if you've seen you search for pizza on Google and it'll say Google wants to know your your location the Navigator object is where that's at well media devices is also inside of Navigator media devices has the get user media gum method and you you don't have to hand it anything and it will automatically assume audio and video uh I've got the object here I have included video true and I have commented audio out because if you're running uh the same app on the same computer you will get some nasty feedback so you can uncomment that if you want to the reason I have it commented out is just to save you uh in case you're in a situation where where that would be bad this right here will is is what prompts the browser to say hey uh this website wants your your feed for your camera or your mic or your screen is that okay if they answer yes then the try will succeed we will grab the local video element scrolling all the way back up to the top here uh that is this thing the thing with the ID of local video so we talked about that already but that is this tag right right here it's going to grab that video tag and going back down to the bottom here here we are it is going to drop the stream over the the the SRC object of that element so this will play the stream and that's why it shows up immediately we take our local stream variable that was one of the lets we had back up at the top we just initialized it set that equal to the stream so that we can send it to somebody else later on and then we resolve the promise so the await can move forward all the way back up here uh when we we await resolve will make it so that we can go on to line 35 if back down uh back down here if they uh don't allow so they deny us access then reject will run uh and the and the promise will fail okay or the promise will will go through the catch so at line as of line 34 we now have our local video stream stored inside of this variable and we have loaded the feed inside of this uh this element what happens now well now we create our peer connection so line 37 we do the same thing oh wait so we got to we're going to block the program until uh this function finishes so let's hop down to that it is on my line 98 and you'll see there is an offer object here that's that's not going to come through this first time as you just saw whoever initiates the call will not send this which means it won't exist so sit tight we'll get to that in a second remember we called await so we have to return a promise and I've got I've got some comments here RTC Pier connection is the thing that creates the connection that was that that dot that that is very very very important we can pass a config object and that config object can contain stun servers which will F fetch our ice candidates line 103 we are going to create a new RTC Pier connection this is built into JavaScript so if we come over here I hop over in the docs RTC pure connection is an interface which is a fancy word for like a glorified object uh it represents a web RTC connection between the local computer and the remote Pier so come here if you want to see what the different methods are we're going to use a bunch of these add ice candidate add track add stream create answer create offer all all of that stuff is going to be here uh in the instance methods okay so we're making a new one of those it's built into JavaScript this is part of web RTC and we're going to pass it perer configuration perer configuration back up top here that was this guy where we have our stun servers so we are passing this thing into our RTC Pier connection we we set the remote stream to just create a new media stream that's a JavaScript thing that's strictly speaking not web RTC web RTC just uses them and then we overwrite the SRC object of our other video tag to that remote stream there's nothing in here that's why you get that uh that little turn turning Arrow until a stream comes through uh that that won't actually be populated okay line 108 um if you're following along in the the user task or the sorry the the task list here we have done number one we called get user media we just created the peer connection line three we have uh We've added our stun servers to it line four we need to add our local uh stream tracks to our peer connection so back over to scripts we grab our local stream we call get tracks get tracks is a JavaScript method this is built into every uh every media stream that exists we're going to grab all the tracks you will potentially have two you will have an audio and a video uh if you included both or you'll only have one if you only incl included one we're going to Loop through those okay again you'll have one or two call the one we're on track and we're going to call that add track method which I showed you back over here it is right here we're going to call add track and we are going to add some New Media tracks to our peer connection we give it the track and then we give it the stream that we want to add it to so back over to our task list that's line number four here we got these from our get user media we are going to add track to our peer connection which tracks all of the tracks that we pulled from get user media okay we're going to add a a couple event listeners here this one on line 113 is purely for your reference we're not going to we're not going to see this for a while um but the signaling State uh change is is useful if you're trying to troubleshoot signaling uh errors um I'm just logging the event and then whatever the new state is don't worry about that for now line 118 is going going to run whenever we we get a new ice candidate so this is built into to web RTC uh if you come back over here you'll see that stuff down here scroll down to events right here is the ice candidate um you can look at this uh if you would like to but every time a new one comes in and why would one come in well because when we created our our RTC Pier connection we gave it some stun servers so right here this will trigger this call back will run whenever a new one comes in uh I log that we found one I log the event if there's an actual candidate sometimes there's not just just in case um then we will send this up to the socket server we will come back to that again when it's socket iio time so lastly we're going to add another event listener this is the track listener coming back over here this is another event that belongs to uh the RTC Pier connection we can listen for new tracks that means a new track has come from the other side uh or or rather to the to the connection okay we're going to listen for that if it comes through we are going to add that track to the remote stream which is going to be exciting because if we scroll back up we set the remote stream here to that video tag so if we get a new track that comes from the other side and we're not even close to that yet but when it happens we will Loop through those tracks we will add them to our remote stream who cares about that well our remote stream is playing inside of our video tag that covers Us for that one lastly if there's an offer object there isn't so we'll come back to this later on we resolve our promise okay that is the create peer connection thing we build our peer connection we hand it our stun servers we create a new media stream for the other other side for when the time comes we we grab our local tracks and we add them to that peer connection and then we add some listeners these are all going to be useful as things happen they just haven't happened yet the signaling State changes we get a new ice candidate we get a new track Etc okay so let's come back up to the top here we've done two things lots of code we've already looked at let's do a real quick review We Run call when the user clicks on the call button that calls a fetch user media it does all that stuff once they uh once it has resolved then we run create peer connection it does everything we just looked at sets the the peer connection up passes the stun servers adds some listeners once that is finished we are going to try and create an offer okay remember this person clicked on the call button so we are going to assume they are the offerer not the answerer so line 42 we are going to await here connection. create offer this is built into web RTC so back over here go back up a little bit uh create offer it's right here if I click on that uh you can read about it uh if you would like to but it creates that sdp we talked about that it has the the web RTC session codic whatever options Etc uh and then any candidates already grabbed uh by the ice agent that is an async operation so we're going to wait for it I log it here so you can see it so I I I suggest go ahead click on call and see what that thing looks like uh I'll go do that in just a second once we have it we set the local description remember we have to tell ourselves our peer connection this is my sdp and this is my type a little bit later on we're going to run set remote description and hand it the answer from the other side and if you want to see uh set local description that is over here as well down here set local description and set remote description both so my line 43 is the offer just so that you can see it I have fired this back up going to scroll up here this is that RTC session description we talked about that but it has two uh two properties an sdp and a type the type is the offer a little bit later on it'll be the answer and then the STP this is if you want to click on that you can copy it come over here and paste it in and you can see need to turn word wrap on okay this is all the stuff that it knows about my video feed that's coming through all of the the timings and the codec and so on I don't want to look at that anymore so I'm going to close it on to line 45 did I offer that is true because this is inside of the call function and then we call socket. admit new offer and we pass it the offer that is the end of the call function that means at this point we are finished now you can see a bunch of the events have happened line 114 even though there's no answer line 114 151 1920 happened if we come over and scroll down there line 115 a signaling State changed so you can follow hey something happened on the signaling server line 118 the ice candidate something came in that's 119 and 120 let's take a look at those quick 119 here's my ice candidate open up 120 um our candidate if I open that up it shows the the address and then it shows the candidate using UDP this is all the information the ice candidate itself that will get sent to the other side so that they'll be able to find me now this isn't the only one that it generated if we keep going down here grab another one open this one up uh this one has a different IP address in there in case the other side needs to use that but back up to the top here inside of call we have finished call we have emitted our offer that's going to go up to the server and it's going to sit there let's hop over to the server quick inside of our socket server again we are going to on connection we're going to run this code we're going to call uh this particular connecting socket socket for the life of this call back which is pretty much the entire file so socket is going to be whoever just connected and if we look uh back in scripts we have the the new offer event we go to new offer we call the thing we got new offer and we add it to offers what is offers we scrolling back up top here this is an empty array and this um offers is going to contain a bunch of objects and I have the the format that our objects are going to follow these are all of the properties that are going to be on there now coming up initially the only thing we're going to have right now uh is our new offer we're going to slowly add the other stuff here so the offer property is the offer we just got the offer username that's the username which came through back up here when we connected remember we sent that up the ice candidates for the offer is an empty array we will add them as they come in the answer username we don't know who that is yet the answer we don't have it yet and the answer ice candidate is an array we will add those as they come in so this has added the offer the server now knows someone has sent an offer up if you scroll down here line 74 anyone who is connected already we'll now get the new offer awaiting event we're going to send out the offer that just came through so we're going to grab the last element and send it out as what that line does the reason I've got socket. broadcast here if you know socket iOS because we don't want to send this out to the caller they they should not be answering their uh their own call so the socket server has added this this offer it's waiting for someone to answer so we got new offer waiting if we come back over to scripts that's not going to be in here that's going to be inside of socket listeners uh real quick let's look at our task list again we've got our client one has created the offer it has these properties in it we gave it to the perer connection ice candidate started coming in we saw that in the console the signal server has has been running it's been waiting we emitted the offer up to the signal server the socket server is holding it for the other browser really for any other browser It's associated with client one how so well when we made our our object here we've got the offer in there along with the offer username and then lastly as number seven happens we can start sending up the ice candidates well we'll look at that again a little bit client one and the signaling server are now waiting for client two again we we sent out the new offer awaiting inside of socket listeners okay this is is our other front-end file inside of socket uh listeners we have a new offer awaiting if that thing happens then we run create offer uh elements likewise we have available offers too that runs the exact same code okay there are two occasions when when a an offer needs to be sent out it would be if you join for the first time or it would be if you're already here and the offer was just sent out out so we go back over to the server you'll see as soon as someone connects right here we send them all the offers that we know about that means that you just joined if I have any offers I will send that array to you okay an array of these objects if an offer comes in and you're already connected then I am going to broadcast this so those are the two occasions it'll be one someone just showed up let me give you what I've got this this one will be hey I just got one and you're already here here you go we've got this is going to run in both cases that's down below here we're going to create a a new uh a new element this is just going to do some HTML we're going to build out a div we're going to put the the green answer button in there put whoever the offerer name is and then we're going to give them a new button to click on that's going to run answer offer and then we're going to pass the offer to it so this function will run anytime we get a new offer we're going to create some HTML put it in the Dom and then we're going to add a click listener just a quick note here I've got in HTML we're using their their username this would not be safe to run in production you should figure out another way to get the usern name on the page um just a just a quick note there okay um we're going to run answer offer when someone clicks on this new green button so over to scripts if if we go to answer offer I'm happy to say there's a lot of code here but it's basically the same thing we call fetch media we did exactly the same thing up here inside of call we call create peer connection we did exactly the same thing up here in call so we're doing the same stuff here this time though we do pass the offer object why well if we go down to create the pier connection if there is an offer object down at the bottom here if offer object exists then we can set the remote description remember the offerer client one sets the local description to the offer once it's created here we're going to set the offer to the remote because this is client to this is the person answering that's the only reason that's there this isn't going to be called from call it's only called from answer offer okay so client 2 will have the offer in as its remote description we come back up to our answer where are we answer offer we created our peer connection now we're going to create an answer just like up above we called create offer on our peer connection now we're going to call create answer in line 57 we take our our answer and we set the local description exactly the same thing we did before but we did set local description we passed it offer this is client 2 this is the answerer so we do just the opposite here I got a couple a couple logs here so that you can look at them if you would like to see them line 62 we take our offer object okay what's the offer object that came from socket.io that came from our socket server so our offer object back over to our server it has all of this stuff in it right it had the offer in it it had the offer username it's got any offer ice candidates back over here to scripts we're going to set the answer the object we're going to add answer to it and then we are going to take our offer object and we are going to send it back up uh to our server right here so we're going to emit back up to the socket server our offer object which now has the answer okay so we've added this locally it's it's a local addition you can't add you can't add a variable from here on the server we've added it locally we're going to send that back up to the server with this event um admit with uh with acknowledgement this means we're going to expect socket.io to send us something back it's going to send us back the ice candidates okay so we'll come back to this in just a second but our new answer is going to be the same as the old one but it's going to have this on it so back over to server scroll down a little bit further here's our new answer event this just happened right on new answer we're going to run this code all the way down there we get our offer object the acknowledgement fun function that's that's what's going to send back um this variable our offer ice candidate so we're going to run this when we're done U sit tight for a second on that but line 82 um this is going to be the socket that we are answering so we are going to go looking through our connected sockets and find that uh that particular socket come back all the way up to the top here uh I have a variable on line 40 which is an array and we put whenever someone joins we we add an object which has their username and their socket ID the reason for this is it makes it a lot easier to find that particular socket this is a socket ID thing but the point is we need to find who they are in this array uh and that is added right here on line 53 when someone joins so this is as soon as a socket joins our our socket server we we push them onto this array it's their socket ID and their username so down below here we're going to go find the socket we want to talk to okay if it doesn't exist then we that person has left so they they created a call there's a call or there's an answer rather over here uh but they have they have since left and so we won't be able to find them if we did find them we will hold that and we're going to admit later but we need to find the offer and we will use their username to do that so we're looking for that username this is again just just a way to find out who sent us this offer it's it's primitive there's lots of ways you could do this but we need to find the offer in our offers array so match that up find the the username match it up if it doesn't exist again we we don't have that person anymore otherwise let's run our acknowledgement function and send back that person's ice candidates the answer is is still who we're working on here we have a new answer we they have their own answer and they have the other side's offer this is going to send back the The Ice candidates so they will be all set they will know how to get to the other person and they will know what they are speaking in our offer to update we're going to add the answer this is for for client one the offerer we're going to add our own username and then we are going to send out this event back to the socket who made this offer so we're going to send out this event which has the offer to update okay the offer for the update it's this thing it's this object it has this already this already they know their own ice candidates so it's already got some of those it now has this and this because we added it right here we added the answer and the answer username that's answer response so we're going to update with that new object back over to socket listeners we come back up and we look for the answer response we have a complete object now it has the offer the answer the other side's username our username and so on so we call add answer and we our home if we go back to scripts the add answer event all it does is take the peer connection and it sets the remote description to the answer which is the stdp and the type right this is the the RTC session description that the other side created that is the whole process as soon as this happens the set remote description that that is going to add tracks because we got a track from the other side it is going to start adding those tracks to the stream and it's going to start playing and that's what makes the magic happen the very last thing to talk about as ice candidates come in whenever we get a new one and that's going to happen asynchronously right we sent the stun servers up to the peer connection this event is going to run send Ice candidates to the signaling server if we go back over to the server and we look for that it's right here on my line 104 we got a new ice candidate object this is where that did ey offer bullion uh is going to be useful it's going to come through with the ice candidate we are going to check to see are we the offerer if we're the offerer go find the offer the offer was added back up here to uh our object right here line or array on line 32 that's the thing that we've been passing around back back and forth well we are going to find that offer we are going to push onto the offer ice candidates the one that we just got down below here if we're not the offer then that means we're going to do the same thing but we are going to add this to the answerer ice candidates so we're going to go find the same offer find the right socket and send those ice candidates out to to the other side okay so received an ice candidate from the server this uh this event right here emit the received ice candidate that's going to go to whoever the other side is if they are connected we will send out to them the ice candidate we just received okay so last time back over to socket listeners if received ice candidate from server comes in it will come to the correct socket right from the answerer to the offer or from the offerer to the answer we're going to call add new ice candidate that's back over in scripts here add new ice candidates down at the bottom uh we we run PE connection. add ice candidate okay that's the whole process I know there's a ton here I know there's a lot of code watch it again or or follow the parts again that you you need to rewatch it really comes down though again to our task list it looks intimidating but just like we drew on the board both sides have to get media both sides have to create a peer connection both sides have to send stun servers so that we can find them both sides have to add their their locals tracks to their peer connection and then client one creates an offer that's the sdp and the type they add that to their local the other side is going to create an answer and add that to their local as soon as that happens we start collecting ice candidates and we send both the offer and the ice candidates up to the socket server down here we pass the and the ice candidates up to the socket server as well once the socket server knows the other side is there that's all the socket server is doing here and again I know this is probably the most confusing part for one thing TCP is is hard to follow because it's asynchronous and you may not be familiar but all this thing is doing is keeping track of all of the offers that have come in and then whoever the new person is if they are the offerer I will keep track of this stuff and if they are the answerer I'll go find this thing and I will add the appropriate stuff the socket iio server server.js its main job is to send out offers answers and Ice candidates as soon as that part is done I guess it's this event down here as soon as that part is done then then the socket server is no longer necessary and the peer connections can talk okay fantastic job if you made it to the end of the video please feel free to ask questions if you've got them I would love to help you out any way I can this is exciting stuff check out other web RT videos I've got and look for that playlist

Channel: Good Morning Developers

Views: 25,284

Keywords: how does webrtc work, live streaming app, making video call app with webrtc, rob, rtcpeerconnection, signaling server, socket.io, udemy course, web rtc, web rtc javascript, webrtc, webrtc application, webrtc javascript, webrtc javascript chat, webrtc nodejs, webrtc samples, webrtc tutorial, webrtc video chat app, websocket, zoom webrtc, setlocaldescription, webrtc sdp, setremotedescription, webrtc answer, webrtc offer

Id: g42yNO_dxWQ

Length: 82min 34sec (4954 seconds)

Published: Wed Dec 20 2023