Fullstack React Native Video Call Zoom | WebRTC & PeerJS

[Music] hello guys and welcome to this zoom clone application so i got a couple of requests to actually make a full stack zoom clone application so i decided to go ahead and do something similar to that we are not going to be building everything like the design you see right here but you're going to have pretty much uh this kind of screen so let me just go ahead and refresh this application so that i can actually see that screen but you have seen the video aspect of this and uh we are going to just take this screen over here this design over here and also this one over here so this one over here is exactly the one that will display in the camera so this is what we are going to be working on on this video tutorial so before you begin to uh proceed please make sure hit that like button and also the subscribe button so guys before you begin just check on the description section you're gonna see a link to this boilerplate so for the design i'm not gonna touch anything about design because i just prepared it so whenever you get a boilerplate you can easily run the application and you're still going to have the same view i have right here inside the emulator and also for the server itself we are going to be using the boilerplate server so if you check here we have the psja server and also i kind of connected socket io over here so we're gonna just uh connect with our mongoose database then we can move ahead and uh if you want to run that you can just quickly run npm run dev you can make use of the node monitor around the server so right here we already let's go ahead and connect our mongodb so beneath here i'm just going to uh connect to mongodb so which is gonna use the mongoose dot connect and it's going to accept our database and it's going to use the new url parser we also have to use the created index and through set that to true as well then we have to use the unified topology we have to set that to true and lastly we can use the use find and modify so why we make use of this thing is because sometimes mongoose objects kind of depreciate so you have to keep up to date in order to understand how to use all this thing from the official documentation so whenever we connect we have to uh console log that in our server something like you could say console.log db connected and then we can catch any error in case we have an arrow so we can just uh display that error immediately and then we can save so hopefully when i open my server over here we are not supposed to be getting an error so that is telling us that pass error connection string so the connection string means that you need to make sure you have your connection string from these config so right here you could see that it is empty so that's because i actually removed my own so just go ahead and create this connection string if you check in in one of the video tutorials we did earlier that's the amazon full stack application you could see how we connected the mongoose so just go ahead and watch the beginning part of those videos of that video actually i think it's part one then you can see how you can make use of that to connect your mongodb so right now i've connected mine so i think i have to just receive and check back in my console so right here you could see we have connected so that's the only thing we have to do for now on our server and the next thing is just to go over to application where we are going to be using the uh the the first screen over here is the splash screen which actually shows that a little zoom application so if i refresh this you will see the zoom splash screen that is going to display at the first instance so this is the splash screen and after this flash screen is going to bring us to this login screen so this login screen is where we are going to be using uh redox to actually dispatch actions so whenever we log in we are going to dispatch a login with the password and email and then the of course we are not using registration so even if you remove that we don't have an issue so i actually disabled the backhand lab button because i don't want in the case that i click on back then it has to quit the application immediately so it's all there in the boilerplate but when we click on this login it's going to bring us to these off actions so i didn't want to explain this as well so if you really want to understand how we do authentication also check back on that amazon clone application you can see how we did a full stack authentication with redox and also json web token to actually get a token to store in our application and use that to communicate with a tower database through json where website can return a user for an active logged in user so that's what we did over there and if you check at the top here you could see our types so when we go over to these types we are going to be adding the video chat action types which we are going to use for this particular video but here you could see we have these types for of dedication we have registered success login success load user and also all users so all users is what we are going to be making use of in this user list to use delete uh sorry to dispatch all users from our active users from our mongoose database and then we can display it here so this is just a a dummy user that i i had created earlier so this really doesn't matter but if you can just go ahead and test them out so for now i'm just going to close this and we can go back to that auth actions now inside this function whenever a user logs in we have to make sure that there is an email or there is a password so in the case all those things are not there we just have to block the user from doing anything but in case there is a user then we can dispatch a type of login success and then we can pass a payload a payload of user so this user object is going to accept a name and uh the name is going to be user then we use but backtig and add a user underscore here we are going to use a random id like i i told you i'm not gonna be doing a a server authentication with this application because i don't want it to uh take much time so if you really want to understand like i said initially just go ahead and watch the amazon crash course sorry amazon full stack application without you're going to understand everything there and we are going to also have a uid so uid is going to be id underscore a random id as well so these are from this is a function so make sure you put the parentheses and lastly we have to pass that user email so the email is unique we are going to be using that email to store that in our database so whenever we dispatch to login success so the login stock size is going to be made use of this i think and login screen right here whenever we login success this is going to be set to true and whenever this is set true then we now replace the current screen which is the login screen with the user list screen so if we just go ahead and give that a try i think it should work so i'm just going to give that a just a random username and password and immediately it's on login you could see automatically it brings me to the userly screen so back here whenever we log in we have to set dispatch a set user with the email and also with a password so this is not supposed to be an object it's just supposed to be like that so the set result here is because i want to store these with assigned storage i don't want to be logging in whenever we reload the application which is going to spend our time unnecessarily so it's better that we use our sign storage and store the users and then we can check with the load user if the user is already in a sync storage then whenever a user is found in async storage we move over to the user list so i'm just going to quickly do that so we can set the email to email i'm just going to grab this and then we can set the password to password so that's it for this then lastly for the load user we just have to grab that email so you can actually use something like that assign storage.get or but let us do this for individual data so which is going to be a sign story dot get item and we have to grab the email with the key and also we can grab the password then we have to check whether there is an email and also whether there is a password so these two values has to be set which is going to give us a true value then we can dispatch again uh login so whenever this is found we just have to dispatch login so login actually does the same thing like says the user but uh why we did this like this is because we just want this first one over here which is going to dispatch this login success and automatically takes us inside the uh user list so when we go ahead and refresh the application that should actually work perfectly so right now you see automatically it brings us to that user list screen so right all right so let's go ahead and start grabbing our users from our mongoose database which is now going to make us use the socket io in order to create a room and also grab the users inactive rooms from this user list and whenever we come over to this user list you can see we have an action being dispatched called user join so it's going to join this user to active chat in the mongoose database so i'm just going to click on that function and come over here so before we start making use of this uh function first of all we have to go over to our types of js so make sure you come over to these actions and select types of js and let's go ahead and dispat sorry this uh put down types for the video actions or the stream actions so i'm just gonna the first one is gonna be join chat which is just going to be a joint chat just going to be a repetition of the keys so i'm just going to join chat the second one is add stream which is going to add a user stream to the store and the third one is my stream so this my stream is very important because it kind of sets your own stream on a different store key and then we have uh add remote stream so add remote stream is still going to add uh the the remote streams or the users connected from other streams to our own it's gonna add all those streams into the same stream so that is remote stream and lastly what we have is add peer id hide my peer id so i add my peer id is something that we can use to add our own pa ids to the store so whenever we disconnect we can actually make use of that but let's just go ahead till we get to that point then we can see whether we can actually use this add my peer id so the next thing is coming over to these video actions let me go ahead and close this user list so whenever a user comes over here we have to make use of this user actions so right now the first thing we have to do is to grab a room id so let's just say active room id so you could see we emitted joint general room so this gender room actually is also a room that we can actually use so let's say we want to uh send a message to all the users uniquely so that every user kind of received that message we emits so we can make use of this id over here but i don't think we are going to be making use of that but let's focus on the main thing that we want to do so we just grab that and then we can grab the current user and also all the users from the uh states so we can get the state from the oauth and then we can grab our id so our id is going to be coming from i think we can actually grab our id from okay let's just let's just put this away for now i think and make this work in another way so first of all we have to check whether the user that just joined is list and that will lead us using the socket so we emit user exists which is the current user that is using the uh mobile phone and whenever we emit we emit the user the socket id of that user and also sorry we have to set the socket id to the socket.id so you are going to know why we are using this socket.id shortly and let's go ahead and open our server so this will now lead us to close all that tabs and just focus on these two uh parts so that we can make use of our socket to actually connect all the users right away inside here the first thing we have to do is to make sure that all the user is connected on this joint general room so this join general room like i said is like you can use it for messages or you can use it for a toast messages so you can say socket on join general room we just have to grab the room id of that user and then inside this callback so make sure you wrap this inside a parenthesis and then give it a call back you just have to join the user on that room id so that's just what you have to do so the socket kind of uses socket id to join on that room then the next thing we have to do is to check for socket dots on user exist so this user is initially like i said it's going to be checking from mongoose database and it's going to be getting the user and also the socket id and whenever we check whether the user is so let's say check whether the new user or the existing user exists in active chat so that will lead us to create something called schema because for the active chat we are not just going to be using something like an id we are going to be using our database that's why we are using mongoose database at the top so here i'm going to create a folder called schema so inside scheme i'm going to create a file called active.js so gradually just flow along and the first thing we have to do is to bring in the mongoose which is going to require the mongoose and it's going to bring in the schema as well which is going to use the mongoose the schema so let's just uh get some unique id from uuid because you want to use that to set the uid that we actually made use of in uh when why we try to make you use of the login button so the ui is just going to be a random unique id and we are using uuid for that so right here you just have to grab the version 4 and you can map that i think yeah version 4 and you can map that to uuid v4 then we can just create an active schema so let me close this left pane so inside this uh schema is going to be taking the schema uh sorry for that it's going to be taking the new schema so this is small c so that's why we had that issue and we have to make sure we have a type of name the name of the user that just connected which is a type of string and it must be required which is the true and we also need the socket id which is as well a type of string and we also need to require that which is true and we also have to make sure we have a uid but for the uid we are going to be giving a default value with the uuid that we brought at the top it's going to have a default value of uu id version 4 and make sure you put our parentheses at the back then lastly we have an email type of string with required of true as well so make sure you type this correctly which is true and lastly we are gonna create a database using the uh sorry a table using the schema or a collection and we are just gonna call it active so we could say mongoose dot model equal to active charts so this is gonna be the collection or the model or the table if you're coming from mysql so you could see that's how we can create a schema so whenever we create a schema we now have to make use of that schema to check whether the user actually does exist before we proceed so back in our server what we have to do right now is to check with the active so sorry for that before you proceed make sure you bring that at the top so i can say uh active is equal to require it's gonna require from the schema and we can require the active and here we have to uh find one and uh first of all we have to find the user so before we find an update so we can find one user with the email address an email address is gonna be the user.email and then if the user truly exists we can get that user and then inside this callback we have to emit found to last connected user so what we are actually doing here is we have to emit uh we have to immediately yes we have to admit that this this user is actually found so here we can emit socket.emits that this user was found because we are going to be catching that on our client application and then we pass that the user that current user that just connected so for the socket id i think uh we actually need it here but let me kind of let me kind of leave it for now in case we are still going to make is making use of it or making reference to it as we move on and whenever this user is found back in our video actions we can just say user is found you can just listen for that user found which is going to grab that same user that just connected and with that same user or let's just call it uh current user so with that same current user we have to check whether there is actually a current user so in case there is a current user we have to now emit update that user so what we are going to be updating is the socket id of that user and when we update that user then we meet to other users that this user has actually joined so here we are meeting that user so it's still the same current user so even if we do something like current user is still not an issue then for the socket id we can uh set same socket id or we can actually uh send back socket id as well but just know that it's still going to be that same user because we are using an io emitter here so this is supposed to be uh this is supposed to be an io emitter not socket uh so sorry guys for that this is supposed to be an io emitter so we we just have to yes sorry i made a mistake here so this is io in socket id so that same user actually not other users we have to emit user found to that user that just connected last and then we send back that user so back in our video actions so make this correction i kind of didn't get that in the first place so we get the same user gets this user found and then it's gonna update itself which is the current user or this same user is as well coming from the redox or they store that the same user then we just have to update the socket id of that user and then we can pass the all user room id so the all user room id we can just quickly come to the top here and create a course called all user room id which is going to be a random user [Music] so sorry for that guys dogs at the streets just disturbing so let's go ahead and update the user that just joined so this all user id similar to this join general room id but for this one we are going to be using this one for our user list we are not going to be using this like i said they can actually use this one for something like a general message or something unique it's more like this as well but just know that we just want to use this one for our users list so whenever there is a a user the user have to be updated if the user is actually found but in the case that the user is not found we just have to use the lc statement and then we can just emit something called emit an event called uh user join which is to join the active chat and store the active user in our database and also join the same user on this all user room id so we can just pass the socket id to be the socket id of that user so this is like a new connection why this is like an existing connection so let's go ahead and handle for both of these connections or both of these emitters and coming back here so we need this uh find one you can just go ahead and update so sorry for that of the user if found so that will take the on update user so on update user is actually this one over here update user and whenever we cache that update user we just have to grab the user that's been updated the socket id of the user and also all the user room id which we are going to be using for our user list and then inside this callback we can perform some operation first of all we have to join that user in all user room id and after we join that user we can then find user and update the socket id so we can now make use of our active schema using the find one and update so we are gonna be uh finding the user with the user email so it accepts the email which is the user.email and then we can just set the new socket id of that user which is coming from this object over here and then we have to make sure new to say the new to the truth so these are just mongoose uh way of doing things and then we have an error and also a document so inside here we have to check whether there is an actual user that just updated so if something like that happened then we have to send active users sorry active user to the last connected user so this is users so we have to send active so we need to send the active users that is already in the database back to the user that just connected so we can just quickly use the active.find so that's where we can grab everything from mongoose with using the schema then we get the all users then whenever we get these all users inside this callback we have to grab other users so other users we have to grab must not contain the same email address of the user that we are updating so we can use the filter to filter out the email address of this user so remember that this user is going to be coming from uh this user over here yes so i i wanted to make use of this dog but in a case that uh we can still make use of doc or we can make use of user just know that we just have to filter out the email address or feature at the user that just connected last or been updated last from the already existing users so that the user can have other users and not returning itself for each redo store so we can just use the filter and in the future we use the structuring and grab the email so make sure you wrap this properly so in think we didn't add an equal sign here so this is uh other users equals to the all users sorry so all users we grabbed so here we are checking for uh other emails so let's just give this an other emails so we can see other emails is not equal to user dot email so that should that should filter out the user that just connected last or the user that just updated last then we have to send other users to the user that just connected last using the i n i o dot socket i id so this socket id is also coming from the user so don't forget the updated socket id so we have active users and then we can just pass other users so one more thing remaining is uh i think the user joins so the user join is used for new connection whenever isa just joined the roon the room but one thing we have not yet done is now we have actually sent back other users to the user that just connected last how about notifying other users that the user has just connected so what you just simply have to do is to calm down come under these find one and did updates so sorry sorry for that so under this one so under this one you just have to simply notify notify other users about updated or joined user so that's just very simple you can use the socket dots to all user in the room id like i said we are going to be using that then we have to broadcast then when we broadcast we meet with the broadcast message and the broadcast is going to have a an emitter key then we can pass the user that just connected so which is going to be an array of user so why you see me spread this is same thing like uh it's just an object but i just want to spread that and then we pass the socket id of that user that just connected so there is nothing much there but for some reason we use an array structure here that's because the way we are listing it out on our redox don't worry we'll get over there then you can see how we did that so right now we've actually done for an update or a user that is just returning or a user that just been updated so the next thing we have to do is to listen for user join so in case that the user doesn't exist in our schema we want to add the user as well to the database and also notify other users that a user has just joined so let's just go ahead and do that back in our server.js file and that is beneath this user updated or updated user so over here you just have to listen for on user join so the user join so this is join user join is going to be accepting all user room id as well and also it's going to be accepting the user that i just are connecting or the new user that is about to join and also the socket id of that user and then we are gonna bring down the callback so inside this callback first of all you make sure you join that user to all room user all user room id and then we store this user an active chat so let's say store new user and active chats so inside here we just have to use the active schema which is going to be using the active schema to create a new object so we have to spread the user and also the socket id of that user then first of all we have to find the document and also add document so why we have to find the document is in a case that the user already exists so we don't want to we don't want to duplicate users so that is very very good we don't want we don't want the duplicate user so we have to find the document or add the documents so in case the user does exist we don't want to add that user but in the case that the user doesn't exist we just want to add a user so we use active dot find one again so that is find one which is going to be taking the user dot email then it's going to return that user in case the user was found so we have to check whether the user doesn't exist in the case that the user doesn't exist we just have to use the active schema dot save and it's going to be returning a promise with the user that that is just saved then we can grab the email of that user because we want to make use of that email to actually uh compile an object out that we are going to be emitting to other users so just like the way we did over here and filtered out some uh credentials that is the latches that i just connected we're also going to be using that same email to filter out uh our user our own user and also a meet to others first of all first of all we have to admit back to ourselves that uh we have other users then we cannot use our credentials to emit to other users just like we did at the top here so forgive me for mis uh representating this but i'm trying my best to break it down so that everyone can understand so guys if you really come this long do make sure you hit that like button and also the subscribe button so whenever we save what we what we just want to do is to find active the find that is to grab all the users or from the active charts which is the users and then we have to make our construction again which is other users which is going to be taking other users.filter or the users.filter and as usual we have to grab the email of those users and we can just map that to other user email so you can see other emails and we can say other emails is not equal to our own email or the new user email not our own email so send so let me just use this nice comment so send other users to new connected user so that is going to be st make use of the i o dot and socket id don't forget that this socket id is socket id of the user that i just connected there we meet again active users which is gonna be other users so and lastly when we are done with this we have to check so this one was like uh when we don't have an active user or when the user doesn't exist so in a case that the user does exist uh we have to meet give our nails here and me to all other users the last joint user which is going to take in the sockets dots to all user room id as usual then we broadcast a message just like we did at the top with an emitter then we can broadcast the new user join then we pass that user that just connected so this is like checking whether the user exists so in the case that the user does is is this just happens or sorry in the case there is no user this just happens but in the case that there's a user just admit to other users that new user so we've come really far let's just go ahead and refresh our application to see everything that we have done so if we do have a crash we are going to be uh having a crash over here so let's just check whether we are going to have a crash so you could see automatically that moves us and let's go ahead and check in our schema so let's refresh and if that's stored perfectly we should get a zoom so we didn't get that zoom and we didn't get anything and let's kind of check what the problem is and let's kind of scroll up so let me kind of check some things so i was kind of trying to debug these and i kind of realized that we have user exists over here so let me grab these and make sure you uh use the same key value over here so make sure you use the same value so i kind of misspelled that and let's give that a try again and checking our console okay right now you could see it's actually working but we are kind of having a bad about filter uh of email so that is on our line 96 so online 96 here this is users so you could see that we actually have to gradually debug these and make sure it's going to actually work the way it should work so if everything works fine we don't have to get an error and when we refresh our mongoose again we should get a user in the active users so first of all we are going to get the zoom so you could see the zoom database and then we have the active chart and in the active charts we have one user so kind of take notice of the socket id and when i give this a refresh it should automatically update the socket id when the application is done loading or when the application is done moving us over to the user list screen so let's check it's not going to return this user because that is the same user and let's refresh so right now you could see that this socket id kind of changed which is very very good because if a user happens to be in an active chat room and the user left so returning the user back to that room is very important so you have to keep track of the socket id and use that same socket id and join the user back to that active room because those socket id are the things that user can actually use interact to all other users so we have actually done the first things that we need to do so the second thing we need to do right now is to grab the active users so right here you could see that from the beginning we are we emitted active users i think twice or three times so this is the first time and this is the second time okay so and let's go ahead and get active users of course you're gonna get an empty object because uh this user is not is the only user in the database but if we kind of change the email address we should be able to get other users so let me kind of manipulate this email address and update that and uh let's now come over to our video actions so under these uh under this user join over here we could just say socket or first of all let's just give that a very nice comment so get other users so that is socket dots on active users which is going to grab those users and let's kind of consider log those users to see whether we are able to return those users so checking in our console hopefully that should work so let's refresh so that didn't work and let's check so here i notice i'm i'm spelling this again so spell this correctly and emit that and uh refresh so hopefully let's just pray that this time around it works so right now you could see we have active users so why you see whether we have active users is because the active visa here has an email has a different email address but when we check back in our mongoose you can see that this user this same user is still added back to our database which is very very nice and that has uh that has really helped us to uh control data flow so that we don't have a clash whenever a user join or whenever a new user joins in our active room id so whenever we get a new user we just have to uh compile users list so first of all i have to grab all users from our redox because i don't want a duplicate user email so we have to first of all grab all the emails from our redox from any existing users so we have to grab that first then we have to check for users as well so we have to use uh the new users that's compiling the new users we have to map that users then what we have to do here is to use the email so don't worry when we finish this you're going to understand why why i'm doing this so we have the socket id we also have the uid and the id that mongoose gives us then in the callback we have to make sure that each of these user email doesn't exist doesn't include itself in the email address then if that is true we are going to return every parameter that we have there the name the socket id and the uid and also the id so when we are done so whenever like right here you can see that we have users that are coming from our database these are bunch of users and also this is also a bunch of users from our redox so we have to make sure that the users that are returning here does not exist in our database so in a case that they do exist we filter them out but in the case that it doesn't easily return it so we are now actually using filtering here of course that this this looks more like a filter so what we can do in order to remove undefined is to now use filter lastly because filter will help us remove every null value or every undefined value so we can use i think yeah i think is the filter we can use it over there so for the filter we grab we grab the data we can now say the data is not equal to undefined so whenever that is done we just have to dispatch a type of all all users so let's go ahead and create our types so we actually don't handling everything for users so all we have to do next now is to populate the users and make sure that we can be able to display those users and uh then we can now start working on our zoom application so guys we really come this far make sure you hit that like button and also the subscribe button and in next part we just move ahead so thank you very much for sticking around before you continue make sure hit that like button and also the subscribe button so in the last part we have been able to get all the filtered users so these filter users are actually coming from our database so that we don't have a duplicate users in our database so you could see we have a list of users that is not the same email address that we use to log in which is very nice and what i can now do here is to dispatch that so i i was thinking that we didn't create that so we already have a type of all users so i just have to hit enter to bring that in and we dispatch that to our redox so this is get all use us so we can pass a payload of f filtered users which is very nice so one more thing we have not yet handled is uh for the new user join so the new user join is also double like the active users so the new site join is here whenever user join we have to admit to other users that a new user has joined so what we can just simply do is very simple so beneath this uh thing is called active users we just have to get new user joined so we can use the socket.on new user join which is going to grab the user that just joined and we have to dispatch a type of a new user with a payload of the user that just joined which is very nice so i think i hit f11 so just save that so whenever any user join that doesn't exist in the database it's going to actually store that and also admit to other users that a new user has joined so that's exactly what we did here and let's go ahead and display uh those users so refresh now application so that was supposed to work when we saved that so i made a mistake here changes to users and also changes to filter users f users so you can see we have other users that is being displayed and checking back here you can see that the name i think we have vg0d19 and that's exactly what you see here vg0 d19 so these are just other users that are in the active charts so we are set to start now working on our zoom application to actually make use of this group call screen and also use that to uh create a pair connection using the socket and let's go ahead and start that immediately so whenever we come over to this group called screen the first thing we have to dispatch is this join screen and inside this join screen you could see that we are passing a parameter uh i don't actually remember what it's called but i think i've been referencing this in the wrong way so we are passing at least a value from this parenthesis is called stream so this is just the stream that we are passing so we have to display that stream on our own so this stream as well is going to be storing from the reducer so we are now going to be making pretty much use of this video reducer so we are going to be creating our own reducer but first of all let's just go ahead and store that and before we move ahead we have to grab the user from dot getstate.org we also have to just give this a room id of stream general so whatever you want to call your own you can call your own so for here we have to dispatch my stream which is a payload of stream and we have to also dispatch a type of ad stream which is gonna be uh taking our stream and also our our it's gonna first of all it's gonna take our stream so let me just scroll up a little bit and it's going to take the user that is actually joining the screen the stream actually so let's save that and let's join so why you can see double users is because we are generating a random email address so at the first place you could really understand how we did this when we did a little bit of authentication by using the assigned storage so number if you see like 100 users here that is because we are using a random email address generator so i don't think that's an issue as well at least you could see uh we have dispatched this but we don't have a way of handling this so let's go ahead and handle that immediately so let's go over to the video reducer in our introduction i showed you how we how our application was going to look like you would see that we had something like a grid view of video streams so let's just go ahead and add our structures the way we want it to be so the first one is my stream which is very essential the stream of the current user then we have the second one uh to be streams and then the last one to be remote streams but i don't think we are going to be making use of the remote stream in case we have to add something else then i can just go ahead and add that but this is what we need for now so let's just go ahead and handle for the my stream i think for my stream here we yes we dispatched my stream and also we dispatched our stream so we have the keys of my stream which is going to return a state of my stream and we pass the payload of that my stream and then we have also the case of add stream so whenever we are dispatching to our stream we are dispatching with our own credentials the user that just connected so what if the user has already been in our stream in the redox state and the user happened to leave this screen and decided to come back we want to steal this part sorry display the user stream but not duplicated so if you if you could check here we are sending the stream of the user and also the user details what you just have to simply do here is to grab the streams so we can just filter out status streams so we are gonna be filtering with the email we're gonna be checking making sure that the payload.email remember is an object is not a call to the email of any existing stream just filter that one out then we can just return any anything in our states and then for the stream itself okay in our state okay we have we have streams yes we have streams then we can spread the streams the non-duplicated streams and then you can pass in the payload which is very nice which is going to return our stream and also the existing stream that is not our own initially so let's go ahead and save that and that is going to refresh our application so after we add to stream we can now open a psjs connection so scrolling down here so i went to file i can now open a psjs connection so let's just say peer starts here so we say peer server dot on open so whenever we open a peer connection it's going to give us a pa id so this pa id is used by the peer web rotc to actually know that a user is uh is connected on the server then we dispatch a type of add my peer id so this add my pid is very good but i don't think we [Music] i don't think we actually need it because we are not going to be dis disconnecting from this psrva so for some reason i don't want us to do that for now let's just focus on the basic parts of this so that that will give you an ideology of how you can do the next thing so we just have to emit join stream room so the join stream room is going to use this peer id and create an offer so we have the socket id as well the socket id just uh to use that and uh let's say twist and to add the socket id into a room so the room id is actually this uh stream room stream general room here so let's say you also want to create a general message for others you can actually use that room id to emit a message and send to all users there and uh beneath here we have the socket id then we can pass the user that is just connecting so whenever we meet let's go over to our server and come down here so this is supposed to be um socket i think for the sockets i think we went too far and that is supposed to be inside this i o so we have to listen for uh pair connections now for peer connections it's going to be taking the socket that's on join stream room and it's going to be accepting the room id the peer id as well the socket id and also the user then whenever we are done inside that we have to return a callback then a callback is going to join the user to the room id and it's going to emit to other users in that same room so we have to admit to room id dot broadcast does emit user connected so we are emitting back with the peer id the user the room id and also the socket id so you can see that this is just like uh when you are well don't worry i will still explain some things to you when we are done with this tutorial but at least you could see how we we actually using this peer id to connect to our server then we meet that to other users so other users are going to be receiving this message or these parameters over here on users user connected so i'm just going to grab this user connected so that i wouldn't make mistake again so whenever a user connects beneath this psr it's just very simple you can just say socket that's on you paste that user connected and it's going to accept those peer id the user the room id of the user that just connected the socket id of that user and then it's gonna return a call back and it's going to connect to a new user so whenever we are connecting we still have to just pass these parameters so we are going to quickly create a function called connect users and it's going to accept everything here so quickly let's connect that so we are still going to come back to this one but at least you could see that we can be able to connect a new user whenever a new user joins the chat room we can be able to connect to that user so when this happens we just have to make a call to these latches that i just connected from other devices so we say call the last user from other devices so we just use a call and we use the peer server dot call we are just calling with the peer id and also the then we can just pass our own personal stream and for this stream i think it's going to be coming from here which is our stream so our stream is exactly what you see that we pass at the top here so we are going to be using that our stream so each user or each individual is going to be using is our stream and then call the user that just connected so here we can just pass down [Music] the stream so you can see that color changes so whenever we make a call right now the application is uh awaiting some call so at the end of this tutorial we are going to test run everything but just know that everything we are doing here i'm going to be explaining it so that everyone can understand as we move along so whenever other users call back the user that just connected they are going to be calling the user with the pa id the pair server manages everything for us then with their personal streams so that the personal stream is going to be populating here or to be populated here so simply what we just have to do is to answer the call back from this user that just connected last then that will lead us to move a little bit at the top so right here we can just say last user receives a call so whenever a last user receives a call we make use of the peer server dot on call and it's going to accept a call so the user need to answer back the user that i was just called back need to answer back so we can say answer back to all remote streams then we can just say call those answer so remember that this stream here as well it's also the stream of the user that just connected so whenever that happens we just have to uh populate all the users that we just outside populate their streams on our uh screen over here so we can just say answer asadi so guys sorry let me kind of check some things so we are still on the right track so the last user answered the stream with his own stream so what is happening here is just that both users have been able to call themselves but right now they are not able to actually get their details or kind of know who is calling who so for this one now is answering back from all the devices that just made a call to us so when we answer we want to now make sure that we can be able to use this stream and display it on each individual devices so that's going to make us to answer back from remote streams so we can just say answer the remote calls back from the last device so you can say call dots on stream which is going to get the remote streams and then here we can add order streams to stream array thus other users streams to stream array so here we can just quickly dispatch a type of ad stream and then the payload of of the remote users so this is where things kind of uh needs to get complicated so for the remote users here is going to actually take this uh something like this the remote users have to be coming with their stream and also with their user so that's not an issue so what i just did here was very simple i just created the for the remote streams as well therefore the name itself we just created a random id then for the uid we also created a random uid so what we just simply dda is just very simple just to make sure that we have something unique that we can actually use to handle our mapping on our uh view so this one i just changed this to john rjma.com let it drop like other users calling uh trying to display that but here we can just give it a random email so when we give it a random image still going to populate it here and then when it populates it here we can see other users so right now this is what's happening other users answering a call from the last device or answering the remote calls from the last device so what about the remote devices need to answer the call that this one has made also so like we called the remove streams over here so we have to also create an answer just like this one so let's just quickly go ahead and do that so we can say get or let's say remote remote users answers as the last connected device so this is gonna be called that on stream last user stream it's going to return the callback so we can just make sure we have a last user stream so if we do have the last user stream we just have to dispatch a type of ad remote stream then with a payload of stream last user stream and also the user so that's it so right now we are done with these uh answering calls for both of the streams so whenever this one can't work except this user picks the call so you can even go ahead anyway you can go ahead and uh it wouldn't work because uh this on call must first take place so but right here you could see that whenever user calls we can just pick directly from that user then whenever there is a call going on we can even first of all perform this operation before we uh do this but you see you can't you can't do that you must make sure make a call so when you make a call the user answers the call over here the last user answers the call then whenever the last user answered the call that would be there will not be a connection to other users to other streams over here then the other streams now can be able to stream back the last user that's connected so that's exactly what you see here so let's just go ahead and undo the us and that will be the end of the tutorial we've really come this far so we've already handled for the ad stream so what's remaining here is remote stream for the user that just connected lastly and now you just have to come down here you can say case of add remote stream we're just going to return so what if in a case that we have remove streams with the same email address so we have to make some filter we can just say other [Music] streams dot state.streams.filter so we have the email you can say the payload dot email is not a call to the remote stream that is already in our states then you can now replace the streams with other streams and then the payload of any user that just answered our call from payload so we actually done guys please make sure you hit that like button and also the subscribe button and uh it's not remaining for us to test run our application to see how far everything has done or how far we have come so whenever we join over here we should be able to make call and also perform some operations which are very important like uh receiving a call from remote streams so right now let's go ahead and and give that a try so guys in case you kind of encounter error i actually uh made a mistake over here so this is supposed to be a comma then we wrap everything here in a parenthesis so kind of go ahead to fix that and that will actually fix your application so hopefully uh when we open our application over here everything should work pretty fine because i kind of tried it and i was having a crash and make sure you restart your server and let's go ahead and run the application once more to see whether we can be able to use double devices to join the chats so finally guys you can see that the application is working now and if we have multiple users they will all display together in this group called screen so we have come to the end of the tutorial please do make sure you hit that like button and also the subscribe button and don't forget to also share with your friend and hit the subscribe button as well so thank you and see you on the next tutorial take care and good have a good day bye

Channel: Bolt Skills

Views: 19,518

Keywords: Fullstack React Native Video Call Zoom | WebRTC & PeerJS, react native zoom, react native zoom sdk, react zoom clone, react native zoom tutorial, traversy media, webdevsimplified, freecodecamp, Build zoom application with react native, react native webrtc, react native video call, react native whatsapp video call, react native video chat app, react native video call webrtc, react native video streaming app, react native video calling app, react native video player, boltskills

Id: as26dS-KbHw

Length: 69min 19sec (4159 seconds)

Published: Thu Nov 26 2020

Reddit Comments

[u/crocxz]

Bumping for future reference, good stuff

[u/Anasurimbor_Cale]

Hello It seems you are in Cyprus. I am Greek born in London. I really like your video. I am building zoom clone. But I want to do background notifications, can you help me with those?

[u/kidUg]

good stuff buddie