what's up everybody welcome to : with hi in this week's video we're going to talk about creating a group video chat using simple peer and more specifically using WebRTC technology so simple peer really is just a sort of wrapper around WebRTC which makes it a lot easier to work with but really ultimately what we're actually doing here is creating a group video chat using WebRTC technology now the problem of course with WebRTC is that fundamentally it is designed to have one peer-to-peer connection which means each peer and only really connect to one other peer so we actually already made a video exploring how that works if you've missed that video you can find a link to it down in the description box below I definitely suggest you watch that before you continue on with this video it'll be very very helpful but the idea basically is that each peer can only really connect to one other peer so in order for us to actually create what's known as a group chat but we actually have to do is create something called a mesh network now this is just one of the many solutions that exist is solving the fundamental problem where one peer could only really connect to one peer but the simplest solution also the one doesn't scale that well but the simplest solution to kind of get you started with actually having a group video chat is in fact known as the mesh network and basically what that means is but every person that you want to talk to you have to create a new peer connection so for example if let's say you're trying to have a group video chat with five people so that means yourself plus four additional people now you actually have to have four peer connections one for each of the other people that you want to speak to and what also has to happen is all the other people within your room or within your server that you actually having a conversation with and since they're also talking to four additional people each one of them also have to have four peers that are created for each of the people that they're trying to talk to so effectively each peer at any given point in time is only connected to one other peer but because everybody's connected to everybody we actually get a group video chat so let's actually get into it if you want to follow along I have starter files down in description box below a link to the github repository go ahead and clone that and we can get started so with all that out of the way let's actually jump into the code though the two main files that we're gonna be working with it's pretty much gonna be the server JS file which is where we have our back-end code this is going to be the one you know where we have the socket IO code if you're not familiar with socket I do I actually have a video down in the description box you can find a link to a video that I made about that recently I'm still kind of get you up to speed on socket IO but if you don't want to watch that right now that's fine you don't have to know too much about socket IO to really filed on with this video what's really more important at the sort of simple pure library and sort of WebRTC technology in general because that's kind of more the focus of this video now the whole reason why we actually have the Sakai over here is religious to sort of facilitate the handshake kind of like the signaling that's gonna happen between the peers it end of itself has nothing to do with the actual communication between one peer in another peer in other words the actual video chat that's gonna happen will not be happening through the server at all that all happens in the client-side code via peer to peer connection this again is just different than sort of facilitation of handshakes so if you don't fully understand how this works and just kind of trust that it does you still at least get the benefit of having the group video chat working with the WebRTC technology so that's kind of what all the server code does we're not really gonna be focusing on this too much because I kind of left all this code as is in working order but rather we're gonna be focusing on the room file that's gonna be found in the client folder under source routes there's a file called room j/s this is where the actual sort of group video chat code is gonna live this way this is we're actually gonna create the actual chat screen where the all the peers are gonna kind of be connected together okay so I have a lot of code up here already but what I have pretty much done is I've left three crucial points out right so in other words here when we're actually connecting to the room so in other words when you actually join the room you use effect runs and I'm basically treating it as a dead mount because I've got the empty dependency array so in other words when you actually join the room for the first time and only then we actually extra you actually get this use effective fire you're basically in it connected the room we're gonna ask you for your for your media devices trying to get your um audio and your video and then we have a function called create peer and a function called add peer so before I actually kind of get into filling in all the code here let's just briefly talk about the flow that I've basically had in mind for how this is gonna work basically what happens is for each person that word that we're trying to talk to we basically have to have a new peer created for that individual person which basically means we need to actually have a collection of peers for all the people that we're talking to so therefore what we actually have here is this peers rep which is really going to be an array of peers so therefore we'll actually be able to have a collection of peers and what we're also going to do is kind of mash the each the individual peer object to a socket ending so every single person that joins will have a unique socket idea that gets created for them by socket IO and so what we're gonna do is we're actually gonna basically I'm hold an array of objects in our peers referee where basically the object is gonna be a sort of a socket ID to an actual peer object and now what that's gonna allow us to do is to actually start creating handshakes with each appear as they sort of come and go and so what's gonna happen is when I when a person actually joins the room if there are already people within the room and that this person that just joining basically notifies all the people in the room that somebody else has joined I'll send along his socket ID to all the participants that are already in the room all those people are going to basically add a new peer to their existing peers referee right and the person they're just joined will basically get a list of all the people that are already in the room right and get all of their IDs and what I'll do is so basically iterate through that array of peers and for each one create a new peer and then sending the signal to that particular person so this will all make a lot more sense within once we actually get into the code so let's actually get into that right now okay so the first thing I'm gonna do is basically take the stream that we're getting from our own stream and just apply it to our own video components that we can actually see our own video and so we'll do is just gonna send user video dot current submissively user video is going to be a ref to the actual user video we're going to call the source object prophet or just gonna pass it the streams and now we can actually see our own our own video now we're gonna go ahead and reference the socket ref we're gonna basically emit an event saying that we have joined the room okay so now that we joined the room now the next thing that's gonna happen is the server is going to emit back an event giving us all the users that are currently in this particular chat so we're gonna say soccer referent on all users are basically getting all the users this is gonna give us an array of users and now we're in these are going to create an array of peers right up here working it started as empty so again this is the person that has just joined right so this person has no peers yet because they literally just joined there's your other one actually coming into the use effect right so now what's gonna happen it's gonna take this users array that we just got from the server which pretty much is gonna have all these that are already participants within this chat I had assumed that they are aren't that they already exist and we're gonna get their user IDs now for each one we're basic and they go ahead and create a peer so I'm gonna say Const peer he calls create peer now of course this function just exists but we haven't really filled in the actual logic of the function yet but what it does is it takes in a user ID the person they were trying to you know create a pair for we're gonna send in our own ID so that we know who's calling and they're also gonna send in our own stream now this basically returns a newly created peer we're gonna go ahead and call the peers rep current push this basically them is gonna be our array of peers and then what pre-much gonna do is put pass on the peer ID which pretty much just represents the socket ID of the person who we just created a peer for so in other words one of the participants who are in the chat that is not us we're basically going to be grabbing their peer ID and we're gonna be pushing into our peers array which is gonna come in very handy soon and then the actual peer object as well now that we actually have the peer object push into the peers referee now we also have to actually have to take this peer object itself and pass it into this peers array up here because we actually are maintaining sort of two arrays of peers one is the ref which basically will handle the actual collection appear so we know who the signal and who we have signal then who's stream we're getting and stuff like that methods all the actual simple peer related logic and then we also have to have an array of peers to pretty much for rendering purposes because we kind of need to know how many videos are actually rendering so that's what this peers array is here this one's actually going to be out of state but for that I'm just pushing in the peer object itself we don't need that so I could ID for that one and then we can just go ahead and call our set peers method that we have from from set state or from you say rather and then pass in our peers and so again the logic here pretty much is when a person actually joins the room they're going to emit an event saying that they join the room in return the the server will pretty much send back all the users so this is going to be an array of users that is everybody in the chat except for themselves and then we're going to do is we're gonna create a new peer for each one of these people or all through there in the room we're gonna pass it into our array of our array of peers that we're trying to keep track of and we're also gonna pass it into our you know state of peers therefore we can actually go ahead and handle the rendering so we can kind of create a video for each one of these for each one its people now let's actually go ahead and fill in the create peer function though the crappier function pretty much looks like this we're gonna do we're gonna create a peer object they go to a new pier initiator in this case initiator is actually gonna be set the true because basically what happens is the initiator property the way that it works is if as if initiator set the true then immediately upon construction when the signal gets sent down and so the idea here basically is that since I'm the one that's currently in joining the room I need to tell everyone else in the room that I have just joined the all the peers and I'm creating half they have initiator set the true therefore I can immediately send that a signal to them using socket IO so that they know that hey somebody else join the room this is this person signal let me grab the signal and then send back my own signal cuz again we have to sort of send each other signals in order to actually create that handshake to have that proper peer-to-peer connection now we're going to set the trickle property to the false and then we're gonna set the stream to be equal to our stream okay now so as soon as this actually gets constructed it basically emits the event called signal and actually you know it actually sends up the signal so in order for us to capture the signal we have to listen up for the signal event let's go ahead and grab his signal and now we're going to do is we're pretty much gonna emit the signal down to the services so I would say Saka draft that current that emit this the name of this event that the server is expecting is called sending the signal and then what we're gonna pretty much send is gonna be an object that's gonna look like this it's gonna be user to signal which is pretty much the actual user IDs in other words as we're looping through this array we get each one of the IDS of the people that are already in the room we pass it in to create PAP expects that by the by the argument name of user that signal so pretty much gonna be signaling this individual user then we're gonna send them our own ID by passing in the caller ID and then the actual signal data okay so that's pretty much all handles what happens when a person has actually joined the room from their perspective of the person that currently joined but now we also need to deal with all the logic of what happens when the person who is already in the room it's getting notified that somebody else is joining so let's actually handle that logic now so we're gonna say is we're gonna reference our socket again I'm gonna say socket rep that's current on we're gonna actually listen up for an event called user joined right and then this is going to get us a payload object which is gonna contain a lot of important information that we're gonna need okay so the first thing we do is actually go ahead and create a peer so we're gonna say cons P R is equal to add gear so this time I'm gonna actually called the add peer function as opposed to the create peer function which as of right now has not been filled in but we will fill it in very soon now we're gonna reach into our payload outlet that we're getting from the server we're gonna send this app your function the signal the payload that caller ID so that we know who is the one calling us and then the stream which is basically our own stream okay now once again we're pretty much gonna have to do the thought you know the same thing we did up here we're basically going to push this new peer into the peers referee and I don't think I have to push it into the States hey but over here we're only doing it on the one because we already have an array of peers because we're already a person in this room so we already have peer serving but it's already in this we're now creating a new peer for the newcomer that has just joined this room right that's the basic idea so we're basically going to say here's ref current push so the peer ID is equal to payload caller ID and then the actual peer now let's go ahead and actually step the peers okay so once again what we've done here is we're pretty much creating a new peer so we have to go fill in the logic for the appear function we're taking the newly created peer passing it to our peers referee we're also adding it the state so that we can actually go ahead and rerender a new video element for the person that paid it pretty pretty much just joined so again this logic up here you know pretty much handles the event of from the perspective of when the person who actually joined the room what happens when he himself the joining so he pretty much gets notified with with all the user IDs of the people that are already in the chat creates a new peer with the initiator set the true for each one of those people every one of those newly created peers gets put into the peers referee and then in the flipside all the people that are already sort of in the room they pretty much get notify their new user has joined and then they get the new users payload the new users caller ID and then their own stream I mean I pretty much create a new peer and then take this new newly created peer and pass it into their already existing array they're already sort of populated array that's kind of idea so that pretty much leaves us now with having to fill up the add peer function come down to the a peer function and we're gonna do they're gonna say cons peer is equal to new peer so we're gonna once again call the new peer constructor just like before the difference is now we're going to say initiator is equal to false now I'm going to say trick will once again is false and I'm just going to pass it the stream okay now we're gonna call the peer that on signal event now in this case the signal event is not going to get fired upon the creation of the peer because here initiators of the false rather in this case the signal event is actually going to get fired when this peer is basically getting a sort of an offer in other words when it is being notified that 70 wants to create a connection to it that's when we're pretty much going to be firing the signal and the way that we do that is by actually signaling on the incoming signal so we have this argument that's being passed into us in here called incoming signal which is pretty much the signal that was sent from the person who just joined the room so person a just join the room they pretty much are sending their signal to each of the people that are already in the room those people are receiving the signal in the form of this argument called incoming signal and then they're gonna accept that signal and when that happens they themselves are in return gonna send their signal back out so we're gonna handle that right now so we're gonna say peer that on signal when I have accepted my the incoming signal I will pretty much send on my own signal and then what we're gonna do is we're gonna take that signal that this peer is not sitting back out and we're gonna return it back to the server so we can return it back to the caller because again everyone has to get each other's signal in order for us to have a proper peer-to-peer handshake we're gonna say returning signal that's the name of the event we're gonna we're gonna send these signal and we're gonna send it to the koala right these in other words the very person that called us that's the person who is going to be getting our signal now finally let's actually go ahead and accept the incoming signal servers they appeared that signal that's the actual method that we call passing in the incoming signal so the basic flow is like this when a new person joins right up here we're going to call the at peer function passing in the signal that we're getting from the person who just joined and their caller ID right then we're going to come in here we're pretty much gonna create a new peer with the initiator set to false then we're gonna take this incoming signal we're gonna call the signal method owner which basically means I'm sort of accepting the signal in turn that's gonna cause this pair that on signal method to sort of or this event to fire because again when a peer who's initiated the Falls they only signal when they have received a signal from somebody else so in this case we're calling the pair that signal in on the incoming signal which then will cause this event they get fired we're gonna grab the signal that we have ourselves now generated we're then I'm gonna send it back to the server which is ever gonna send it back to the person who called us in other words person we just joined needs to get our signal in turn that's what this caller ID here represents now we have to actually go and film the logic of actually getting that signal back from the person who just who just sent it back to us now we're gonna come back here this is back in now where you use use effects we're gonna say socket ref but current that on and the name of this event is going to be receiving return signal and then we're gonna get the payload now what needs to happen is we have to actually find the peer who we are receiving the signal from right so in other words we are at this point to have already sent at our own signal to multiple different people that are already in the room now they're all basically sending back their signals we have to make sure that we actually are signaling on the correct peer we're pretty much gonna say Const item is equal to peers ref that currents that find let's go ahead and find the actual signal or the actual peer so remember the way that this peers ref is structured as it actually has an array of objects where the object basically has a peer ID and then the actual peer object so we have to make sure that we're signalling with the correct peer object and so the way to find this we're gonna basically say P where P dot P right Pierre ID is equal to the payload that ID and then once we actually have that correct peer we can now just go ahead and say item dot peer dot signal on the payload signal and that is pretty much effectively now created a perfect round trip okay so that pretty much does it for all the code and we're pretty much ready to start testing to see if all of this works but before we do that let's just run through all the code one more time now that we've kind of worked on it together and just kind of reiterate it what everything does cause it's kind of a lot of back and forth that happens here and I kind of want to make sure that it's all clear oh so I did notice that I made two mistakes one is here I called the set peers inside the 4-h you can't you have to move set peers out of the for each also in the add peer function make sure that you're returning a peer as well as you are on the crate peer but in the app peer function I noticed that I forgot to return the peer so I have to make sure we actually go ahead and return that peer so we can actually add it into the array so again the basic flow is as follows when a person actually joins the room zooming that they're already other people in the room this person is basically now the initiator and what I mean by that is when the person joins the room what's gonna happen is they're pretty much gonna notify that everyone in the room that they have joined the server in turn is gonna send them back and erase all the other participants besides for themselves in other words are gonna get an array of all the other user IDs pretty much their socket IDs that is not themselves and each one of those users they're pretty much gonna go ahead and create a new peer and in this case we're gonna call ahead and create the call to create peer function in this case to create peer function pretty much creates a peer with the initiator set the true what that allows us to do is to immediately emit the signal that were pretty much gonna be sending back to the other people as soon as the construction of the pier happens in other words as soon as you create the new pier the signal event happens we listen out for that signal event we capture the signal and then we go ahead and we send it down with each individual person within the room so we kind of do this in a loop because we're creating a peer in the loop for every single person so each individual person gets an individualized signal sent directly to them right now on the flip side of that the person that is already in the room in other words the people that are now receiving the signal because someone else joined their chat they're pretty much gonna get notified by the server that someone has in fact joined so this user join the event is gonna get fired and then what's gonna happen is it's gonna be they were gonna receive a payload they're gonna call the add pier method the at pier method in this case is what it's going to do is it's actually in a crater up here with the initiator is set the Falls because in this case we don't need a signal to be sent out right away as soon as the construction the pier happens rather first we're gonna actually accept the incoming signal and then when that's gonna happen is we're gonna we're gonna then take our own signal fire it off to the stack to the server and we're gonna pretty much send it back to the person who just sent us a signal so in other words we other person who is currently already in the chat someone else is joining our chat that they notified us that they joined they send us our signal we'd accepted their signal and in turn we've created a new peer to act your already existing array of peers and then in turn I'm going to take our signal and send it back to that individual user so we can kind of cleat that complete that round trip where we basically have a handshake of each peer accepting the other peers the signal but back to the person who just joined the room they're now going to be listening out for the event called received returning signal or they're getting back to a turn signal now they're gonna have to actually dig through their array of peers to make sure that they signal on the correct peer right because in other words they are now potentially going to be receiving in turn four or five signals right so we have to make sure that we know which one of the peers to use to accept the returning signal because if you already signal with the peer that already has an established connection with somebody else with a different peer you're pretty much gonna get an error because again each peer could only maintain the connection of peer to peer connection with one other peer so we have to pretty much dig through and find the peer that has not yet established a connection and the way that we do that is towards the person who's already in the chat when there's something back there signal not only will they send back their signal they're also gonna be sending back their ID now I can use this to find the individual pier of the person who is now signalling back to me and the fact that they're still secondly back to me means to but that indicates to me is that I have not yet accepted their signal so now I can go ahead and safely grab that pier out of the array and then go ahead and accept their incoming signal which then in turn completes the sort of round trip I have sent their signal I had accepted their signal they've accepted my signal and now I actually have a peer-to-peer connection with each individual person that's currently already in the chat that's pretty much all the code let's go ahead and see if this works as you can see here I'm on localhost 3000 I'm on this unique ID which pretty much has just represents the actual room ID so all the other people that want to join this chat have to go to this exact URL then this exact room ID let's grab this we're gonna open up a new tab pop it in and now you can see we actually have two of us now let's go ahead and grab it and grab it again open up a new tab and now we have three and if I open up with one more time now you can see we actually have a group chat happening with four of myself and I realize that that's a lot so I apologize for that well that does it for this video and I hope you enjoyed it I hope you found it useful if you did please drop a like subscribe and I'll be back next week with another video