🔴 Build a Zoom Clone with Node JS for Beginners

out our zoom clock guys this is insane we're building a zoom clone that looks exactly like this it literally has it looks pretty much it looks pretty much like zoom except that it is a zoom clone a web version of the zoom cloud clone now with me here today guys i have yousef with me he is on the clever programmer team and he is just an amazing guy and he's going to be building the zoom clone with us are you pumped yeah so guys so guys so guys today like i said we are building the zoom clone this is this is what it looks like now you said what you what you can go ahead and do let's go ahead and actually have you join this join this zoom uh zoom clone room check this out guys this is insane on what's actually about to happen so i'm going to have yusuf join this specific this specific zoom cl zoom room hold on i'm going to please send him the link he's going to join it he's going to join it and then he should appear in here as he joins it which is just look at that guys now yousef go ahead and actually unmute yourself mute yourself on the zoom perfect perfect zoom uh yusuf can you hear me oh he's gone yusuf where'd you go there we go hello yusuf go ahead and meet yourself on the zoom clone perfect guys guys this is insane check out this amazing zoom clone it literally looks exactly like this it's a web version who is pumped drop it in the comments below we're going to get started soon like this is crazy guys we have so many people in the comments we have you guys in the comments we have zidoo we have leo we have we have tada uh we have let's say money is like yo you started let's go let's go let's go we have abdullah yo abdullah what is up we have shantahu let's go mahi finally yes let's go scout up hey nas hey yourself abdullah what's up man guys so good to see you so good to see you who is pumped drop that in the comments below i am temp i am pumped because this is going to be an amazing project it is something that we have not done before you know like i said as zoom clone like it's insane and you can see it right here right you guys can see the zoom clone right here look at this look at this right we have the style video i can literally look check this out i can literally stop the video i can stop the video right i can resume the video i can use mute myself i can unmute myself i can actually chat so actually yusuf can you just type something for me type something for me okay type something for me he's gonna type and i'm gonna see look at that hey nas look at this guys hi nas that is insane insane guys how insane is this how insane is that drop that in the comment below hey hey hey hey hey somebody's like mpm and yes guys we're gonna use amp on it don't you worry don't you worry yo biggest fan hey let's go let's go guys so good to see you so amazing to see you guys now uh yusuf can you really quickly introduce yourself kind of like who you are what do you do here cover programmer and what we you know what are we going to be building okay let me back to skype let's go go back to skype actually no stay on here stay in here let's stay on here but just talk stay in here uh okay yeah one sec stay on here stay on here i'm there there we go just mute yourself yourself yeah all right hold on one second let me go and refresh hold on there we go go ahead now talk okay so my name is yusuf i'm 21 years old javascript developer joined cp team uh four months or three months ago so proud to be with this family here and today we are going to build this amazing zoom clone with nazari uh you guys will enjoy uh this this amazing club yes we will not guess like i said yusuf is part the cp family guys we have worked so hard we have worked so hard on this project for you to to bring it to you here today so i really appreciate you guys literally but i really appreciate please go ahead and smash that like button smash that like button okay smash that like button you know you know we worked really hard for you on this we went ahead and we were working on this project for a long quite a while now to make sure that it works properly to make sure that it functions properly and so you can actually you know build this yourself so really appreciate this guys if you can smash the like button you know on the facebook that really help us out you know and they'll kind of defeat the youtube algorithm as well so yeah guys let me know if you smash the like button let's get this let's get this video guys to a thousand likes let's give this video to a thousand likes in like this let's go yes yes yes yes yes yes let's go guys amazing amazing amazing hello there from natal natanal oh no oh no oh no how how hi hey what's up what's up now guys those of you who are new i'll repeat this one more time uh what i will say is for you guys again you know we're building a zoom clone insane zoom clone looks just like zoom you can see right here we can stop video we can oh we can stop video we can mute ourselves we can i can literally start the video now look i can stop the video and i can resume the video and then he can see it on his side as well so yusuf actually stop the video on your end saw the video on your end okay do it do it did you do it there we go look check this out this is insane guys insane insane insane insane so actually yousef wait here's what i want you to do let's go ahead and actually have you join back on skype and back on the ecam live back on ecam live right here okay so go ahead and just kind of quick quit off that and we're gonna we're gonna join ecam live guys there we go hey there is yusuf what is up bro like i said what is up we worked really hard on this so really appreciate if you guys smash this smash that like button share this video you know subscribe to this youtube channel we'll be working really hard and bring you so much so much content so much content and so much knowledge right that's what we are here to do so smash the like button and we're gonna get started guys are you pumped who's pumped yusuf are you pumped bro are you pumped bro of course of course of course sweet we get nero in the house hey what's up nero how are you doing hero let's go back to let's go ahead and go back to our amazing amazing zoom clone clever programmer yo kazi kazi's pumped what is up quasi oh man guys we're about to start we're about to start really quickly here really quickly here by to start really quickly here guys we have insane 700 people let's go 700 people are currently live right now that is insane i cannot believe this guys require it's insane guys who's pumped to build a zoom clone just like this who's palpable zoom clone hey actually i want to show you something guys so let me let me go ahead and type a message here to a message yo yo look at this and then yousef you go ahead and type a message type a message you say for me type of message hello you see he just said hello guys like crazy stuff crazy stuff yeah so i'll give them applause yay let's go sweet sweet sweets wait so guys we're pretty much gonna we're about to get started one thing i will say like i said really appreciate if you smash that like button it's gonna help us out really really really much and then let's go ahead and okay and let's go ahead and i'll subscribe this youtube channel and one thing i'll say is we have a master class right now we have a master class uh a free master class for you guys uh you know uh if you wanna go ahead and join that link in the description go check it out you know if not that's really fine and make sure to also tag us in your instagram videos okay instagram videos handle right here nas so when you create a project tag us and then yousef tag yusuf as well cool yeah yeah are you ready are you ready let's get this started everybody let's get this going so okay let's go ahead this is what we're building as you guys know we're gonna get started really quickly here i'm gonna drop through the comments we have so many amazing people rishi hey what's up reishi let's go oh man what is up guys what is up ah so many so many so many let's go so you guys like broke that like button i love it hi qazi what's up i am from morocco sweet sweet sweet sweet all right guys so make sure you have all your stuff ready make sure you have your computer open and are coding and if you guys like i said you can't follow along that is completely fine you know do your best on this you know we're gonna post the code later on for you guys to uh to see and you like you guys can also actually rewatch the video later on after this live call is done all right other than that drumroll please and let's go let's get to it sweet so here's the first things first that i want to go ahead and you know i want to do uh let's go ahead and actually let's we're gonna you know create a new tab right okay new tab we got this right here beautiful i'm gonna push this here look at this amazing by the way uh uh chrome extension i love that chrome extension let's go ahead and go to our vs code so this is our viewers code right here guys really important this is where we will be coding okay what will you be coding but the way you have how's everybody in the comments all good yes you're applying okay beautiful beautiful beautiful so let's go ahead and this is me and yousef are actually using something called uh screen uh live share like views code live share so we can actually code together at the same time which is insane so we create a project called node.js zoom clone it's literally just a folder that we created and inside here we're going to simply create a new file we're going to call it what server.js server.js let's go ahead and do server.js okay server.js now one other thing i want to mention is yusuf uh let's go ahead and actually who i want to give a shout out to one amazing guy who gave us this inspiration actually we learned a lot from in terms of how to build a zoom clone like this who's that guy yusuf who is him do you know web dev simplify web dev simplified so what did simplify check guys check him out on youtube amazing guy we learned a lot from him and actually how to build this you know zoom clone he helped us out a lot so really appreciate that web dev simplified but today we're gonna take that what we learned and get it to even more to even more and more epic version of the zoom clone as you just saw all right guys 775 people live holy [ __ ] that's insane oh amazing bro amazing amazing indeed sweet new this is awesome coding snippets says i am so interested let's let's get to it so first thing let's go ahead and actually i need to name this not serve.js server.js very important okay server.js and let's go ahead and actually inside here what i really want to do is i want to kind of create a really kind of a really quick game plan okay so it's kind of a new file i want to say plan plan.md okay let's just create a new file when i create a game plan very quickly here so i'm going to say inside here i'm going to say i'm going to say um so i like to say plan of action i'm going to say plan of action because who does not like a plan of action am i right guys am i right drop in the comments below who likes a plan of action right we all love a planet actually important yeah that's so important guys all right so with that let's get to it so plan of action first things first that we want to do is what we're going to uh so is we we want to initialize our project right initialize our our node node.js project project amazing okay then we want to go ahead after initials our node.js project we want to go ahead and actually in estra initialize our first view right so initialize our first view okay initialize our first view okay so first view that's actually basically what you will see so you know what you will see on the front end that's the first thing we need to go ahead and initialize all right okay somebody asked somebody asked daniel asked hey can i still participate if i do not have any experience of course daniel yes you can yes you can of course you can participate this is for everybody to learn you can just kind of you know do your best and then you know learn that's that's what that's that's what it's all about all right initialize our first view okay after we initialize our first view you want to go ahead and actually add the ability ability to to uh kind of to view our our own at the ability to view our own video okay video but before we do that we actually need to go ahead and um create a room create a room so right so when we go ahead and inside here right this is this my friends is a room so this is the actual zoom clone this is a room and we are i need a in a room you can see you see this specific id right here this id right here is like as i kind of highlighted we need to create a way where it will actually go into a room when somebody joins it okay so we do a great create a room id right there just like that okay and uh yusuf you can just keep an eye on the comments and then let me know if there's like anybody who like gave a donation or anything like that or anything like super chat anything that'll be that'd be appreciated okay and then i will go ahead and i will just kind of i'll kind of pop it up just one thought uh someone asked if we can we will cover the deployment yes yes guys we're going to deploy this app which is just insane insane all right so add the ability to view our own video then we will go ahead and add the ability ability ability to um allow others to stream their video right right correct by yusuf correct correct yep all right all right and we will go ahead and add ability then we will after we have done that then we want to go ahead and add styling okay um then you want to go ahead and add the messages add the ability ability ability to do to create messages to create messages and then just you know simply add mute button mute button uh and then add um add stop video button all right does that does that make sense guys drop in the comments below if that makes sense if that's a good plan of action for you because i think it's a good plan of action all right definitely definitely definitely definitely it is all right all right all right somebody said is the video streaming by peer-to-peer hold on this is actually amazing is the video streaming by peer-to-peer yes it is by peer-to-peer actually and you will see you will know we're talking about later on okay uh so yes what api we're going to use uh you guys will figure it out we're going to do something called socket io we're going to use node.js we're going to use peerj yes and we are also going to use what else node.js socket io and then pure js that's pretty much it right yeah uh egs and uh also uuid library and uid um express server yes and express server so with that in mind what i will go ahead is inside the server let's go ahead and literally get this stuff get this stuff going okay oh i'm here so inside server.js guys you know first things first when you create a when you are creating a node.js application which who who dropped in the comments if you know what kind of node.js is very important okay if you know what node.js is drop it in the comments below um and yes we are using webrtc by the way yes we are using rtc yes okay hold on hold on by the way is everything okay with our our stream it looks like i think i think we're all good right our stream is still all good 870 people holy moly [Music] all right that's amazing bro that's amazing so first things first i'm going to do i'm going to right click and open an integrated terminal okay and then inside here i will go ahead and do um what do we say npm init and pm init to initialize our node.js application okay npm init okay okay and okay and then npm and then enter and then this will pretty much just ask you a little a few questions about your project right in terms of like your package name we're going to say node.json cloneless enter enter enter enter enter you know enter don't worry about this don't worry about this don't worry about this yes um justine i just asked the question what is the difference between react and node.js so yeah go ahead you actually you go ahead and explain that yeah so uh in in website we have the front end which uh which is the ui the interface we see and we have also the back end which we don't see and which handles all the routes and the databases so react we we uh use react for the front end but no js we use the for the back end that's the different so if you know react and no no js you are a full stack developer exactly guys exactly so node.js for back end react.js for front end and that's all you got but both are very important got that sweet sweet i love it i love it alright so let's keep going guys let's get to it so we've created our initial thing and usually what happens guys it's really once you pay attention to this you see this package.json file this is what happens when you create an npm init file correct npm init is files creates this package.json file which will kind of tell us you know what our project is about very important okay um no i'm gonna keep it here okay so after we created our npm manito file okay what do we what do we want what do we want to do um yusuf what's the next thing so we start with our server right now after uh we install we will need express.js so we will need to npm install express npm install express so express those npm installs but i'll explain that in a second what is npm install express express right here boom and pnsl express that is how we're going to build our api okay and that is basically exactly yes so mp on external express and you can see it actually really interesting it adds a dependency here express inside the package.json file okay so always always keep that in mind guys 885 people holy [ __ ] okay oh [ __ ] bro so guys make sure to smash that like button as you know make sure to smash that like button really appreciate that by the way for yusuf this is the first time on his live call so smash the like button for yusuf give him some fire in the comments guys you know he's an amazing person yeah he's amazing person on this clever programmer team it's insane all right and make sure to follow me on instagram for daily tips yes instagram yes exactly all right so we got that we fought we installed express and then from there on inside here server.js let's go ahead and initialize our express project so what i'm saying i'm gonna say const const express is equal to okay and then require require express correct yeah it's probably express express view boom right there it's require express i'm going to save that okay all good okay then inside here when i say create create an app i'm going to say const app equals express this is how we initialize our express application okay and so for you those of you who do not do not know what express is literally okay literally what expresses so if i go ahead and do express express nodejs you guys will see what i'm talking about express node.js you see accenture is a fast and on a payment it's a minimalist of a web firm framework for node.js so this is what allows us actually guys to build web applications that's insane it's to build web applications okay this is what we used express for it's it's kind of like you know it's like you know node.js and like express they go together like peanut butter and jelly does that make sense does that make sense yes it's like peanut butter and jelly okay all right sweet let's continue on let's continue on but by the way for those of you who did not see have you not seen the zoom clone check this out this is the zoom clone right here all right sweet so express we've created that go ahead yusuf uh i would suggest uh to close it because i think it's repeating your voice there the the zoom clone right there how about now is that better yeah i think so okay so that's the was the one okay so we have got we have got that this is all good what i wanted to go ahead and do now is we have inside constable express let's go ahead and create our server that's actually going to run right so i'm going to say so i'm going to say const server is equal to require and do it do we need to install http actually uh i think no it's a built-in built-in exactly that's built-in server and then we specify what app what app we want to use okay so now within this guys within this all we got to do pretty much at this point is simply listen on that server and actually run it so i will go ahead and do server dot listen okay that listen and i will say let's go ahead and the current port we're going to use let's say 30 30. okay so we're going to use a a 33 so this is basically saying that hey you know the server is going to be localhost okay it's going to be a localhost and the port is going to be 30 30. okay now what you guys are saying what you see is something that connects two peers exactly a beat nice job this is exactly what we're going to use so we're going to use webrtc for this specific task all right sweet sweet tweet holy bro a thousand viewers a thousand one game bro [ __ ] oh man a thousand viewers that's that's insane thank you without expecting let's keep going let's keep going guys all right well so with that with that said uh literally we have everything now ready and what i want to go ahead and do now is go ahead let's go ahead and create our first kind of url that we're going to hit okay so the first year we're going to hit is going to hit the slash url which is the root url okay makes sense so i'm going to say const and i'm going to say i'm going to say app dot get dot get and the app.get is saying hey what url are we going to hit this is where our application is going to live okay like on what you know url is it going to live on and it's going to live something on the root folder or root to icon which is simply slash and inside here i'm going to use the es6 request response i'm going to say like this request response okay and i'm going to create a function this by the way is es6 function function right just so you know and then inside here all i will say pretty much is i will do um response what shall we do we shall do response what should i say response.status that status right when i say 200 dot after status how do you how do we return the actual like um actual code do you know response.status 200. and we can make it say and then we can say and then we can return for example like hello world uh yeah uh right right i think down right exactly now right right there and we're gonna say hello world hello world right there hello world beautiful okay save this right here all is good status is 100 and all we need to do is now run this guys that's pretty much all we need to do by the way how many likes do we have how many likes do we have right now uh one 1.1 k 1.1 k insane insane guys so guys in order to run our server by the way who knows uh drop in the comments below who knows um how to go ahead and run a node.js server okay dropped in the comment below so if you didn't know but what we are going to use is we're going to use something called nodemod so what you want to do is you want to do npm install npm install okay nodemon nodemon and you want to do npm install dash g dash g node mod and why do we use g uh yusuf g to install it globally exactly to install global so we can basically use it anywhere now i have done this already so i already have no mod so i have to do i know i do not have to do this again guys but all i have to say that and at this point is literally i will do nodemon and i will say server dot js just like this and that's it no master.js and that is it now my literally my app is running are you ready to see the response are you ready to see the response go let's go here we have that so we have saved this okay let's go ahead and go to our response and i will literally say localhost localhost 3030. and are we on there are we on there replace it with send oh right send so inside the right it's actually sent my bad app.get and we have we do have server that listen that looks like that's all good boom save this again hey there we go check this out guys we have our hello world which is insane and it's crazy guys we have already just just like this we have created our first node js app now yes it is very simple but that's insane like how is right that's that's insane right yeah so that's very much insane yusef all right we are building it from scratch bro from scratch guys surp yo yo we broke a thousand what thousand viewers yo let's go let's go let's go oh man man somebody's like anira was like oh my god i'm working for me too i'm excited let's go so many people are excited i love it i love it i love it i love it i love it love it sweet uh you go ahead and actually maybe answer some comments if you have a answer go ahead and answer any comments you got you know in in chat if you can okay i'll keep answering comments so you can alright let's keep going so we got our hello world right all that all is pretty much it was good right we have that what's the next thing that we need to do yusuf since we have our hello world done uh now we try to set uh to start to set our rooms yes yes yes just to go to the specific room exactly we are going to specific group now we want to do is we want to we want to go ahead and create our first index.html file right and the way we're going to do this is actually we want to create a folder called views so i'm going to create a folder and this folder is going to be called views ready so i'm going to say new folder okay and i'm going to say new folder and i'm going to say views oh wait wait wait and then views just like this views okay so that's views so and inside views guys can you guess what's gonna be inside views drop in the comments below what do you think is gonna be what do you think is gonna be well check this out i'll go ahead and create a new file and this is going to be actually our room that dot uh ejs for now now signing by some of you might be asking what is room.ejs now room.ejs it is going to be a it's going to be an html file this is where our code will live okay so inside here exactly yes this is an html file you can actually see it right here you know it's specified as an html file all right so inside ajs means uh embedded javascript so you can it will help uh it's embedded javascript inside html yes so basically it will allow us to do what what will allow us to do uh to pass variable in the html yes beautiful so we can pass in variables we can basically our node.js server can talk with the front-end you know uh room.egs file okay so what i want to do at this point is i'm inside here i'm going to create html boilerplate okay and it's a really neat trick and i want you to listen to this really quickly here a really neat trick is they used to do exclamation point and just hit enter voila we have ourselves just like that we have a set of boilerplate for html that we need so i'll go ahead and say this is a zoom clone just like this boom save that and i will say yo let's build this let's build this sweet all right cool cool cool let's build this all right so we have that so now we need to do obviously is when we go ahead and go back to here you know we still nothing's gonna happen nothing's going to actually we're not going to actually get it will not actually take us to where we want to go so in order for us to get there in order for us to get there my friends what we literally need to do is the following so if i go back to server.js and inside here instead of the serv response the status that 200 what do we need to do what do what do you need to do instead yusuf who knows huh so now i was just asking if they know do you guys know do you guys know but if you know yousef i'm asking you what do you think uh i think they they might no they might probably because ejs is new for some of them okay okay okay okay sweet so let's go ahead and inside here what i want you guys to do it's going to be like this so when i say response dial render render and the render is saying hey what view file are we going to enter and we're going to render the view file this simply just says room okay and then and then that's pretty much it that's all we're going to do that's all we're going to do just render this file so if i go ahead and actually save this okay if i save this if i go back to here oh nothing was specified look at that this is interesting right so we have an issue okay what's the issue okay in order for us to fix this issue what do we need to do uh yusuf so first of all uh we uh we didn't install egs okay to install ajs so npm install so let's go to quit out of noma real quickly and we will say npm install npm install and then what is egs for again just explain that really quickly it's an embedded embedded javascript uh uh embedded javascript so it will help us to get variables from the backend to the front exactly exactly and a lot of you guys are saying hey install ejs first yes you guys are smart smart cookies somebody said import room no no engine no engine yeah maybe i don't know about no engine thing that's interesting yeah so now yeah because now we need to set to tell the to tell express that to set the view engine aj yes exactly so we have installed you can see we installed ejs right we've done that and then all we need to do now is we obviously we need to go ahead do we need to import ejs or no we do not need to import ejs we don't right no we don't need yeah we don't instead what we need to do is we need to app into app.set app.set and i'm going to say hey the view engine for us is going to be so view engine for this is going to be what ejs exactly so let's go ahead and save this okay okay let's go back to and then let's go back to him we say nodemon just so this is a nodemonster.js let's restart our server guys okay boom right there save that refresh that here is it bro guys check this out just like that we've installed and we have installed egs and now this is working just as it should right now we're actually using the view file from ejs does that make sense does that make sense yusuf of course of course it makes sense of course it makes sense by the way just really quickly guys if you want to you know you know we have a free master class for you guys if you want to learn you know how to become a developer right we have a free master class link in description if you want to check that out completely free for you guys no problem just go ahead and check that check that out click the link in the description and you know and that's it all right let's continue on guys we have so many people oh oh man some of you guys this is amazing he's amazing all right so with that with that said we have created this okay insane stuff okay what is the second thing that we're going to do all right if we go to our plan we initialize the project done boom oh good right applause for us on that one okay and this has our first view we've done that boom boom hey wait wait no no there we go that's the one next thing we need to do is we need to create a room id right create a room id guys how do we do that drop in the comments below okay how do we create a room i d guys all right do you guys know a specific id a specific id so what we want to do is let's go ahead go into server.js okay and let's see you see okay and what sheila said install uuid create the ability to join beautiful so what we are going to do is we are going to go ahead and create a really interesting um a really interesting what's it called use a really cool library called uuid so check this out what i will go ahead and say is i will go ahead and create a new terminal okay i'll create a new terminal and i will say npm install and it's called uuid correct uuid yeah yeah right uid boom just like that and the reason why can you explain to them why we're using uid4 okay so for uh you we need the unique id which is your id uiid will generate random ids so for every specific rule we we give a unique id so for example if i join uh if i go to the zoom clone i get a unique id for me and i want to invite my friend through this room but if somebody else create a new one he can join i just need the unique one exactly so this will allow us to create these unique ids for the rooms all right so we've installed a uid okay next thing we want to do is we need to import our uuid in our server.js okay so what we are going to do is we'll say const const and i'm gonna say um i'm gonna say actually i will i'll import a certain version of the uid which is gonna be v4 some say v4 okay and i'm gonna say uuid v4 just like this and i will say equals require require require okay and this is going to be required uuid okay so we're going to import that library okay we're going to import that library beautiful so we've got that next thing we want to do is our goal guys at this point is look we have you see this you see this um you see this link right here you see this link right here right and let me maybe i can i can yeah i don't want to use too many things but maybe show screen brush that's fine here see this link right there this link right here right this link guys is what we want to do instead of using this link we actually want to have like a room id be in this link okay so what we want to do uh in this case and actually to in order to actually have it like as a room id all right as a room id what we want to do on the option tab there we go as a room id what i want to do is i want to create a new a new um url right a new url exactly okay a new url so i will do app dot get oop okay i'm gonna say app.get inside here actually let's go ahead and get some more space here right there so i'm gonna say app app.get okay and inside here i'm going to say slash and i'm going to say room now here's why it's room the reason why it's room is because this is going to be a room this is a parameter think of it as just like a number right it's a parameter okay so i'm going to say room okay and then i'm going to say request our request comma response okay and i'm going to say boom oh okay this is where our request request response will be and inside here actually is where you want to go ahead and render this room so instead of rendering it here we want to render in here so i'm going to say response dot render room render uh like this room right there okay and then we're going to pass in some kind of parameter i'm going to say for right now it's going to be empty so i'm going to say room id right yousef room id yes room id exactly okay and then we're going to get a parameter a room id parameter so what is what is that room day parameter so it's going to be what it will be the request now how do we actually get that how do we actually get that with the way we get that is actually through here check this out so instead of rendering it on the the in the what's it called the root the root url i'm going to render it like this i'm going to say response dot redirect okay i'm going to redirect our root folder or root url and i'm going to say inside here i'm going to say here check this out check this out okay i'm going to say slash slash and boom oh wait wait wait wait wait slash slash boom boom boom boom this is by the way is called using string literals it's called using string literals e slash and this is going to be uuid v4 and that's a function okay so what's going on here yusuf explain to us what's going on here like what is going on in this video before yeah so so we know that the this route is the main route so when you go to local localhost 3030 so it automatically will generate a uuid for you and redirect it redirect you to it okay yes exactly exactly but exactly and app.get will get that you you id that you the uid function generated it and we notice that in the rest.render room we are passing room id to the front so that's where where egs comes from so we need to to create a cons and pass it to the front okay so here's what we're going to do when i since we've already done this okay we've done this and we have nodemon running right here this is nomad okay that's already all good no not a problem if we simply now go ahead i'm gonna i'm going to save this if we now refresh this page check out what's gonna look at this you see this check this out so literally you see this url right here as i'm highlighting it right that url my friends is a uuid so what happens is it literally redirected me to a url with your id which took it to here which then rendered the room perfect now what we can do is we can pass in this room id into our room.egs so i'm going to go ahead and save this i'm going to go to room.ejs and inside here i actually want to go ahead and i want to console log this room id so i will go ahead and inside here i'm going to create a script tag really quickly script check okay i'm going to say script okay script i close out this script right here ooh script okay just like this and i will console log i will console log console.log console.log um our room id which the way we're going to do console.log it is we're going to do like this i'm going to say here and then i'm going to use a temple then ejs templating which looks like this okay and now we'll specify room id okay and this is going to be just like that all right so console.log huh right there right there right there beautiful so so what we need to now need to see is when inside the log we need to see that room id i actually know it's like this is room id yes i see that's it so we've done this okay we've done this let's go ahead and refresh this page boom if we inspect them and on this guys let's go and inspect elements on this let's go to console.log and look at this we have our room id exactly how we need it look at this see this room id boom this right here is the room id we've just passed it in from our node js server which is insane insane insane okay insane guys some of you like this is where egs comes in yes this is where ejs comes in by the way we have a thousand and one hundred what likes hum a thousand 100 what views a thousand almost 200 views guys in saying guys thank you guys so much guys make sure to hit that thumbs up thumbs up thumbs up button we will really appreciate that okay we really appreciate that so we've done that that's all finished now okay what is the next day that we want to do use of you oh you said can you hear me oh yousef looks like yusuf is pause here for a second but it's okay we'll just keep going not a problem at all not a problem at all all right so what i'm going to do at this point at this point you said when you can get on that's not a problem just you know try to get on as you know as fast as you can we've done this next thing guys we need to do is look we have created our room id which is that's completely done here boom done not a problem all good okay that's all good now so the next thing to do is add the ability to view our own video okay we want to view our own video so the way we will do that is if we go is now we need to create actually a um a script file okay so we need to view our own video in the ejs file so what i'm going to do is i'm going to go ahead and create a public oh looks like looks like yusuf is gone which is fine just fine boom all right it's fine so what i'm going to do now guys is i'm going to go ahead and create a new folder and this new folder is going to be public folder okay just like this public folder and within this within this i will go ahead and create a new file called script okay script.js all right and we need to now at this point is actually import that script.js inside our html so i'm going to say script let me say script boom script source and i will say script rip dot js okay now when we save this so when we say this go ahead and save this okay save this and let's go back to our refresh you can see this oh i split the token at script.js1 if we go to here wow looks like that's all good that's fine script.js script.js room.egs seems like that's all good that's not a problem refresh this one more time [Music] that is fine let's go to network to make sure that that's all good looks like we're getting our script.js which is actually just simply empty it's not a problem all right at this point what we need to do is we need to set the public url for our script file so if i will go ahead and go to server.js i'm going to say to the server hey server our public files are going to be here so i'm going to say app.use app.use use and i'll say express dot static okay public oh looks like we got uh yusuf calling you have you in the house yeah hey yours is back in the house guys give you serato plaza give us a thumbs up button and we'll continue on going with this sorry for the technical problems you always we always got tactical powers you know it happens it happens you know all right so i'm going to specify the static the static folder is going to be inside the public url which is here okay so i'm going to save that okay i'm going gonna save that and then i'm going to now go back to my html file and boom now our script file is in here right there and we are actually loading the script file now so you see the console that we do not have that error anymore okay so now basically inside the script file this is where all all our javascript for the front end is going to live does that make sense right that makes sense i think right this is where the javascript of the front end is going to live okay all right so what we want to do now is we want to go ahead and actually create a video element and actually show our own video inside the page okay so how do we do that yusef how do we do that don't wait so how about how about you go ahead and start typing a little bit right so like let's go ahead and you know show our own video inside the javascript file okay let's go ahead and do that just let me follow where are you right now because i missed the sometimes i'm currently in scriptage you want to go ahead and click the live share click live share and simply just follow me or i'll follow you go ahead okay so uh so now let's go to script.js yes so uh basically now uh so now what functionality we are going to create we are going to create a functionality where we are actually seeing our own video ah see so we want to request the to access the media i mean you access the video and the audio exactly so let's do that right now so the first thing we are going to do is uh let's first of all there's uh create navigator okay okay devices okay dot get user menu yeah and what this will do what this does guys for us because that gets us allows us the ability to actually get video and audio output from chrome so go ahead keep going exactly so the first thing we want to get is the video this one this uh so get user media will accept an object so the first attribute will be video so we specify if we want to get the video so we need to specify true so if for example if you you don't want to access the video we just type false but no we need video and need the audio type true so uh so now we have access but but this is uh as you can notice here get user media is will be a promise and who doesn't know i know some some of you know promise some doesn't but promise exists only in javascript so promise is an event in the future it will be either resolved or either rejected so take it it's it's in the like like a real promise i give promise to nas to call him so it will be resolved if i call him it will be rejected if i don't call him so beautiful go ahead so let's continue on by the way guys i just want to make sure i just want to give a thanks a shout out to we'll see we have a few people who just donated guys really appreciate that we have sanju thanks so much for the donations and then suman thanks much for the donation really appreciate that guys as we keep going really appreciate we have worked really hard on this and you know we love your energy on here and we just love you all on here so all right let's continue on okay so uh we want you to access to the promise when it succeeds when when the user accept to give access to the camera and the audio so we then we will uh create a function i use es6 function and you should always do es6 so uh this function will take an argument stream not create stream here okay open curly braces and so let's create outside the outside as a global variable a variable called my video stream my video stream so we because we want this variable to be global and access it not only in this uh curly braces my video uh my video stream and so on so now we created the variable now then we'll take the stream so this argument then my my video stream will receive this stream we assign it and my video three received the stream so this will be the result of the other videos it's just basically think of it it's just kind of like a video okay it's just kind of like a video and and so we're gonna save that video a stream that continues continuously keeps playing and when i say that you know inside so let's say stream so i'll keep going keep going i'm going to type here for a second really quickly here yusuf okay and then from that point on let's go ahead and create a function called add video stream okay i don't want to say called const okay i'm going to say add video stream video not video video stream okay video stream and inside this function we're going to type in a few things we're going to call we're going to take in a video some check this out i'm going to say like this boom that's a function we're going to take in a video object that's the video object on the element okay on the actual element okay and then we're going to take a stream okay and then with ex and then within that guys okay within this we're actually going to go ahead and play this stream so check this out so i'm going to say video dot source source object okay is equal to okay stream right now you said while i'm typing this stuff let's go ahead and uh enter some comments in the youtube all right just so like just so we we are on there as well so video that source object equals stream okay and then we're gonna say hey when we load all the data okay when we load all the data for this specific stream we're gonna do a we're going to play this video so i will say video dot add event your event listener just like this oh everybody i'm just going to copy my section just i'm going to start making this guys easier for us check this out so let's add event event listener on the load metadata and i'm going to say hey let's go and play this video okay and then what i will do is i will go ahead and later on i will append this video to a grid that i have so now nothing's going to show up just yet okay nothing's gonna show up just yet but what we are going to do is let's go and create a video element uh that we can actually play our video stream in because we have imported here but now we want to we want to actually create a video element so the way we are going to do this is the following i'm going to say hey let's go ahead and do const my video okay my video is equal to okay document dot create element we're going to create html element and it's going to be of type video element okay all right i'm going to save this and for the time b i'm actually going to my video i'm going to mute this video okay this is because this is my own video so i'm going to mute this so it doesn't kind of replay back to me so i'm going to say my video dot video dot muted is equal to true okay is equal to true okay and then what i want to do create so we can create our element which is cool okay but obviously now we want to add that element somewhere so the way we do that is now we remember how we called this functional add video stream so i'm going to call this function called edit video stream and i'm saying add video stream okay and then i'm going to pass it number one the my video right right you said my video which is this one my video about my video which is this element we have just created okay and then i will go ahead and say and we'll pass in the stream as well this is my own stream okay okay so that's all good we are on here but obviously if i save this guys what's gonna happen okay if i save this and i go back to here nothing's really gonna happen okay most important thing is you do not get an error which is i'm gonna get an error for that one because if there's no air that means it's good all right all right i'm gonna take off the glasses because this [ __ ] this this stuff is getting serious okay all right i'm gonna drink some water guys here for a second here all right beautiful so we've got that what i want to do now is is i want to create a html element where all of these videos are going to live let's go to room.ejs and inside this let's go we can just simply remove this and instead of this we're going to create something called a video grid so i'm going to say inside here i'm going to say div id is equal to video dash grid okay like this just like that okay and i'm going to close this out boom save this video grid that's so good now that's all great okay but you're great so inside this video great this is where we are going to add our video elements so let's go back to script.js and now instead of you know just simply playing the video the way we're going to do it is right we are going to add this video so i'm going to say document dot what the get i'll get element by id right diagonal id and what do we do there um yusuf exactly so we will retrieve the the video for right now okay exactly no we will put the video in there exactly we will put the video here exactly we will put the video but the way we're going to do this i'm actually going to get this video here so i'm going to say const video grid video grid video grid is equal to document oh dot get element by id and then i'm going to get the buy video dash good all right like this all right save that okay good and then i will go ahead and say inside for this video good i'm gonna say video grid dot what the append this video element hey look at this this video element okay so if we save this if we say that's interesting so if we go ahead and save this now let's go back to here let's refresh this uncod cannot read property append off no something's not right here we have video grade i say this right video grid document.getelement document that given by the video grid right video dash grid if i go to room.egs did i save this right here do you see any issue yusuf um i need um can you share uh your screen on skype so i can oh you don't see my skype you don't see my script that's true let's go like give me a second here guys so what do you think what else do you think is the reason why so we cannot read property append of no interesting interesting so video dash great huh which line which is this is inside script.js looks like we do get element by id video grid which is right here okay but when we go ahead and actually append to it looks like it's not actually doing anything for us so my curiosity is like what's actually going on you know video a video grid let's actually console log this ah we can figure this out guys check this out don't worry console that's just live session of debugging guys there we go all right let's see boom okay so it looks like it's snow so it doesn't see that video grid for some for some reason dinah specified div id right video dash grid copy oh actually i know why i know why this is going on i actually check this out guys so i'm gonna no no let's play this one no hold on all right so take this i'm gonna do this really quick this sound effect really quickly guys we're gonna solve it together here so the reason why it's really quickly it's not actually working is because of this because we are loading our our room our script.js way too early instead what we need to do is we need to go ahead and copy this script.js i'm going to put it right below the body right here boom okay right below the body true so now if we save this and we refresh this boom we have a video oh oh dang look at that guys all right all right all right we've got it though which is amazing all right sweet that is great this is great great stuff guys so i'm going to do it for this one we got it working let's go sweet sweet sweets wait wait wait wait all right so look we have a video which is working right it's there okay look at you it's just huge you can literally see me here and here guys which is insane guys drop in the comments below if you think this is insane stuff insane stuff all right insane stuff all right so we've got that part next thing but we got nero who's like the best nero super yes yes this is a mess holy moly you guys are insane tommy's like elbow cough we reach 1.5 k lakhs bro 1.5 k likes let's go heck yeah rory somebody asked why do we put the script.js in there we put the script.js in there because we want the whole document to load and that's only when we can do document.getelementbyid right so if we look at here the script that js loads after we see the html you see if we put it above this html then this line of document that get my id it doesn't actually see it okay because when you read the file it reads it chronologically all right insane people like yo it's insane great awesome yeah let's go insane bro man you guys are at but you guys are epic all right so we've got that part working all right let's kind of chill out here for a second okay chill out here for a second all right so we got that part working next thing is what we've got this working all is good what is the next thing let's go and actually style that so this video great i actually want to make it a little bit smaller okay and you know let's just make that a little bit smaller now to make it a little smaller we're going to create a style.css file so i will go ahead and do it's like public let's go ahead and do for new file we'll say style dot css okay okay this is where our style will be let's go and import our style this as css which is going to be inside here so i'm going to say link boom and i'm going to say style.css just like this so save that okay and inside the style.css i'm going to say inside this.css i'm going to say hey for this video grid video dash grid there's video dash grid i'm going to do like this video that's great i'm going to sue i'm going to say um display flex i will uh i will explain this play effects here in a second guys display flex and i'm going to say justify content uh center for now which is fine just like i just cut the kind of center and then i will actually just that that's all will be okay and then for the actual video itself which is going to be inside the video grid i'm going to say video just like this okay and i will say height is equal to be 300 pixels and then width is equal to 400 pixels okay yeah and that's pretty much it so we're going to save this i'm going to say this let's go back to room.ejs say that let's refresh this hey okay it's still big it's still humongous yeah we i think we need to we need to add the padding and some more attributes yes yes yes exactly exactly but the reason why so it actually is 400 by 300 pixels look at that if you look at this video it's actually 300 just it's huge why is this so huge boom 400 by 300 pixels is that really it high 300 with 400 is this actually 400 pixels guys is it really all right i mean i guess oh am i just really zoomed in oh i'm zoomed in look oh my god that's a relief thank god that's a relief so video four so height is 400 three no we're going to do like this i'm going to say let's go back to i will start the css i'm going to say highest 300 with 400 pixels and then i'm going to say object fit fit i will say cover to make sure that actually it fits within the within you know the actual thing right there beautiful so that my friends now is our first part of the grid which is insane we got our grid pretty much there guys who thinks is insane already guys who think this is insane in saying some stuff seriously like people you're like hold on also we got a donation do we not do we get donations somewhere you said make sure you you make sure you watch look at donations and make sure you let me know so i can i can go ahead and you know i can you know uh shout them out okay so just keep watching the comments okay okay there was like smash the like button yes all right smash that like button guys the bomb you guys are insane i love your comments guys great stuff insane stuff yes all right we got that all right now with that being done this next thing we are going to do is let's go to our plan we want to we got this person done at the blue to allow others to stream their video now guys this is going to be a little bit tougher okay this is where actually we're going to get into the zoom stuff all right are you ready to get into the zoom stuff the actual ability to be able to interact with others and see their videos yeah drop that in the comments below and let's get it started insane insane all right so okay as i'm doing this actually uh yousef like you go ahead you go ahead and let's start this you go ahead and start this whole thing of um you know adding the ability to allow others to stream their video what are we going to do and you go ahead and start it really quickly here okay so uh we will introduce uh the first thing i think we will introduce peer.js okay let's do that well do we well let's not use no and not pds the first step we're going to choose is sockets guys okay yeah while i while i talk about sockets while i do socket stuff let's go ahead you will just explain really quickly here what is what are sockets what is socket so yeah yeah so so uh socket io is for uh uh saktayo is for real-time communication so if um me and us communicate together we will be in the same channel it's an it's used socket is a library but it use web sockets which are very famous for uh asynchronous uh real-time communication [Music] as you can see real-time engine so with web what's the different websocket is like an internet protocol but the difference is for example uh different what's the difference between sockets and http so for example with http you can only as a client make a request of the server but the server can only respond he cannot start the request to you but with yeah with socket io the server can communicate with you or you can communicate with them so uh with socket io the server doesn't have to wait for a request for you to uh to start uh a message or something that's why socktio is good for real time it's green it's it does create a channel only one channel it's like a tube so you the the messages and traffic uh go through that yes yes exactly exactly all right sweet so let's get let's continue on i'm going to go back into the code right you guys ready you guys i hope you are because i am so ready all right so the first things first is actually we need to install socket our socket i o in our project correct so let's go ahead and do that so i'm going to quit this but i do not need the server i'm going to do npm install and you hope you guys can see that npm install and i'm going to say is it sakida yo what is it what is it actually dot io so i'm going to say sake right no i didn't write that right suck it suck it hold on socket dot exactly all right stop suck at that yo sweet we got that that's so good that's so good all right so we got sakura installed next thing that we need to actually import that and so it's important right now really quickly so inside here we need to go back to server.js guys that's we're going to use it and we need to go ahead and actually do like this let's go here let's go here boom boom boom let's go make this smaller i'm going to say const io is equal to require okay require and it's going to be socket io okay and then we're going to specify the server i'm going to say server like this okay so this is our server that's how you that's how you import io and inside here inside the socket.yo we are going to create a connection so i'm going to say io dot connection oh wait no i o and then dot on okay on the on when basically when we are connected to when a user is connected to it or i am connected to it i'm saying connection okay basically when you visit the site on connection i'm going to pass in the socket like this and then let's create a function boom just like that okay and inside this socket io connection there's a there's a one thing one main thing that we're going to do which is you know when a user goes in there guys a user will go ahead and do something called they will join the room okay the user will go ahead and join the room and the way i'm gonna explain what that actually means really quickly here but just imagine you when you visit the site okay when you visit the site you will join the room right imagine the whole um zoom is a room so i'm going to say socket okay socket dot on join room okay and then join room comma okay and i will pass it i don't need to pass in anything just yet but i'm going to create you know an empty empty parameters i'm going to create a function okay and then inside this join room this is just going to be console.log console.log hey we have joined the room okay we have joined the room okay join the room just like this okay and so within this join room now what we need to do is actually the following we need to now emit this join room somehow okay we need to tell this bad this this this socket that we have joined the room and the way we're going to do this is we're actually going to do this inside inside um what's it called inside what's inside inside the script.js so if we go to script.js we also need to now import socket io in script.js correct yes exactly exactly exactly let me say fixed it looks like i think i think my audio is good my audio levels i think are fine i think yeah it's not nothing bad about my audio levels so we need to go ahead and now emit this socket first things first go to room.ejs okay and let's import our socket io socket io uh file which literally is just simply is like this i'm going to say script boom this is right here script sagadayo sagario.js okay we've done that exactly save that right at this point on oh looks like we have here he did give us 80. holy moly hey harry thanks so much appreciate it my friend i appreciate it i learned so much from you thank you so much oh man you guys are insane but the only house is hit 2k by the way how's my audio guys i think my audio is fine right i think my idea is good yeah mario is good yeah you guys can hear me well yeah uh harry pressed make uh a donation thank you so much yeah yeah we just i just put that on but yes exactly exactly so with this point on we even put our socket at yo let's go back to let's go back to script.js and we will say when basically when we load this script we're gonna say hey i have joined the room okay so i will go ahead and say uh let's do socket dot what dot socket dot what is it yusef so here uh in script.js we will call the socket so socket dot um no no suck it up emit that we are joining the room yeah yeah exactly it's like that admit so it's like a joint room okay and then for now this is pretty much it that's all we're going to do we're just going to join this room okay join this room right there and now check this out i want you guys to pay attention to this so we're going to emit this join room and then on the server.js we're actually going to accept it you see this right here and we are going to say join room so i want you to pay attention to when we run this server what's going to happen so let's go ahead and run the server again so i'm saying no mon server.js okay oh so it's like can i find module socket io do i not uh what uh did you did you required it on the script i did require it here require a secondary all right no in the front uh indescribe.js no no this is sir that just my friend uh wait uh it's because i actually spelled it wrong so suckadayo my bad guys all right let's refresh this guys all right now it's all good my friends okay all right save that all is good there all right and what we need to expect guys what do you think is gonna happen now what's going to happen is we if we refresh this now okay we've omitted that okay we've admitted that and if we go to our join room uh nothing actually happened which is fine nothing actually happened we didn't actually emit any join room functionality if we let's go and the reason why is actually something broke looks like if we go to our console looks like socket is not defined at script.js and the thing is because we did not import socket io properly so if we go to our thing okay okay good script.js okay and then the top import we import it in the top so yes so we need to import it at the top so we're going to say boom const okay socket socket is equal to i o i o like this oh i owe that just like that okay i owe bo save that okay now but we what yeah but we we need also to import it in the room.egs using the script it's which we did so rumour gs which is this one right here you see no no we need to import uh yeah exactly yeah so we've done that right exactly exactly sweet alright so we've done that you guys think it will work i think i think it will work that's wrong sound i'll just press some weird sound a uncut reference error io is not defined it's not defined so it looks like we did not put it incorrectly i think would you know why uh okay yo just fine can't suck it okay do you guys think what's gonna what do you think why guys huh socket ayo let's go to our room.ejs we're importing sockets okay see socket io all right i think you do import hold on so import so socket io front end boom right there client script all right script source i'm gonna put that in here boom save that okay let's go ahead and refresh this hey look at that hey okay beautiful so the reason why is actually because of a deferred we had a deformed different here which is not necessary for this point okay right you guys said script should be at the bottom yes so we can actually yes so this socket io scribble actually should be at the top it should be at the top because we're using socket io inside script.js in here and you guys are actually really nicely nicely commenting on here holy moly lee is like yo check your file name you know we got script should be at the bottom you submit your audio if you can you submit your audio yeah oh man all right the nice nice nice nice nice the firm means it will be loaded last yeah so because of the because of actually behind the fern here this is also actually this is a great explanation so thanks so much alex or alex defer means it will be loaded last and we don't want do not want that okay all right so with this point on we're going to save this and now if we actually look at our here you see how it says join the room guys you see this is joined the room that means we have just joined the room we have just joined the room okay so sakurai is now working you see that yusuf saketyo is now working which is perfect with this point now let's go ahead and go to our server.js and we have joined the room now with this join room what do we need to do now yusuf okay so on our server when we join the room we we need to add the stream so we join to put the link now uh uh so circuit on join room now we need to join that room exactly so now i need to join that room but the question is what room are we actually going to join okay well this is where we need to get the room a room specific id okay remember actually when we render remember when we render this room right here guys remember this remember this room right we entered this one right and we passed this in and then inside room.ejs we had it where we had it in here so now instead of here i'm going to create a constant called room id and i will say hey const okay room room underscore actually i'm just going to copy this like this all right i'm going to start copying the guys so you guys just have a faster room id is equal to room id that's how we console like the before but we're going to initiate it into an actual variable very important okay very important so with this with this now in there we can now use this room id right this now is available for us inside script.js okay so when we do socket.emit join room okay join room okay we can now join the room with a specific room id so i will say comma and i will pass in the room id okay the room id okay which came initially from where from here makes sense guys does that make sense i hope it does right this is the joint room id we're going to join now so this point on let's go if we go back to our server.js right we have joined the room in here and i will say now i will go ahead and do now like this i will do socket check this out i will do socket socket dot what dot join join room id right but where's this coming from we need to actually pass this in this is a room id is coming from here so now we have joined the room okay we've joined the room so this is all good so we've now joined the room from the specific room id and now we need to do guys is now we actually need to tell you to tell you know our socket hey do we have a user connected we have someone else connected because for example when somebody joins the room we have to now tell them that hey we have a user connected so what i will do is i will do like this i will do socket i'm going to start copying this stuff so you guys can see it boom i do not need this right now just yet okay socket dot to room id the broadcast the broadcast user connected so what is this actually going to do what is this going to do broadcast it's okay the same like the name yes it's gonna broadcast this user connected think of it as like think about this guys think of this as like it's like it's like a phone call almost it's like hey you know for example somebody joined my room right and somebody joined my room and now i'm telling everybody else inside the room that this user has connected so they can add that user to their own to their own uh stream make sense yes it does you guys are asking hey can you watch this video later yes of course you can watch this video later guys that's not even a problem so user connected yeah that's all good and now we actually and now if we go back to script that yes we need to listen on the user connected just like so so i'm going to say socket on socket socket.on okay user user dash connected okay good name okay exactly and then for now i'm just gonna have empty parentheses because that's empty variables and then i'll go i'm going to say i'm using connected uh i'm actually going to create a function called connect to new user connect to new user now this function is not created just yet but i will so what i will create a new function now we'll say connect to new user actually i'm going to say contact user connect connect connect am i saying this right connecting user okay all right connect to the user hold on const connect to your user all right equals i want to say thanks for meeting raj for their donation oh there we go niraj right there hey appreciate it my friend thanks so much guys like i said always i always appreciate donations they feel so good guys always feel so good all right connect to new user now what's going to happen here okay what's going to happen here is a few things and i don't want to talk about it just yet but here's what's going to happen okay inside here this will actually we are going to send now that user like you know our own video stream but i'm not going to do it just yet i'm just going to say i'm i'm just going to console log of this and i'm going to say console log you know a new user uh new user console log new user okay so now what's going to happen user connected is going to connect to a new user which is this and it's going to console log new user now if i refresh this right i don't have this output right here right there's nothing nothing that says hey new user right but if i go ahead and i copy this link okay and a different user approaches me okay new user look at this guys this is insane now awesome i just want you guys to think about this here for a second okay i'm giving some applause this is insane if someone else connected someone else somebody else connected and now i on the front end saw that and this is why we say new user right inside here we emitted that and then everybody knows about this new user but the question now is actually how do we go ahead like how do we identify that user okay this is a good question the way we've identified now i want to say thanks for web dev simplified he just joined in the comments hey where's the simplified where is it it's a little bit yeah it's at the top yeah thanks so much thanks so much appreciate appreciate that simplify seriously guys check out what the simplified guys amazing amazing guy we learned a lot from him in terms of how we in terms of you know how we built the zoom clone amazing amazing guy thank you so much you know we just kind of took that we and we saw how how we can kind of add our own things to it and this is what we are here doing all right all right sweet so i appreciate it i appreciate my friend appreciate it all right so connect to new user which is which is really cool and now at this point what we want to do is is actually to identify that user specifically now in order to identify a user this is where we need to get sent to something called peer-to-peer okay um with peer-to-peer you know with with webrtc right we're going to use peerjs to now actually send the streams between different people all right so i want you to just pay attention here really quickly okay okay what is webrtc web rtc dc yes what about you see okay webrtc is uh no i don't like that that definition is a free and open source uh where is it where is it no no no no no no it's a free and open source project that provides web browsers and the multiplications with the real-time communication via simple application programming interface so it is what allows web browsers to kind of communicate that to together in real time all right and so webrtc now webrtc now which is here web uh i'm sorry pgs okay pjs which is here is what's going to use right looks like this is how pjs now wraps the browser's webrtc implementation to provide a complete and configurable easy use peer-to-peer connection okay and you can see the way we simply do is is we can literally have it you know we can immediately just import the library like this we create a new peer connection and then we can actually connect to other people receive calls and we can send for example video you know on audio and so forth so does that make sense drop in the comments below does that make sense right if it doesn't it's okay we can continue on we can continue on [Laughter] all right so with that continuing on let's go ahead and do this all right first things first that we really need to do is we actually need to install peer js we need to install pds on our server so let's go to server right and we need to go ahead and install pier all right so inside here i'm going to quit test out and i'm saying npm install is it just peer right peer right yousef no okay install peer beautiful peer guess okay all right and now we need to actually run that prgs server okay but the way we're going to do this is like this so we've installed peer okay inside our server.js here's what we are going to do inside here we're gonna we are going to say the following all right we're going to do the following i'm going to copy this really quickly and you guys can simply just watch this all right so check this out so in here we are we imported peer and then inside here then we we use something called express peer server right so basically now the peer server is actually working within together together with express to you know work together and give us this functionality all right and then what we're going to use is we will go ahead and specify to the peer server hey what url are you going to use and the url we're going to use is simply just this right app.use peerjs okay and this is the piercer that that is here all right so save this so our peer server is now live and all good and all we have to do now is simply run the server and we shall be fine so if i do no month server all right we should all be fine in this case still now if we go back to now the front end this is where our peer connections are going to be all right first things first that we need to do is is actually we need to listen on the opening of appear connection well actually no first me to import appear right so if we do peerjs you can see right here this is peer so include the library i'm going to copy this library i'm going to go back to my room.ejs and i'm going to paste this in right here paste it in right here i'm going to save this and that's all good now okay next up we need to create a new peer connection which is in here and so if we go now go to script.js script the gs and let's go ahead and create the new pair connection guys okay now with this there's going to be a few different things that we're going to do all right inside here we're going to specify the id which we don't we don't really need or the id is going to be created automatically by uh by peer so we don't we do not need one okay but in terms of options okay we're going to specify the following path i'm going to say it's path is going to be dash peer js okay and the way where from where we got that is back from the server.js in terms of the actual host the host is going to be whatever host that we're hosting is on so i'm gonna say host that's just gonna be slash so host basically whatever host we're hosting this on either localhost or you know heroku whatever maybe that's where it's gonna be next port port is gonna be four four three no throw 30 30 for now because we're on local host my friend yeah 30 30 all right and the reason why it's 30 30 because it's because our node.js server is on 30 30. hopefully that made sense all right so that my friends is all good okay now what we need to do is we need to listen on the peer connection okay so now we have peer which is here okay so now it's going to happen you remember how we did this join room check this out we're gonna wrap this i'm gonna say peer dot on okay dot on hey when i open this connection open this connection and i get a specific id an id is simply just think of it as like you have your own id okay you have your id id okay boom right there so this id is going to be passed in here actually let's go under console.log what is this id so you guys can see it really quickly here console.log that id let's go back to our zoom clone let's refresh that's i can remove this for now let's go back to our zoom clone this is the id see this id right here this my friend is the id it's a specific id for me for the person who's actually uh you know connecting right and now in this socket that i met right i'm gonna say hey this specific person actually has joined this room and i will pass in the id right so we've passed an id but obviously we need to now right we need to now listen to that id okay so what i will do at this point is go to server.js and inside this room id i'm going to say user id right this user id okay and now when i emit user connected i can tell everybody hey guys here is the user id here's the user that has been connected okay okay so user connected i'm going to say comma i'm going to say comma and inside this i'm going to say just simply user id i'm going to emit this for everybody else that's saying that hey certain user has just connected all right and now that we have that let's go back to our script.js all right and where we are listen to connect user connected we can now actually listen on the user id guys you see this this is interesting stuff interesting stuff uh hold on make sure let me make sure that this is that we're all good i'm gonna say user id user id user id okay again user id and i will pass in this user id into the here user id beautiful connected to new user and this is going to call connected to the user which is going to call this function and since we're passing the user id we obviously we need to use that user id and say user id just like this okay and boom now we're here so if i do console log now console log a user id okay user id okay check this out what's going to happen let's go ahead and go back to our pom pom pom all right so obviously we don't have anything console log just yet but if i but if someone else joins my room right look this is someone else's user id this user id guys came from this other user that is insane insane guys insane guys all right so we have got that this is all good so what what am i going to do now at this point now we're going to use peer connections we're going to use peer now to connect to to our user the way we're going to do this is now we're going to say here to this user id let's call that user id okay i'm going to call this the other user who connected i'm going to call him okay i'm going to say const actually i'm going to just copy this specific things i'm going to call that user boom hold on i'm going to copy and paste this here boom called that user so here's here's what we have we have peer peer which comes from here okay peer call the user id and then we'll also we'll call in the user id with a certain stream which is actually we should be importing this stream from here okay now where is the stream coming from check this out the stream is should be coming from is coming from here stream save that and it's actually coming from where it's becoming from in the promise right so what does that mean yusef so it's uh actually meaning that the problem when using.then we are receiving the user's videos which we call the stream and we're passing it to the socket uh do the suck so we are passing the stream of the user yeah what is that circuit.on and all of those code is inside.then yeah so so that what that means guys what that means that if we actually in the uh on the user connected we actually need to go ahead and remove this right here and put this inside this stream right because we need to listen here on my stream let's go ahead and wait for my stream and actually then send it to everybody else right so when someone else connected right we have someone else who connected i'm going to save this i'm going to connect to that new user i know it's a little confusing guys but trust me it will make sense in a second here then i'm going to call that user someone else's user for example yousef okay i'm going to call yusuf i'm going to send him my stream and i'm going to create a new video element okay for for him and i'm going to call on stream user video stream so this right here this stream when when i basically re receive some of the stream i'm going to add that video stream does that make sense exactly i know this is a little bit like it's a little bit like like um it's a little bit odd i will i will say that it's a little bit odd all right so yeah it's a little bit odd so just check check this out so i'm gonna say advocation obviously with this add video stream function we do not have that just yet okay but we are going to create it right now all right so what i will say now so this stream biscuit is usually just so you know this right here this stream is yusef's stream no actually no yeah that that is use of stream yes so i will go ahead and create a function called const add video stream okay and i'm going to use this function right here let me see where uh i'm going to actually copy this and so you guys can simply can simply you know use it later on boom boom function add video stream but i'm going to do it in use six way it comes to add video stream boom boom add video stream what's going to happen now this is going to add a video stream right it's gonna it's going to go ahead and add the stream itself is going to be have a source which is this the one that we're passing in then we're going to wait on a listener actually we already have this look we already have a video stream right here what am i saying my bad my hat we have this streamer here we're going to call admin stream which is simply going to call this function right here so if i save this if i save this okay if i save this okay let's make sure that we are all good if i save this right here all right and now when a new user connects let's see when a new user connects we should technically see their stream are you ready are you ready to see this let's do it okay let's do it technically we should see this now so let me just make sure that i'm all good that i'm not like you know i'm not completely misusing anything guys completely misusing things guys all right i'm going to save this boom this is fine boom that's fine okay okay i'm going to now command c okay and we have nothing here now the reason why i have nothing here is for the following reason we now need to answer the call so i have called look i went ahead and i called yusuf okay i have called yusuf okay but i now need to answer because yusuf is going to call me right so i need to answer this call as well all right so the way that's going to work is the following so i'm literally just going to going to copy this really quickly here let's go back to the top on the stream right here pier so peer on call i'm going to answer his call and i'm going to go ahead and add a video stream from yusuf okay i'm going to save this i'm going to save this let's go back to our coding here let's refresh this okay i'm going to save this boom boom boom hey oh hold on look at that hold up there's too many people two people uh wait wait wait wait wait wait wait wait audio false hold on hey hold on hold on let's do this again one more time one more time guys look at this guys we got two people connected this is insane insane guys insane stuff guys like like i said here's what happened i know this is this is a really hard one kind of to understand guys but right the way this kind of works is like i said is we are connect to new user we're connected this to this new user right here okay and we are sending this new user our own stream okay we're sending this user here our own stream through here okay i don't know are we sending no we're calling the user through here we're calling the user okay and then basically when the user calls us we answer it and we add it to the video stream exactly does that make sense yes it it does yes it does sweet so at this point on guys how insane is this somebody asking mean somebody's asking um let me ask you let me see some questions guys some of you guys are asking how many people are connected at once um i don't know we'll we'll test this out how many people can be getting to that one i think unlimited right a lot of people i'm limited people can get them once that'll be interesting let's see who else is like hey thanks bobby appreciate it bobby appreciate my friend yes the github code will be shown to you guys we'll be showing you guys now we got look at we got the streaming guys there right yeah must you generate ids using peers so peer again guys uh generates ids automatically okay those ids i'd be generated automatically all right what you guys see right here if i if you go where is my peer you see this appear open right appear open this is where the ids get automatically generated this id is automatically generated by this specific peer object all right so hopefully that kind of makes sense some things user id is unique to each user exactly yes yeah yes yes hello what's up hey guys guys so also awesome to have you on here like i said we've done a small part of it now which is insane drop in the comments below if you're pumped as we are as we are yeah steve is like no it's not unlimited your your broadband will be maxed out at about nine people unless you use like some really fast internet or something so yeah but me and you have tried it was insane it was insane oh man wait wait wait so holy [ __ ] we're all guys this we're about at about two hours going on and in okay so yusuf we've done this what's next guys we have two people now that are able to talk to each other which is really cool guys right which is really cool before we go on i just want to just want to mention you guys we have a master class for javascript if you guys are interested in checking us out check out our master class down below okay and then we also have a profit with javascript course if you want to learn more stuff like this okay you're gonna learn more stuff like this so we have a profit javascript course which is also insane so much content from you we have weekly coaching calls on there you know uh two weeks coaching calls between uh success coaches right we you know with 15 modules um make sure to check us out check it out link is built down below and we'll continue on and go all right yeah for uh i need to mention that for some that who doesn't know uh i was a pwj uh student and this course helped me achieve more and learn a lot to become a web developer yes yes yes yes exactly exactly so guys let's simply continue on now the next thing that we need to we need to work on is actually going to be what it's going to be the styling of this application am i right yousef are we going to style this now yeah yes let's style this application okay so this one's gonna be a little bit more tough for now oh my god this is gonna oh man all right all right let's let's go to room.room.edu yes all right so inside here okay we need to create a few things if you look at our you know previous application which is do you uh do you have a previous a previous app running let me look at look at the code let me look at the code here uh yeah yes you do yeah you do yeah you do yeah it's here send you a link yeah yeah you do it i got it i got i got it you said thank you i got it perfect so this is our previous app that we that we have right here guys okay all right so our goal is to get to this all right so a few things that are going on here what do we have we have a you know a row we have a row that looks you know like this okay we have two columns one column and then another column so let's just simply you know start out with the main with the with the main class i'm going to inside here i'm going to say here let's create div can you see him by the way why does it do like this i'm curious what is this orange thing that it just kind of shows all right uh i don't know i don't know why yeah where am i all right so inside here i'm going to say div class because i'm selecting it oh that's why i'm like what that's going on div classmate that's going to be where our main you know zoom clone lives okay div classmate okay we have inside this zoom we have the left section we have the right section guys okay so the left section here is we have div class main underscore underscore left okay okay that's gonna be for the left section then we're going to have the right section just like so oop so we'll say div class main underscore is called right right okay beautiful inside the left section we're going to create a div uh for the video grid so i'm gonna say div class main videos and then inside that this is where we're gonna piss put put in the video grid correct oh yeah so we have the main container that contains the left and the video main exactly exactly all right and now in the main right in the main right then we're going to have that's where that's where we're going to have the chat so in the main right we're going to have simply the chat so in the main right let's go ahead and do in the main right let's go ahead and do um i'm going to say div main header i think maybe div class okay main header yeah so we need to specify that's a chat okay and i'm going to say h6 there's gonna be chat okay okay all right so that's fine okay now within this guys you probably won't see too much of a big difference you know not nothing too much going on here but in the main left what else we got we got main videos and then we have something else guys what else do we got anyone to know we have what we have controls remember these controls right here these are the controls okay i'm going to say div and i'm going to say class and then main i'm just going to show controls just like so controls all right and this is where our controls are going to live right now at this point on let's go ahead and simply just save this right and let's see actually what we have so i'm going to save this i'm going to go back to our zoom clone obviously we have two people just fine i'm going to refresh this boom right we got chat but we get nothing else which is completely fine all right okay all right so at this point on let's go ahead and right click inspect element and let's go ahead and start styling this guys you read the style i'm hope i'll help you write this down because i'm ready to style so for this main function for this main function i'm going to say that hey for this one specific one it's going to be like so so div main i'm going to say hey the height for this is going to be 100 vh right so means 100 vertical height so you can see now it's 100 vertical height okay and then i'm also going to say display is going to be flex right display flex now you can see how we have kind of the main left is the left hand side and the main right is now on the right hand side right now i do want to go ahead and actually now now specify how much kind of space i want each the left side and the right side to take up and how do we do that you guys know drop in the comments below you guys know how to do that yusuf how do we do it so we need to specify the uh how much space the left section takes up and the main the right side takes up i see i see so we need to specify the mean width and max weights i think well okay kind of yes and no yes or no what i'm going to say is for the main left and main right i'm going to say i'm going to add in a um kind of like a flex item so for the main left okay i'm going to say that the weight for this one is going to be flex what 0.8 okay you see now it's 0.8 for the y one i'm going to say the flex it's it's going to be flex 0.2 just like this okay just like that you see that and then that's pretty much it now we have the last section and the right section and i can literally go ahead and i can i'm going to copy this specific one i'm going to copy this and what do we guys need to do we need to go ahead and go to style.css i'm going to say main dot main boom right need to create that style so height 100 vh okay let's go back to our main left and main left is flex 0.8 main right is like 0.2 so i'm gonna say main underscore underscore left flex flex it's going to be 0.8 and then main right right main right main underscore let's go right is going to be flex 0.2 there we go flex right 0.2 right beautiful so that my friends is working okay save that refresh this and voila ear horn guys now guys i just want to kind of i just want to kind of take a look guys guys so i say thanks so much we have 2 000 likes which is insane almost a dozen likes guys let's take this to 2k it is almost there guys insane stuff inside stuff by the way thank you thank you so much guys insane stuff i appreciate you guys so much you guys are you guys are the best you guys are the best it's all i can say because it's the best all right with this what's now you guys know well i know so this let's look a look at now this main left section okay main left actually has what the main videos which is here and then controls so the controls are going to take up some space and the menus are going to take up some space as well right so the way we make that work is how you sift in order to make sure that the controls are at the bottom and the videos are at the top how do you make that work so you want to the the controllers in the bottom right yes what do we do now in this case i think uh we align it we are going to use flex all right flex we're going to use flex guys oh no flex flag flax is the answer to everything all right so for the main left okay i'm going to say the main left i'm going to say display flex display flex okay and then i'm going to say flex direction flex direction is equal to column okay so now we have my videos in here and my controls at the bottom okay but it's still not good okay because the main left right you need to make videos kind of main videos needs to be kind of needs to push down everything else right so for in order for that to work i will need to sim i need to simply say main videos hey flex grow one right so now main video is going to grow as much as it can main control is obviously hidden right now because ebay controls has nothing inside of it okay inside the main videos i'm going to specify here the background color for this one is going to be what black boom okay so we're getting somewhere it doesn't look good just yet but we're getting somewhere then what i'm going to do is i'm going to center these two right videos right so you can see we have two videos these are imagine imagine these are two people and the guys drop in the comments below how do we go ahead and center them well the way we do that is simply we also simply use what you said what do we use justify content yes justify content so we're also going to use flex for this right because this specific one has has a video grid right which is video right here video right here so inside here i'm going to say for this main videos i'm going to say display flex as well okay i'm going to say justify content center boom and what for the vertical alignment what do we do what do we do all right align item center exactly so i'm going to say align items center there we go so now we have centered our grid which is better that's exactly what we need i'm literally going to go ahead and copy this specific thing the specific css and i'm going to go back to main videos and i will say here and say hey dot main i'm just going to scroll videos i'm going to paste this in okay i'm going to go back to let's see main controls i do not need this but did i change anything else besides that no nothing right nope nothing no so save this main videos let's refresh this refresh it okay one thing what do we miss here i need to make main left what tracks direction come uh no you see the main left you see this main videos is only like it does not take up as much space as it needs to so for that we need to go we need to go tomorrow well yes but i need to specify in yeah i need to go to main left i need to tell main left hey main left that main left we need to have display flex for this one no you're not writing it in main right oh did i oh man all right sweet sweet mean left right there display flex and then it's going to be flex direction column right because because we want to have make sure this is in the column so refresh this refresh this look at that now it's there let's go ahead and now remove you see the spacing at the top that's simply just body margin and potting potting did you say potting yeah padding guys by default yeah so let's go to remove remove that i'm going to go back to here i'm going to go up and i'm going to say hey body i'm going to say margin is going to be what zero right and then padding is going to be zero okay all right beautiful let's refresh this boom hey okay great so look we don't have any margin don't hit padding this is starting to look like a real lap guys yes do you see that with me yes yes all right all right all right bye yes guys let's get to 2k likes guys let's go let's go let's go almost there 1.9k are we are we not 1.9 k right yeah i think so 1.9k guys let's get to 2k likes we're almost there so close so close yeah so close almost 30 percent come on give us a like guys like i said really quickly if you guys want a free master class the master classes down in the description below so go check that out as well because niro was like yes let's go everybody's like yes let's go nero oh rohan is like at share screen functionality i'm not sure if we can do that i'm not sure if we can do that we have albinis is justified content neurosis align items yes you guys are answering this amazing amazing minute says flex and well you want to use justify content um nero like amazing team rocks thank you so much we reached 2k bro huh we did yo thank you so much so much you are insane insane stuff all right sweet let's continue on really quickly here so now the first and next thing i want to work on is actually i'm going to work on the controls so if we go to room that ejs this is where our controls are going to live and i'm going to i'm actually going to simply copy this because i don't want to take this up too much time guys but i want you guys to take a look at this you know the controls and on how we make these controls works i'm inside here i'm going to create a div class i'm going to say main i'm just going to scroll controls controls right block okay block okay this is where all of our now the reason why i say block is why guys the reason why i say block is because on here check this out you see we have one block we have another block and a third block you see so they're kind of grouped together and i like to call them blocks for a reason right because they're grouped together all right with this let's go ahead and create our first block which is going to be our microphone block now i'm going to actually go ahead and create a div div class and i'm gonna call this main uh i'm gonna call this main controls trolls button okay just like this all right save that and then that's going to be a button okay and this inside here is going to be i'm going to say span and this is the span is basically a tag i'm going to say mute okay the second button is going to be what guys anybody know what's the second button it is what is it stop video there we go stop video amazing stop video now in terms of the actual font icons right these icons right here we're getting those icons from where yousef phone awesome font awesome exactly font awesome right there on us yeah font awesome let's go look at this for a second here okay come on come on can we do this can you do this yes yes yes yes yes so font awesome is where we get these icons okay so in order to import font awesome i actually have a script tag just in here the imports from that maybe we will provide you guys with this specific fund awesome link when you guys want to it's not a problem at all drop it on the comments right now yeah i'll drop in the comments as well can you drop in the comments yousef yes egs i'm going to import font awesome right here okay and literally the way i do this guys is literally for example i'll do like i'll go to fantas and i'll say hey you know microphone mic row phone i'll search up microphone for example and you can see example we have a microphone right i can literally click on the microphone and this microphone check this out will now give us the actual html we need to use for this microphone so i can copy this microphone okay i can go back to my code and i can literally put the microphone in here and save it right and that's it look at this and that is it so we got the microphone next one we're going to use besides the microphone is we're going to use the video one right so the video one looks like this boom yes from awesome font awesome lotus thanks so much you guys are doing a great job appreciate it lotus thank you so much we're trying our best guys trying our best all right now we save this let's go back to our zoom clone all right let's refresh this okay so what do we have we have you see that right there like a really small icon right there on the other side we have mute icon and then we have a style video icon yeah now you can barely see it you barely see it right there so small yeah you said how what time is it for you right now uh it's uh almost 9 p.m okay 9 p.m so wait guys what time is it for you guys right now drop in the comments below i'm very curious what time is it for you guys right now dropped in the comment below sweet so we've got these specific you know buttons okay now let's add some style to these buttons uh i'm going to right click the specific button okay i'm not quite the specific button and then we have we have a block which is here and then we have the controls which is here right so the css for this will go as follows okay hold on my computer is like starting to like really really kill it kill kill itself right now it's trying so hard i don't know why oh i better move myself boom better refresh this for a second here maybe i'll just go ahead it's gonna be like 1am holy moly guys 1am dave is like 1 11 a.m i knew 11 a.m john 10 40 p.m insane insane insane all right oh man so all right main controls let's take a look at this here so the main controls right here are are the following so in order for us to kind of have these main controls you know we have a few blocks we need to have them in a row right so i'm going to say main controls i'm going to have them be display flex that's the first thing okay it's playing flex okay and then i'm going to and that that's all i'm going to do right now display flex and that yeah that's that's all i'm going to do but in terms of the background color what does the background color of this mean uh do you know main control yeah background color yeah background color of this one is going to be like so 1c1 e20 right okay background color background color boom right there okay right now obviously i would say hit the other stuff but it's okay now now i'm going to say the color which is going to be the color of the icons and the text is gonna be the following so i'm gonna say color color is going to be what color is going to be this beautiful so now we have a color okay i'm going to now for main controls i'm going to add some padding to it padding five pixels and now we have some padding to it which is which is great okay next thing we next thing let's go ahead and um for specific buttons i want to make these buttons like you know uh kind of like um vertically aligned so you can see how the the icon is in the left hand side and then the text on the right hand side guys how do we how do we make that work do you guys remember how do we change the words from horizontal to vertical you guys remember five four three two one well the way we do that is going to be inside the main controls block okay and inside the main control box i'm gonna say well hold on inside the main controls block i'm going to say actually main controls button i'm going to say display flex okay and i'm going to say flex direction is column there we go now it's a column right so that's exactly what we need okay next up for main controls block main controls block we need to say here this maker choose block let's go ahead and do display flex and make that be right the horizontal right so main controls block is what's in charge of all the buttons i'm going to say hey all your buttons should be horizontally aligned okay beautiful yeah exactly see that you see that so literally let's go ahead and copy what we just had so main controls i'm going to copy this for the main controls okay let's go to our installer css let's go down i'm going to say dot main others also controls controls okay that's going to be this display flex so save that that's going to be that main controls okay all right next up for the main controls block is simply just going to be display flex so if i do uh main controls block main oh trolls underscore underscore block right is that underscore or two or one underscore it's block it's gonna be no display simply flex display flex right okay for the main controls button guys right i'm going to copy the specific one let's call it do dot main [Music] controls button right boom display flex deflection column all is good there okay real good now yes i think so save this let's refresh this guys you ready hey look at that we have mute stop video that's all good there we just got that working okay now let's go ahead and add some padding hold on boom hey yes you guys we are deploying this as well it's going to happen really quickly we're going to deploy this really fast as well so we've got that going inside the main controls button next up what we need to do is going to be add some just you know just some basic padding right there so this main controls button okay uh inside here we have flex direction let's go ahead and do justify content in order to center it right let's enter the center center and then guys how do we center it as well vertically drop it in the comments below it's going to be align items center okay for the padding let's go ahead and do for the padding i'm going to say padding is going to be eight pixels eight pixels 10 pixels now what what does this mean guys when i say eight pixels 10 pixels okay this means that the top and the bottom are 8 pixels the left and the right are both 10 pixels all right and then i'm going to say the menu width for this one is going to be simply just 80 pixels so i want to set the main window width for this one okay and then i'm going to say cursor is going to be pointer boom all right so look at this we're starting to get somewhere guys we're starting to get summer this is insane same stuff i'm going to go ahead and copy this oh okay [Music] all right um put it in here boom beautiful okay that's so good so now with that kind of set with that kind of said what um what i want to do is actually the following so with that said let's go ahead and refresh this all right stop video is there all of that is there beautiful yeah next stop what's what's what's next uh dj you said um thank you so we next we need the security participants the in the middle and the leaf chat exactly all those other ones but i kind of want to change kind of this funny see how the sun fund is like yeah it's like it's an icky font because our font here is so much more better right it's so much more better and it's really you know it's really just a matter of just changing the font style so if you look at our font right well it is actually because it's coming from where um actually you know what let's change that in a little bit you'll you'll see where it's coming from later we'll change that in a second here i think it's coming from do we import bootstrap right import bootstrap is that why yeah i think it's from bootstrap no i think we didn't i think we did i think we did because it's right now the actual font family is just apple apple system which is interesting okay it's apple system i like it i like it all right main thing now let's go ahead and add the other ones so i'm going to go ahead and go run the gs and i'm going to do this really quickly guys because i don't want to spend too much time just typing you guys want to see me type as well so i'm going to copy just you know a few more control blocks that i have and you guys will see what they are so here boom yeah yeah we use bootstrap yeah yeah so look at this see that main controls block main controls block so inside miss makatro block this is where we have the security participants and chat it's the same thing as the other ones right there right and then for this one we have a leave meeting as well okay leave meeting so i'm going to save this i'm going to go back to here let's check out what we got hey look at that now obvious this not does not work properly as we wanted to all right and that's there's a reason guys how do we how do we make it go from here to kind of like here how do we how do we have that happen you get anybody know drop in the comments below well the reason why is because of flex okay if you look at main controls right you have display block one then you have what display black two to select three instead of saying hey flex start is the direction or is the actual you know alignment i'm going to say what i'm going to say um justify content what space between look at that now we're getting some of our friends right so space between so if i literally if i go to main controls stylus css main control which is here i'm going to say justify content space between just like this nice hey look at this look at this guys all right so much better so much better i know we are almost there almost there almost there next thing i want to do is i want to change this i the the font um another font but this the size of these icons um so let's just do that right now really quickly here um it's really i'm just gonna just literally going to say um for this button but i'm going to say vi boom boom make controls button target the i font size 24 pixels refresh this hey now we have a bigger button all right for the leave meeting we also need to set that as well so let's go ahead and do leave meeting because that i think that's the color red right am i right yeah so yes let's go and to here i'm gonna say dot leave meeting which is where if you go to room.js you see this leave meeting guys this leave meeting i want to simply color this red because this is the lead meeting red so leave meeting boom boom okay and the color of this one is what it's actually this boom right here hey let's go let's go let's go so that my friends is now the color of that all right save this all right boom you're free okay we're getting somewhere now my friends next thing as i want to do on the horror so when i hover over these i want to i want this to change just a little bit so i will go back to main controls button and guys how do i set them on hover anybody know well the way i do i'm going to say main i'm just going to scroll controls button right and i'm going to say on the hover of the specific button right on hover of this button i will set the background color to this and then border radius to this one more time hey look at that look at that i hover over this guys and it's you know it has a nice it's like you know it just it just feels good yeah let's go guys that is epic right so let's take a look at guys how are you guys doing hey guys give me a thumbs up if you guys are still with me give me a high give me a high five give me like yo you know holy [ __ ] 42 000 total views on this video guys insane insane stuff guys thanks so much for sticking around with us i know this is just this is a really fun project i'm not kidding guys thank you so much hit that thumbs up thumbs up button let's get this video to what 5k 5k uh 5k likes have 5k likes that'd be great let's do it we're currently aware we're currently what 5k 2k likes we're calling 2k come on let's get this to 3k guys 3k 3k we're gonna do it we're gonna get there we're gonna get there all right yo four thousand something's like oh guys yes yes lotus thanks so much thanks so much appreciate it my friend div yo divy you've been really positive i appreciate you man ashan good vibes indeed indeed that's insane nero yes yes yes good vibes only here yeah color report was like 42 total views no way but wait i just want to make sure really quickly here before we go up we have a free master class down below in the comments if you wanna if you want to become a developer if you want to you know uh free masterclass actually do we have the link for the master class do we have the link for the master class and the youtube it's in the description i have it right here i got it right here guys i just want to show you this really quickly guys the master class is right here boom check this out top three mistakes to avoid when becoming a javascript developer guys but that is something you're interested in right take a look at that it's completely free for you no problem at all check this out link is in in the description just go click on it right sign up right it will you know kazu will be there to kind of to greet you and to provide some knowledge for you as well and by the way we have maharash hold on where is it do i see it yo thanks so much my friend thanks so much for the donation appreciate it guys thank you appreciate it somebody's asking uh can we have a project with russ um maybe one day we'll see we'll see but yeah like i said link is in bio link in description let's keep this going let's keep this going all right let's go yeah uh all right okay we're still at 400 views 400 you guys watching i know guys i know it's been tough i know there's a lot going on but we're gonna get there trust me i'm gonna get there all right comes easy yes it does not come easy but that's fine so we have this okay not a problem at all next thing let's work on the chat you ready let's work on the chat yusef we we did the hover right the wah the button hover on hover yes we did we did it with the hover yes yeah yes so uh we now need to style the chat yeah style the chat okay so the chat is right here the you know in the main right section okay and obviously you know the main thing that we need for this chat is what is what guys huh yeah for the main the main section is so we have main header and now we need to add the chat window and then the input box all right in the input box all right so let's go to let's go ahead and let's see i'm just trying to think here for a second here yes let's go to style let's go to room.eds and inside this main header we're going to create a few different other things okay first things first is going to be is going to be the main chat window so i'm going to say div class main i'm just going to scroll chat actually i'm just going to copy and paste the send so you guys don't see me typing there's only reason for me to type boom right there first things first here is we have the main chat window guys okay and this is going to contain all the messages okay then the set the third day is going to be the main message container which is going to contain the input all right right the input suite so i'm going to go ahead and save this right here let's go back to our code let's refresh our code and obviously it's there it's i know it's not pretty it's not hold on hold on all right i'm gonna give myself some applause hold on so in order to style this here do you hear that sound by the way or no no by the way can you can you can you mute yourself for a little bit because i can i can hear like uh echo from you for some reason i don't know why okay yeah but yeah there we go there you go and then kind of unmute yourself kind of as as we're talking i know but for some reason i hear an echo from you all right so let's go ahead and style this so we have the main header the main chat window and the message container okay in order for us to kind of take up all the space wait user where'd you go don't just leave guys bring back yusuf all right in the main header the first things first is for the main right i'm going to say that this is going to be a display flex right display flex all right display flex and obviously it's currently in horizontal view but we want to make it in vertical cue so i'm going to say flex direction flex direction column all right now it's in the column beautiful all right we have main header we have main chat window main message container and that that's pretty much it okay um with with that being said with that being said uh next thing is gonna be let's let's let's actually i'm just looking through my stuff here look at my stuff here for the main header um let's set the background color for this what is the background color for this whole main right thing huh anybody know because i don't know what is the background color for this what is main right background color for this right is is actually border 24 no but what is the background color you know yeah yeah background color for main right right yeah 24 to 23 background color not not right here here inspect oh it's in yeah main right right here yeah 20 24 23 24. there we go so i mean right oh my bad i thought you were talking about petting i don't know why i said i need the background color all right let's go ahead and add some background color to this boom now we have our second background color beautiful for the main header uh all i need for this one is gonna be i'm going to add a simple like uh color color this is going to be f5 f5 f5 i'm just going to go ahead and copy this boom color and now i'm going to say it's it's text line center so i'm saying text align is center okay so that's going to be the chat okay all right so that we need also some borders yeah we'll add a border as well uh i'll add a border on the left hand side for this now we have the main header now we have the main chat window and this windows is it's nothing not not so much anything but the main thing we need to understand is the fact that we want this chat window to kind of extend all the way horizontally right we want this to take up as much space right so how do we do that well again we're using flex guys remember right so we're using flex on this specific main right so if we simply say main chart window we say what anybody know you say flex what grow one then that will go ahead and actually grow so if we go to mention window you see now now the main chat window is actually growing uh to the most that i can for the main message container yeah yeah yeah for the main messages container right i'm gonna i'm going to go ahead and say that this is going to be padding i see padding i'm gonna say 22 pixels and then 12 pixels okay just like this and then i'm also going to say this is display flex okay right there so that kind of moves that that input in there let's go ahead and copy all the other things we just did so this is on the main right let's go back to our style of css okay dot main underscore underscore right no no no it's not in the main right huh it is main right no it's main messenger container check yeah yeah main right next up is gonna be main header so let's go ahead and copy the specific part so i'm gonna say dot main main underscore underscore header boom and then this one's gonna be i'm going to copy this specific part boom boom all right for the main chat window flex girl once i'm going to say main dot main honest chat window let's see just make sure chat just one underscore window boom and this is going to be flex grow what one right am i right yes flex grow one save that let's go now go to main messages container and it's going to copy this specific part and let's go into dot main dot main on screen script messages dot container like this right yeah the main message container right okay beautiful beautiful wait yusuf are you still there yes you are you just muted okay yeah yeah exactly i'm making sure making sure guys guys you need to keep tabs and use it you know because you guys be like yo you so where are you guys you know drop in the comments go yo youtube where are you oh man all right so we've got that going that looks like it's all good let's refresh this all right so we've got this we got the input that's going to style this input see this input right here i do not like how it looks here all right the way i'm going to style this is is i'm going to say the following i'm going to say may i'm going to just go to copy this guys because i'm just because running out of time here main message container input i'm going to focus on the input and i'm going to say hey the fact scroll for this one is going to be one the background so the reason why i say flag scroll one is because i want this input to take up the full width correct the full width okay i'm going to say the border is none and i'm going to say the background color is transparent because right now the background color is like iffy you know it's like it's like white it's like ah so i'm going to save this and refresh this and boom look at that that message looks just like this it's it's completely what just how we want it to look like next up is i actually want to go ahead you see how we have like this you know the the font is like not the best here and the reason why it's not the best here guys is actually because for this one we're actually using bootstrap we're using bootstrap on this specific application so let's import bootstrap and i will import butcher really quickly here um for you guys all right i'm going to import bootstrap here for you guys let's see where is bootstrap there i'm going to import bootstrap for you guys you guys here have it actually i think it's just using jquery that's it i don't think we're using bootstrap here we're just using jquery no no and bishop too oh it is it is it is it is this this right so let's go ahead i'm going to go ahead and where's our bootstrap bootstrap bootstrap bootstrap boom right there beautiful documentation getting started we need to link our bootstrap obviously so bootstrap link our bootstrap uh you know style sheet let's go to room.ejs link our style sheet in here boom save that okay next up let's go ahead and import our javascript from bootstrap that's going to be here boom like so all right save that now that's all good let's go refresh our zoom clone and watch what watch the font just change hey look at that it changed it looks good it's like so much better am i right like drop in the comments below if you think this is so much better guys so much better and we have the chat in here as well that's that's that's perfect all right so so we've styled the app pretty much right now let's go ahead and add some messages to it right should we add messages yes of course okay so yousef i actually want you now to do this right guys let's give a round of applause for use if user is going to be adding the messages in this specific application you ready are you ready you ready i hope you're alright i hope you're right nero is like yo this is so much way better uh i was like are you using booster just for the fun family yes i am because why not yes i am because lucy's like up is so good yes yes yes this is with peer-to-peer guys yes indeed um how productive will this be if there are a 10 20 50 i'm not sure i just know that i know we tried with four people right don't know what we tried for now that seemed to work pretty fine all right sweet guys sweet guys uh i can't barely hear yousef so let's turn up your volume all right okay i i uh added the game yeah boy yeah can you hear me now right yes we can hear you now you guys hear yusuf yeah drop in the comments below you guys ready to continue going yes let's do it all right let's get to it okay so um so so the first thing we want to do is we get the input value so okay so let's go to the script.js here and in the so so i want to get this input here so okay uh you you are you are sharing the vs code right that's always good oh it's good you can trust me so the first thing yeah i do bro okay so i won't get my message so i'm gonna create a variable called message and here i'm going to use jquery since uh uh uh uploaded it when he uh added jquery uh when he added bootstrap he already added um where we're in the link as you can see here by default when you use bootstrap you need to add jquery but in bootstrap 5 jquery is not supported anymore but so let's keep going so let's go and get the input of the file of the input so here and try console.log here and type message uh but we want to get this input message when the user type enter because we didn't add a button so so the first thing we uh we we need to do is we call html which is the main file here using jquery of course so you see the dollar sign it replaces this gquery like this so we use the dollar sign so here we are calling the html the the file the html file which is dot egs uh to listen if a key down pressed key down pressed and we call the function so we call a function e we use es6 oy so if e dot so you said what you could do you can actually probably copy some of the code and just kind of explain it so copy some of the code like key down and they can explain it right because then they'll understand better yeah yeah okay so here we made a condition if e which is the event of typing the key keyboard so uh 13 is equal to the code of tapping the enter key key so for example every keyboard every key in your keyboard has a unique number so the enter has the key 30. and we we want that we don't want to send an empty text so we we want to check that uh the message here i tape let's replace this by text not message so we want to to check if the message the value in the input is not not empty not zero different of zero so it will be either one or one character or more so so so we when we press enter we send the message and here we are calling socket.emit so in socket we have socket.email and socket.on socket.emit will send and socket.on will receive so here we are sending from the front end a message as you can see so on event message we are sending the value of the input which is the the message that the user type and then after the user uh press enter we need to clear the input we don't want the message to stay there so we just want to send so yeah now let's for example go go to the front end and test it test if when nas press enter we should um we need to console log it before so yes i'm going to save it uh-huh go ahead console. no no console.log uh we need message on the text now if nas can go to the browser as i even go to the browser okay refresh okay okay type something and press enter and go to the console console okay so let's that's weird because message is not defined oh we we replaced it with html we say because we didn't use msg here there's no keyword mmc no i think it's like msg javascript 55 so 55 because you're here right here see right yeah exactly but you actually want you want to simply console.log here correct yeah exactly so that's refreshed so when i press the enter i want to console log the uh the input hey ready guys you ready guys hey let's go look at that uh see we we here we are not getting the value so now we we need to add dot val here so let's bug and uh dot value so because we are just getting the element so okay so let's go let's refresh this one more time guys all right refresh this boom look at that now we are getting the value now go yousef go you sorry we make sure that we get the message so let's go back to script.js so when i type it uh circuit dot emit message i want to send that message hollywood frank just gave us twenty dollars thanks so much frank twenty bucks wow appreciate it my friend thank you i really appreciate all right that's cool i love it then thanks frank thanks frankie uh so uh we need now to receive the the message that we sent when we hit enter to the server and the server will send it again to the front and we pop it up to the user so we go to the server the server.js yeah here yeah yeah i will keep going or wait for you oh okay oh okay i thought you you were saying okay anyways okay like i guess i'll continue on all right no no no okay uh yeah i thought you you were saying no no continue on let's go keep going okay so uh we want when the and the connection uh when we uh when when we the user is connected we want to receive the message so uh here on io dot on connection here ender socket the two so we want to do socket socket so we still we the user is connected to the other so here's socket on so this one will listen for the message so if you when you press enter this one will receive it and it will receive the message which will be the uh argument for our function okay and we want to send that function uh send this message to the front again so to the same and uh be careful we want to send it to the same room not to every room so make sure that we send it to that room id and we emit a create message here so now we are sending it we emit with create message and we send the message here now we want to receive the message to the new user so we go to script.js here and we do and we do socket dot on where are you typing okay yeah here okay go rocket dot on create message we should make sure that it's the same here the same string here as here so let's type create message it will take an argument which will be message and it will be function so now we got the message back so for example uh for example if we cancel that uh no clg console.log message we should uh see but let's make make it specific to that one so this is coming from server nice okay so let's save that and save in server.js here and now it can go to the i will save scrolls too okay so let's go ahead and refresh this okay now see if i type something it's actually not it's not going to emit actually oh it is okay so this is coming from the server okay okay okay now uh we almost did the actually hold on guys holy [ __ ] did you guys just see that guys this is insane this is coming directly from the server guys this deserves like hold on this is like uh like a dji one you know yeah i mean that's that's pretty cool guys we just we talked to the servers or talked to us same stuff yeah see so uh we we did the hard stuff here we made the connection now easy stuff so now we want to uh show the message in the chat okay right so uh i'm going to use here so he uh in the room.egs here you see that oh wait i'm not in the right one so in the room.ejs okay scroll down go down here you see that ul tag here we created so we want to append our messages here so we go to the uh script.js and and we remove this and so we we get the el ellen using jquery so ul and oh one third we want to append the message to it append and now we want to append the message uh but we want to add le tags which is the children of ul so we use template string open the tag ally close ally oh i'm gonna copy it paste it it will be better okay so as you can see here this is our code here so uh we will append to the ul cha and when every message comes we will add a tag called li which will have a class called message and then inside of it it will be have a user because uh user and uh in the bottom the message so now we appended it so for example if not uh let's save that and let's go to the so let's save that okay can you check it see it you guys ready to see this you guys see it drum roll drama please yes hold on okay and oh my bad okay what's uh so it's okay [Music] message yeah dot concrete it's weird because we received the message let's try i need to append the ally now to the message yeah we did that okay yes oh i think i think yeah yeah i think i understand yeah so so yeah it's because it should be instead the dot then they all should be instead inside the the prompts oh you know what i mean inside the what promise oh the user media promise yep yeah so we need to copy all of this [Music] control x and it should be not here so let me check the what is the progress where is the promise right there yeah so we should it should should be inside this one no not there right here at the bottom okay paste it in here good paste it save it and let's try again yeah but hold on let's make sure that we have hold on you you say you've pasted it right yeah all of it okay let's make sure that we just have a tab save that let's see refresh it boom um weird so let's take a look at hold on let's let's think about this guy so look so we have sagada on right so let's let's look at the console log i think there's a few issues because uh before we remove console.log it worked so let's see how long a message okay let's go and save this okay let's go ahead and refresh this okay boom all right so that the console message this is this is inside wait now let's let's make sure that we actually remove this we do not need this right here okay okay so like the message let's finish again boom okay so this is coming from here correct create message just want to make sure guys okay ready let's take a look at this this is like a debugging section okay okay boom refresh create message so we are creating the message i think the problem here becomes actually is here i think you're trying to you're trying to uh basically get a ul that maybe does not exist so if we do japan yeah so ul what if what if we do dot messages instead okay let's try that message let's try that message so if we go to script.js okay if we say dot messages okay okay and then i'm gonna say that append li class message that's what we're going to append okay make sense let's see yes okay let's go back to here it's always been there guys the color is not right oh man i need to have like a boo sound boo guys did you do you guys know what we're talking about guys it's because the fact that because the fact that it's there look it's there it's just the color is not there look it's there it even worked before yeah so it even worked before so we don't we don't need to have this sucker on here but that's fine it's already there so let's go and actually style this so i'm going to style this here for a second here yusuf okay i'm gonna style your messages here for a second uh while you're kind of you know you're kind of doing your stuff so for this guys to style the messages right uh what do we have let me see i'll just make sure messages yeah it's simply just a color white and and just you know list style is none so if we go ahead and go to style the css and we simply do dot messages messages okay paste this in color is white list style none if we refresh this now okay should we type it now ready ready hey let's go there it is guys check this out this is amazing um why is there i'm curious why there's so much padding in here boom messages oh because it's a list it's a ul do you have like a ul on here hold on you well all right this is fine so look we have a user guys check this out guys airhorn hey let's keep this going so we have the messages and look they're actually transferring to different people so uh yusuf let's keep going what what's the next thing we need to do in terms of messages yusuf i can't hear you hello yo yo yo yo yo yo can you hear me go ahead uh can you go to the same room and open another one with the same room ready let's try this yeah you guys ready for this are you guys ready for this i hope you are all right let's go all right okay so let's go ahead and shall we type now from the future hello hello where is it loaded look at this guys insane stuff what have we just done here we have done we biscuit we just created a a real time chat app so not only you creating a real time video app but you were also creating a real-time chat app inside stuff and that's all i'll say um guys okay so if you think it's insane if you guys if you're pumped for this drop in the comments below and we'll continue going yep okay so uh back to the browser browser yeah keep keep typing uh until the message reached a lot keep sending messages send the messages because when you keep typing you see that you see you see this behavior we don't want that behavior we want to scroll down only in this message so let me go to server uh not server let me go to vs code okay so yeah i will automatically scroll inside that div only not inside all the the the window so we we will create a function we will call the scroll uh scroll bottom okay let's do that right now okay uh we will we will call it an uh here until below this one so control p now let's jump and create this function so it will be const scroll bottom all right okay so i have already uh the function let's just explain it all right and here it is an extra bracket so you you see we have in the room js the main d for the chat which is main shot window so i want to get this steve and in this same time i want to scroll top and get the i assigned the that div to the variable d i can for example name it let v i always prefer that to be honest okay d dot scroll top and b which will take argument the scroll height so for example if you now try go to try it we will call the scroll function scroll to bottom function automatically whenever we uh hit a new message let's try that ready oh hold on come on let's try it through here let's refresh this ready guys so try it boom boom let's see you two bubba yeah but the reason why it's actually like that is actually because i need to set the overflow to scroll right so let's go ahead and set the overflow scroll so really quickly guys what i'm going to do is i'm going to set overflow scroll for this specific for this specific messages container so if we go to main chart yeah if we go to room.ejs we have the messages right or the main chat window i'm sorry if we go to style css and we go to main chat window right we say overflow y scroll or scroll down yeah yeah so i'm going to save that i'm going to refresh this really quickly here so now if we type guys boom boom come on come on ready ready look at that hey let's go guys this is now overflow scroll right so now it's now overflowing and because of yusuf's right dysfunction guys this uses function of where he goes ahead and scrolls to the bottom right as we type it's always going to scroll the bottom which is just so real freaking cool right yep yeah so by the way guys also want to say uh thanks to hold on thanks to charles appreciate the two-dollar nation appreciate my friend this is awesome guys keep it going guys let's continue on let's continue going yeah thank you so much guys that means a lot for us yeah it means a ton yeah it means a ton all right all right all right guys almost done almost done so close just a little bit more left and and we'll be able to deploy this are you ready to deploy it yeah are you guys ready to deploy it drop that in the comment below if you're ready to deploy this are you ready to deploy but we need something missing can you know what's missing guys what's missing guys what's missing i don't know what's missing guys what's missing i don't know i don't know what's missing we need to stop and mute enable those buttons oh yeah yeah yeah yeah okay all right let's enable the mute buttons and the style video buttons all right you ready let's do it yeah it will be so easy just yeah so go so use of let's go ahead and quickly i'm just going to do this really quickly here yusuf okay okay go ahead let's go ahead and we're going to do this really quickly guys so for the stop and mute button the first things first is we need to add a function to actually you know to enable the start stop and mute button so the let's go ahead and add a mute button so a mute function so i'm going to copy my mute function here and i'm going to paste into scripted gs and here it is now i'm going to explain what this new function does here in a second right so this is here we're going to mute mute our video okay video very quickly here so it know of course me to now call this function when we call the mute button am i right dropped in the comment below so what i'm going to do is go to that you yes and inside this right here mute button i will create it on click function that's going to call the mute button so the unclick function is simply going to look like this boom exactly boom called the mute function right click on that button so now if i go back to our script.js then button here's what's going to happen guys we're going to get our current stream you see this my video stream we're going to get our current stream which is this one right here right this is the one we got just in general and and then we're going to get the audio tracks for that stream the first audio track is going to be my track and i'm going to get the current enabled version of that audio track and what happens if it's enabled i'm going to disable it you see this and if it's disabled i'm going to enable it right this is how this is the ap how the api allows us to do this so and then what's going to happen is we're going to set them unmute and mute button so what does this does check this out so if i i'm going to literally just going to copy and paste this pretty quickly okay really quickly here boom so when we when we want to go ahead and when we want to go ahead and unmute it right we want to go ahead and set the mute to false we want to kind of unmute it right there we want to now change the text to be on mute and we want to change the microphone to be microphone slash with the unmute class okay and then we do document the query selector to go ahead and you know uh to change the inner html of the main mute button right but again this main mute button is not going to work yet why is this not going to work drop it in the comments below why is it not going to work reason why is because when we try to change the inner html of this here it's not there so if we do command c main mute button if we go to room.ejs you can see that we only have you know this is main controls button so we need to do oh sorry my bad we need to add main mute button to here right same thing goes for yeah just the main button we need to add it to there so now if we go to script.js if we save this just like that okay if we save that you ready guys you ready to see if this works yes let's see refresh ready yeah let's go oh wait didn't work it did not work hold on dang it why did it not work so if i do console log if i do console enable of undefined and enable upon define so it looks like it does not see the enabled uh inside here video stream my video my video stream why isn't that working my video stream is here okay right we get the my video stream which is fine that's there which is fine my video stream that's fine stream my video stream equals stream we need to now simply check if it's enabled okay let's go ahead and do my video stream console log my video stream so i'm going to go ahead and on on click mute mute i'm going to console log this my video stream here's the video stream oh you know why here look because i disabled audio yeah that's why so it's like you're trying to get the audio tracks but your audio is disabled guys so that's why you see this but the reason why i disable the audio is because i simply you know because i have re i hear a reverb so if i do right there it's not even if if i do mute now hey look at that now it's muted guys you see that all right let's do it all right next up uh let's go ahead we need to change like that color so you can see when we do an unmute we have a special class for on mute so i can literally add that class if i go to style the css if i do dot unmute dot unmute the color for this specific unmute is just a red color okay and it's just simply like a red color looks like this all right so now if i save this if i re restart this okay so boom check this out boom boom boom guys drop it in the comments below give us some fire give us some uplifting you know some uplifting stuff because it's so good to be here with you all this is really amazing this is amazing guys so let's go back to now script.gs and we can really we can remove that console local we don't need this anymore let's look at now stop video ready stop video so all right let's go so with the stop video how about you go ahead and explain the stop video uh really quickly here stop video okay so uh where are we here okay so we it's it's pr it's almost the same so let me we need to create here okay i'll paste it okay so here is it here it is okay let's paste it let me for my document okay so so we we create a function called play stop so play or stop the video uh here it's me debugging so let's remove it so it's almost the same so if enabled so if there is a video just make it false and set play video we will see it in a bit and else if it's not enabled make it enable so this is only the two uh two um cases so now we need to to create stop video and play video functions so i'm gonna paste it here so as you can see here so let's remove this okay so set stop video it's a function which take html template string we we add a font here which is the regular font and stop video so nothing special here but here it's like the set set play video where we want to stop the video with nikon slash and play the video so all we need to do is go to the uh room dot ejs room dot ejs and call not in where we were stop video here before the class here we call on click here on click play stop okay so i'm going to call that function okay yeah we call the function when we write so now can you go to the save and go to the oh save that so i'm gonna save this okay save this yeah enable autosave bro uh i think we didn't he didn't you didn't save script.js i think oh yeah yeah thank you there you go save that beautiful refresh it okay all right hope it works can you can you press again here press again and stop video again okay oh no no in the html proper inner smell no where is so uh cc oh you know why do you know why check this out you see this main video button guys do you guys know why i dropped in the comments below if you know what i'm talking about it's because of the because it's trying to get an html of no and the reason why is because it cannot find this document that query selector so look if we do main video button if i copy this if i go to room.egs it's not here look i need to add that class into here you see yes there we go so now if you go ahead and save this if we go ahead and refresh this you guys ready for this ready for this yes um yes let's do it let's go look at that now we do play video stop video um just add this the glass to the yeah add the class to the stuff yeah so if we do stop all right save this ready [Music] look at that it works guys this is insane insane stuff guys yousef awesome job yes bro high five yo high five there we go guys guys give us a high five in the comments below guys look at what we've just done we've created a chat app it works the way it should you it works blah blah blah look at that this is insane stuff so what's the last thing we got to do yusuf now it's the easiest the easiest one for for you not for you for for the audience but the hardest one for us for yes exactly so guys are you ready are you ready to deploy this app yes i hope so you guys ready to play this app let's do it do it now guys before we continue on let's kind of i'm going to ask you guys smash that like button if you have not smashed that like button before as you can see we have worked really hard to provide this for you to create this application and to now teach you we have been at this what for now what three hours now guys and so we'd appreciate it guys let's go smash that like button subscribe to this youtube channel all right share this video if you can and if you're interested in a masterclass the link is down below but wait you will also have a profitable javascript course which is also really amazing if i can really quickly quick really quickly here show you guys the course here check this out if you're interested in if you if you guys are interested in building things like this just like this we have a profile javascript course like this right here check this out right with 50 modules right where we use node.js where we use sockets where we use uh javascript where we teach you mongodb where we teach you um so much more beyond that it is insane we teach you react gs all that's in there right we have a course with 50 modules of training javascript success coaches right right here javascript success coaches right here we have we teach also how to make a living with javascript which is a very important part right not only do you get to learn programming but you also get to learn how to make a living and actually make money from it like if that sounds amazing let me know in the comments below right on top of that we have weekly coaching calls so beefy coaching was people like me yeah sunny kazi right we have an amazing community of at this point 1500 developers which is insane and everybody is there to help each other out and we have an amazing facebook community guys so if you're interested in that we have the link is in bio in there as well but if not there's we also have a free master class link in the bio link in description as well so take a look at it if you don't want to complete that's pretty fine but just want to let you know guys other than that let's deploy this you ready let's do it let's do it bro okay actually you have to you have you actually have to guide me through this one because you did this you did this part so let's let's go ahead and do this so what is the first thing we need to do bro so we are going to uh deploy our app using heroku okay uh the first thing we need to do is to install heroku globally so you can go to either do npm install g heroku frankie's like yo let's go frank yes you guys killed it thank you islam thank you great job guys thank you so much thank you guys this is amazing this is dope dude college life solution thank you thank you high five yes high five all right let's continue on let's put so the first thing what do you say i need to do okay either give me access to the your terminal over you right uh how about you just tell me what i need to do you just tell me what i need to type okay so uh mpm okay install right open the new terminal new terminal all right you guys can see me okay so npm okay so huh install install okay globally for global dash g dash okay yeah heroku all right ready okay all right do i need to do a git init do i need to initialize get here uh uh yeah yeah but it doesn't we can do it after right so install heroku so give us give us some time guys okay in the meantime i'm just gonna say you know uh look look through the comments guys we got vijay says good vibes nice work thanks so much man awesome stuff simple says thank you so much you guys are going to show us on github yes of course this is going to be on github guys of course bird's relax says like we are both going to rule the world developing world yes that's what we're here to do guys we're here to recognize the web development world okay all right love you too thank you as long as like thanks for shout out you got it oh man you guys are awesome you guys you guys are amazing man you guys are amazing thank you so much so much so much so much yes yes yes yes thank you so much thanks thanks okay all right so we got that what's next okay so uh let's do git init and let's push it do it happen at the same time get in it okay yeah and make sure to uh get in ignore and uh remove node modules oh yeah so new file do we need to do like do we need to actually do that yeah yeah because node module is do you guys know what git ignore is drop in the comments below if you guys know what git ignore is so we'll say node modules node underscore modules okay next okay uh so git add space dot dot okay next git commit commit dash jam this is gonna be our first commit right yep no i'm gonna say zoom clone down let's go horrible commander that's okay zoom command okay next uh wait wait wait wait we forget something don't forget to change the port oh yes let's go ahead and change the prop so one thing we realized guys is you need to change the port so if we go to script where is it script.js for this peer in order for this actually not not server.js script.js in order for our peer to peer to work we actually need to change the support to be what what uh i think 443 443 okay save that yeah it's four four three yeah i'm gonna do git add again git commit dash message and then at this point on i'm gonna say port good and then next okay so we did commit uh okay so now we can make uh so we we can push it to github but we can make uh the deployment from now so let's do it can we error or pushing the key tab let's just do a roku right away okay so type heroku create guys this is insane oh and val credential's provided please press any key to open any key so yes oh i need to log in okay guys i'm gonna log in here just you guys can see what i'm doing but i'm just logging in here real quickly here oh i'm logged in like that fast yeah that's so so insane insane okay next up so create oh just already created the app okay next okay next wait wait wait wait wait one sec so guitar okay then git push heroku master kit push heroku are you guys ready master oh we've got the process.env remember oh this won't work but but i think uh no problem i think no problem are you sure but yeah i don't think so because if we have four four three and then the process in v is four three it will work hope okay i'll see if you think it will work i guess we'll see okay next okay people are like please add process in vita port yes we need to add that let's do it cause i don't wanna i don't want to fail again so for the server that listen guys we actually have to specify this the port of the server itself so we're going to say process dot what dot nv right dot port right or or 30 30. so this one is going to be correct this one this one's gonna work when you are on the actual heroku server okay this is the default one that we use okay so let's go ahead and save this let's do git add again anything else yeah i think we're good then now could add git commit commit dash m m i'm gonna say okay port again okay beautiful that's so good then now we push the hook again he uh you did get uh there right yes it did yes yeah now git push uh heroku mars get push roll cool fast like this yeah i like the previous one holy moly guys look at how fast this is going oh that's insane mm-hmm all right now we need to do heroku scale so we need to actually make sure that there's one instant that's running correct like this yep boom all right then what now heruko space open guys ready for this [Laughter] ready for this yes hold on look at this huh wait allow hey let's go that's working okay you guys ready for this now okay so now i i'm going to send this to i'm going to send this now to guys hold on it's insane just so you know guys insane stuff so this is actually now live it's a heroku it's a live heroku app which is just crazy crazy um i'm going to actually now send this to yusuf yusuf you already yousef my bro yeah bro let's do it let's go guys oh my god god this is this is too good this is too good where do you send it uh in the chat and skype my bad no they didn't receive it okay yeah i'll do a slack here here boom ah receive it i'm gonna move myself because i don't wanna hear reverb so i'm gonna move myself here for a second here guys ready guys guys guys guys guys let's see are you ready for this yes have you on yes yes i can't see you though there you go guys insane stuff so let's meet yourself me yourself be yourself because there's a reverb oh man look at this hi this is nas yo hold on don't meet yourself on skype mute yourself on the actual application yeah yeah i'm mute on the actual application wow guys too good oh yeah i mean guys we're pretty much done this point guys oh did you look so music stop your video look you can stop the video resume video this is insane guys give us some fire in the comments below guys guys who wants to join actually i'm really curious can we let's should we let someone join yeah i don't know i think we should let someone from our team join let me let's see if we can get amanda to join let's see if we can get a month to join hold on i wanna hold on let's let's get it from my team i'm not done can we get rich who's online who's online guys guys this is insane stuff yeah he has notification turned off by the yeah guys too cool we literally haven't a how our own see the e type thai he did so i need to refresh probably hold on i need to refresh probably so there's some kinks to me to work out right it's not perfect hold on it's not perfect but i'm not hold on you see there's a third camera see guys there's a third camera right there it's just a mother does not have the best internet connection but that's okay he doesn't have the best connection he can type can you type something here yo yo yo yo a month let's see i'm here fresh oh god i have a lot of people there's a mono there's a motto what's up hold on say something yeah we're doing good guys it's him this is live on youtube oh wow this is so amazing guys this is too good too good i'm not how do you like this wait there's we have a lot of like we have a lot of like use it let me refresh i'm not going to refresh hold on let me refresh okay we have yousef no no no and i'm on somewhere there too there you go there's a motto okay i cannot feed you because i i'm muted i'm eating myself all right yeah yeah yeah this is so amazing bro oh man wow this is epic you know so guys so guys that's it guys that that's pretty much it i know you can't i know you can't hear me because i'm muted i know i know i know thanks so much thanks so much for coming down here man i appreciate bro okay appreciate it appreciate it bro okay see you see you see you soon see ya love this so let's jump to youtube all right one thing one thing we forgot to like uh add is like when a user gets disconnected like what to what to add like when you when user gets disconnected you know that that's pretty much it but that's that like that we can you could we can put that into the actual just simply like application so you guys can see yeah yeah but wait are you are you still on the zoom clone no no i quit oh you quit man yousef come on bro so guys how insane is this we have created our own our own zoo and it's live it's live guys oh there's there there it is there he is there's somebody who joined oh somebody just joined oh it's just oh wow it's just somebody joined how'd you get how did you join somebody there's joy oh man okay okay insane stuff insane stuff alright guys so guys pretty much it guys thanks so much um you know i'm gonna exit this this this this zoom clone it's insane we just created a zoom clone i i still can't believe it um the person who's on here can you can you type type here looks like oh syria just joined wow wow wow wow this is amazing cool stuff guys cool stuff guys so like i said uh we're gonna put this code up on github guys one last thing before we go ahead and leave you know i just want to mention to you guys that there's a free master class okay uh yusuf join back on skype let's go back and skype jump back and skype yep there you go so like i said guys there's a free master class you know for you guys to you know to take a look at right the link is in the in bio the master class literally looks like this let me take a look at it let me show you guys what i'm talking about so you guys can see it um where is where is the master class right here wait wait wait wait where is the reservoir there is there [ __ ] i see the link here hold on there's a free master class where how do i get to the master class uh the link is in bio yeah yeah description well description yeah but i'm trying to figure out i have a link the link to it actually give me the link yousef yousef give me the link the link for the course right yes yes link for the course and link for the master class right here i think i have it hold on give a second guys okay so this is the link for the course and this is the link for the masterclass okay all right dope dope dub dub sweet so here's i got it right here boom so guys if you guys are interested we have a master class right here if you guys are interested right here so um link is in the description top three mistakes to a woman becoming a javascript developer very important stuff kazi talks about right check it out link is in the description below very important and if you guys are interested we also have a profile javascript course which is what all this uc is kind of based on right what you're going to see is only kind of the cusp of what's going on actually in the course we have a monolith who's in the course who is just in our chat amazing guy right we have you know between you service in the course you have actually started the course you said how did you start in the course yeah yeah well i started i saw the as the ads and the the i i loved the modules and i thought it's it's really a special course because uh usually in uh specific course they just give me give you the course but yeah this course gave you actual uh live weekly live calls so they you can ask them and they can track you and it's really was the best experience exactly exactly so guys like i said like i said thanks so much um hold on if if you want this again the course it's right here right and if you know if you want to join there's a free master class down below as well so check it out those two things for you other than that all i gotta say is follow us here on instagram yousef right there right right here here yousef right there yousef.dev for me follow me on instagram somewhere here nas dumansky let's go ahead actually screenshot this let's go ahead to go ahead take out your phones literally what we want you to do take out your phone let's go ahead and you know take out your phone take a screenshot not a screenshot but take a picture of us and tag us in instagram you got it five four three two one hey do it let's go hopefully you took a picture of that and then we'll get going guys like i said we will go ahead and push this up to github so you guys can have it as well and you guys can put put it live for yourselves share with your friends you know you know put on your portfolio whatever it is that you want right that it's for yours to decide but thank you guys so much it literally it has been an amazing amazing like yeah so insane i think you can hear this right uh you can't hear this unfortunately yusuf but i can hear this so hey hey thank you guys so much for watching that's all i gotta say now [Music] thank you thank you so much yes energy yes yes yes so yeah you guys are it's like y'all smash that in every single video let's see we got who else we got we got so many amazing comments guys this is totally epic abdullah yes indeed yes indeed each amazing job thank you so much cinco thank you so much thank you respect thank you so much evil evil evil i just joined did you join did you just join the course or what if you just joined the course that's epic somebody said it's like i just joined sweet yes insane stuff guys thanks so much guys so other than that guys that's all that's all we have for you today come back next day we have a lot more content for you on youtube right like i said follow follow me on instagram follow us on instagram and all the links are in descriptions as well so on that have yourselves a great day and we will see you in the next video bye

Channel: Clever Programmer

Views: 309,012

Rating: 4.9148335 out of 5

Keywords:

Id: ZVznzY7EjuY

Length: 208min 2sec (12482 seconds)

Published: Wed Aug 05 2020