Transcript for:
Guide to Web Conferencing App Development

thank you [Music] [Music] hello everyone welcome to the adventure of developing a website like Google meet in this course you are going to use HTML CSS and JavaScript to utilize the power of webrtcmsocket.iu to build a web conferencing website you will learn webrtc to create a stream for sending audio video data you will use socket.io to create meeting environment by utilizing socket.io as signaling server which is works like a postman that is responsible to send or broadcast data to different user in a meeting with the help of Express server point we use socket.iu in Express server for signaling that it's called signaling server how to do this you're learning the course all of the dynamic mechanism will be done in in the course by JavaScript in node.js environment talking about how to complete the course completing the course like collecting and matching single piece of puzzle you will able to understand complete process once you complete the course though it depends on the level of user skills if you are already familiar about webrtc then it will be more easier to gain but for New Year to understand the code pipeline user must need to complete the course first then your puzzle will be completed you have to be patient while you are watching and writing code from a 15 minute plus lecture a loss of question will be raised in the meantime but as I have said you have to be patient and move next section to next section after completing the course you will understand almost everything and you will able to create the exact or ear version of desired video conferencing website so always feel free to post question whenever you got stuck I'll be there in QA panel for you and as always we'll be happy to assist you so no more talking let's move to the class [Music] foreign [Music] in this class we are going to set up root folder structure and project environment for our project let's move to the desktop to create the root folder right click on the mouse to create a folder and name the folder Google underscore made I'll create a folder named public in this folder create folder called Assets in this public folder and create three subfolders in This Ss folder one is image folder and the other two CSS and JavaScript folders now go to the provided Source folder that you have downloaded at the beginning of the section now copy the images CSS JavaScript folders from the SS folder of the source folder or copy the complete SS folder and paste or replace in the root folder now we will create two HTML files in the root folder one is index.html and the other one is action.html this is the root folder setup now we will set up the environment of the project we first confirmed that we have node.js installed on our computer if not installed we will go to our favorite web browser and type download node.js then click on search icon and click on the first result download and install the file according to the type of your operating system in this case I am a 64 bit Windows operating system user so I will download the MSI file by clicking on 64-bit and install it like other software then we will open CMD in that folder in order to do that first you need to open the folder in Visual Studio code then open a new terminal so I will initialize the npm by typing the npm init and specifying the author and description requirement and then press enter at this stage you will install two dependencies or not modules one is express.js and the other is socket.io write the name of these two modules and press enter button it will be installed with a new folder called node module of our project now we'll change the script properties under the file in package.json created during the initialization of npm in our project so right start and the below of this property right node server this means that whenever I type and beam a start on the terminal and the command will run a file called server.js so how do you run the file when you have not created so I create the file for now server.js but we will write code to the server.js letter in our upcoming classes so that's it so far we have finished this class in the next class we will work on creating the landing page of our project so we'll do it in the next okay guys in this class we are going to create our landing page so let's open our action.html this landing page to our editor and here first we will write basic HTML structure so write HTML colon 5 then press tab here you can see our basic stimulus structure of the landing page now change the title create our join meeting okay save it now we'll open a live server to see the preview of action.html so right button on the file name here you can see open with live server click on it and the page will be open in a browser with a live server import 5500 okay fine here you can see the title create or join meeting fine now just right after this title tag we'll create few CSS link tag to load CSS from Buddha strip or our custom style.css file so right here link colon CSS best tab and here change the hypertext reference href it will be public slash SS slash CSS here you can see the suggestion and then we'll create another CSS link here and the href will be Google material icon and the link is GTP as colon slash slash fonts dot Google apis.com slash icon question mark family equal to material plus icons so this is the CDN link this CDN link is for Google material icon we will use Google material icon in our project now we're going to link our customer style sheet to our page so write a link call on CSS press step and here you'll write public slash slash CSS slash say we have not created this style sheet yet so right here style.css and go to the public to emails folder not image folder to CSS folder and right click on the CSS folder and here you can see the new file and write the file name style dot CSS okay fine so our head section is done now move to the body Tech and here first we will create nav tag for our number okay so write nav and we'll assign some class this dot is for class I hope you already know about it so whenever we are going to create a class we generally use Dot and whenever you need to use a ID you generally use hash this bootstrap Network classes for our Network to defending landing page never and then we will assign another class number expand MD so here numbers recruited wrapping basically net bar with a number expand MD or SM or large Excel is basically for responsive collapsing and color scheme classes I hope you got it so next we'll assign another class fixed top it will fix the network at top okay press Tab and here is our nav tag and in the snap Tech first we will Define image tag for logo so here we will assign the logo image public slash assets slash Images slash this Google meet icon.png and here assign a class logo okay but then we will declare anchor tag and here that hypertext reference primarily set for hash then we'll assign class the class is number brand and set the color of the text text dark this is bootstrip plus and here we'll write Branch name Google mate okay fine now take this logo go to the style.css first and here first you will Define the body and here setup found family Roboto if it is not found use letter and the make is important to override Buddha step font family class okay and then assign here font size large okay now here we'll assign CSS property to our logo class so first assign height 43 pixel save it now go to the browser so here you can see logo and brand name so next here you can see we have assigned a custom class Network brand copied and go to the style.css and here place the dot for class and here we'll assign CSS property for our neighbor Branch so first set font size 27 pixel okay then set a padding left 10 pixel and then set a font family so this letter I am especially using here for brand name and now you can see here the logo and the brand name so we we will divide this blank nap between two part first one is for left side and second one is for right side so we will assign some menu link here so go to the editor so for all this menu link here we will declare a div tag with some clauses so right here collapse and this collapse you know number can utilize Network collapse class to change find their content collabs behind the buttons so that's why you need to specify this network collapse class with this collapse class okay so this debarya is for this rest of this number okay so here declare and you will tag with the class never nav and also set a margin right Auto foreign and as we know we did a list tag under the UL tag so declare list tag and also set a class never item nav item press tab and here we will declare an anchor Tech with hash reference currently for now then we will assign also a class here nav link because this is an Link at the network and we will set a text here at a glance okay so then we will duplicate this for two times here change it how it works and then next one is for plan and price save it so this one is for the left side here you can see the menu now we'll assign another UL tag for our right side never menu so here just duplicate this you will attack Ctrl D I've modified my code editor shortcut with duplicate key Ctrl D and so you can do that by yourself from the file to preference to rear keyboard shortcut okay now here I will change the text it will be sign in and it will assign a class here to identify this sign in button sign in this is the custom class to identify the sign in button we may need it later okay so you need to change it here a little bit so convert it into a button action button so here assign some class the class is BTN bootstrap plus and also yes BTN outline to to give your outline and give a secondary color for the outline and then make the button a little bit large so use BTN Lars class and set also color text info okay we also we can assign also a class font read bold okay that's it now right here join the meeting okay so copy this button from here and paste in here and right here start a meeting okay so this is for creating a new meeting and this is for this button is for joining an existing meeting okay so we will create functionality level now we're going to design our button so here we'll change little bit it will be text light and we'll remove this outline give a background color BTN info save it now here we can here you can see the right side nav menu okay there's two action button now we're going to set CSS to our class so first we will get the nav item this anchor tag okay so here Define this Ally dot or this nav item a here you can see this anchor tag is under this nav item class so we'll first Target this anchor Tech okay set a class color gray and make it important to overwrite bootstrap CSS property give a font size 16 pixel and also give a pairing 0 top and bottom and 10 pixel left and right it also set font weight 600 to make it bold okay save it now here you can see it's look fine now here you need to you need to change something this sign in we need to make it in middle so here we'll create a custom class display center so here we'll assign first display Flex and then justify content Center and then align items centers so all the time we will use this display center custom CSS class to place a div in a center okay so here we'll assign this display center now here you can see it is now in center but we need to place some space here so here we'll also assign margin right zero to make it absolute right side okay so we make it margin right zero here you can see the change all the right side nav menu item has moved into absolute right sides of the number so you can see it now we'll Target this button or our nav item to set a space in between this button and this menu tag okay so go to the standard CSS and here Target this Ally nav item here you can see then I have item okay in the list tag so just set a padding here zero top and bottom and left and right 10 pixel save it now you can see it now looks fine okay now move to our body tag go to action.html that's right after we are created main tag raster will declare a class Jumbotron also set height 100 percent with display Flex D Flex press Tab and here first we will create two containers container class this is Buddha step container with with 50 percent press tab duplicate it and in the first container we will first declare a heading tag and set a style not a style set a text here premium video meeting now it is available for free to everyone next we will create a P tag and you will assign text here we are redesigning the Google meet service for secure business meetings and making it free fall everyone two years okay and here you can see so here we'll change something we'll make font size bigger so let's put some inline Style say write form size 3 RAM and also set a inliner style here font size 20 pixel okay okay let's assign the image here so first degree image stack and set Source public slash assets slash images AS Slash this Google mid people.jbg Finance set a class here sign in image this is class okay save it now copy this sign in image class from here go to the style.css and set a style set here you can see here you can see the image now here set first height 390 pixel then set border 25 pixel solid white then also set border radius 5 pixel then box shadow one pixel from x-axis one pixel from White this 5 pixel blur and set the color is gray okay and refresh it here here you can see the change okay now here we need to specify two action button with an input field to put existing meeting ID to join in a meeting so let's go to the editor and here just right after this text will create those two meeting button so first declare here and you will tag with the class display Center then here we will declare Ally Tech then in this list tag we will declare button Tech with bootstrap class BTN BTN large make it quite large set text color light to something like white and then make font weight bold then also assign the class display centers okay and here we'll also use Google material icon so from Trail icon big Lotus pen tag and in this span tag we'll assign Google material icon class material icons okay and we will name the icon here it is video underscore called okay name the button here is new meeting save it and here you can see this dot is for the list item so go to the style sheet and here specify the another list tag and set here list style none and set margin 0 oops margin of zero and also set padding in zero save it okay so there must be an issue here if let's check the CDN link materials icon so here forms with aps.com family material icon so here I will be in capital letter save it plus uh check it now here you can see yes there is now showing icon but they have not said yet any background color here so go to the new meeting button here so set an line style background color hash zero one seven nine six B okay and also set up inline style for our icon and set here margin left one it will be margin right and margin right two okay save it refresh it okay you can see that our icon has moved to the right for for 8 pixel okay here you can see next go to the editor we'll duplicate this list stack and here the background color will be white I have f f and f 6 F and we'll give a outline BTN outline secondary and then text will be dark on the secondary color okay and change the icon here it will be keyboard and instead of text we'll declare here input tag and type will be text and here placeholder will be enter a code and this is for the existing meeting code we don't want to see border here that's why you sat in line Style Style border none save it here you can see okay about 20 focus on this input field there is a outline we need to make it disappear so go to the style.css here write text area Focus so basically focus on text area or any input field we don't want actually the outline so here we'll set outline none and we'll make it important to overwrite bootstrap CSS property save it and go to the browser and there you can see there is no outline or any focus on the input field create another list tag and we'll set a class here for text colors that is text dark also set adding left wall and make it fun to it bold and also set cars or pointer so this is custom class we have not created yet to see a customer in a link or a tag so that's why you will copy this class from there and set style here cursor pointer save it go to the action.html and here we need to specify the text join okay save it and now here you can see the giant actionable button or link you can say we'll use this to join in existing meeting now we want to move this line to the start of the page so in order to do that set here justify content start this is bootstrap class to set justify content Flex a start CSS property to our UL tag okay so here we have used this buddhistor plus justify container start it will move this you can see here so it will move to the start point of the line okay and then in the first list stack we will set a style padding zero but for the second Lisa style where we set this input field we need to set a space between this two button so that's why you will set style here basically padding zero zero zero twenty pixel this 200 pixel is for left we can also set a set class here something like this padding left or you can say two set two save it and here you can see but I go for three or four three fine we need to also reduce this space here so heading left side two just remove this save it and it looks fine okay so here we have designed our action button but we need to make this uh jumbootron background color white and you need to bring down this body area a little bit more from the never so go to the style.css or will not be a stellar CSS we will do it from here just set a style here padding top 3.5 Ram and save it here you can see and also with the style.jss and declare a class Jumbotron this is buddhistor Plus we'll set background color here White okay so here we can see the change it looks fine next uh we'll set footer of our landing page here go to the action.html page just write it for this main tag dealer put attack and set class share container to show it in a container okay and in each stack H6 tag will write learn more about Google meet so you can specify in a span tag okay and declare here class learn more there's a custom class with a Buddhist step class text info save it and here you can see the footer okay so we have successfully designed our landing page you have seen in here so in the next class we'll use JavaScript to activate action button functionality okay we'll use this new meeting and start a meeting for same talks to create a new meeting and this join in basically high end one click on join the meeting button the entire code this input field will be focused and how end user input a meeting code and click on the join then we'll redirect user to an existing meeting okay or on user create a new meeting or start animating we'll redirect them to a new meeting with a new meeting ID okay so we'll create the functionality in the next class foreign [Music] class we have designed landing page in this class we are going to apply JavaScript to our page to bring the functionality of our landing page so functional domain in this class we exactly utilize our action button to redirect to a new page what you call home page or web conferencing page okay so let's go to our action.html page and just try it out for this footer we will create a script tag and in this script tag first will load our JavaScript jQuery Library okay so here we will use the CDN HTTP colon slash code dot jquery.com jQuery 3.6.0 dot Min dot Js okay so this is the jQuery CDN from jquery.com next we'll create a script tag for custom script so first we will initialize jQuery library to our file and we'll initialize by writing function and then it will run just a right after loading of the page and first what we'll do here we can see a good life so either you can see the preview by right clicking on the file and click on open with live server this is the one option and another option or alternative option is to click on this go live tab button whenever you click on this button the page will be previewed in browser in 5500 Port under this localhost IP address so here we will enable the function order of this button this new meeting and started meeting both button will work same on the other hand whenever you click on that join the meeting button then this input field will be focused and right after giving a meeting code and click on the join button the page will be redirected to web conferencing home page so exactly we'll do that so first we will create the functionality on a user click on the join the meeting button the input field will be forecast so go to the action.html and raw just write document dot on click so which is the button here the button here is the join the meeting so here is this join the meeting and here we will use a custom class join meeting to select or identify the button so just copy it and in double inverted we'll select the class then we will run the function and here we will make the input field Focus so here we have not set any class yet so declare a class enter code and just copy this class name and get the class and then use jQuery Focus to focus on the input field okay so let's test it click on the join the meeting button and here you can see the input field is now in Focus okay now we are going to create functionality to get the meeting code and set it to the URL in a parameter meeting ID and redirect to a home page or web conferencing page just right after clicking on the join button okay let's activate the functionality so here we will set a class in the join text so here write join action so take the class from here copied and duplicate it here will specify the class name join action and whenever you click on the join action first what we'll do we'll take the enter code value and store in a variable join value so here we declared the variable join value and get the enter code class input field value okay so here's the input field this is so I never click on the join action then it will take the input value from this enter code class or this input field and a story in this join value variable next what we'll do we'll declare a variable meeting URL and after URL to this meeting URL so first to get the origin window dot location dot origin so here origin something like this HTTP as colon slash Facebook dot com so I hope you got it say this code will fetch the URL origin something like this from address bar then what we'll do we'll concatenate a parameter name meeting ID with this question mark we as you know we declare parameter with a question mark just right after origin and then equal to will concatenate that join value here's the join value we don't need this double input okay so here you got the meeting URL then what we'll do we'll use JavaScript replace function to replace or redirect to our meeting URL so you will write window dot location dot replace so replace current URL with this meeting URL David now let's input a code here you can see and click on the join and here you can see our URL have replaced or we redirect in a new page with the parameter ID meeting ID this 343 for whatever meeting ID we have given into the import field and this redirect to the index.html page there is no specific page name here that means it is the default page of our project index.html page so the page is blank there's that's why there is nothing you can see right now so we'll move to our action.html page okay so you have created the functionality to join in an existing meeting now we are going to create functionality to create our host and new emitting and it is very easy to do so just right after the code we just duplicate it and we'll use same class for this two button okay the class name is okay so just place place here a class new meeting and same class will assign for this button and here it is new meeting okay this button in this button okay so now we will specify the class here new meeting whenever you click on the new meeting then we don't need to get any value we will just specify this uh meeting URL but we need to assign a new meeting ID in this area okay so we will assign a eight digit value here that we have not created this variable yet so copy it and declare the variable here and get a eight digit value by writing code and a story it in this eight digit value variable so how can I get a different a digit value and this is simple use math.flow function and here we will specify math dot random will return a number and when we multiply is math.random with 10 crore that means eight zero just right after one then we'll get a number something like this one two three four five six seven eight point something like this whatever first it will generate a eight digit number then point this so here math dot floor what we'll do remove this disease just right after the point okay then it will be something like this just an eight digit number okay I hope you got it so by writing this code we got a digit value we're storing this variable and then we replace the current URL with the meeting URL we have created right here okay so let's test it first save it then go to the browser and click on the new meeting and here you can see we have redirected to our default page that means index.html page with a new eight digit meeting ID okay move to action.html page so you have seen this new meeting redirect us to a new page in home page with a new meeting ID exactly same way this button should redirect us to a new meeting because this both button holds same class name meeting okay so click on the starter meeting and as you can see it also redirected us to web conferencing page with a different meeting ID okay so so far we have created our landing page and landing page functionality okay so in the next class we'll move to our wave compressing page first we'll design the page then we will step by step move to the dynamic part of our coding however you will write JavaScript code to bring functionality to the Google mid app okay so in our upcoming class step by step we will do that [Music] okay guys in this class we are going to create web conferencing page that made home page or user will meet in a video conferencing style or completely like as you have seen in a Google image so we'll design the page first then we'll add functionality to the Page Letter Okay so first go to the index.html in order to design the page and here first what we will do first we will create basic HTML structures right HTML column five and then press tab okay so right here Google meet okay so this is the title next what will do we'll add some stylesheet to our page step by step so we write link column CSS as you have already know that this emit shortcut press Tab and here this will be public slash assets slash CSS slash and then buddhistor.min.css and then we'll add Google material icon CD ends write link colon CSS tab so instead of writing this CDN we just simply copy the CDN from here you can see or we can copy this bold because we need both of the link and paste in here okay okay so next move to the body tag here faster will declare a main tag with the class container fluid and also set a class display Flex with flex Direction column and set a custom class home web give a hyphen here okay now in this main tag here in the main tag we will divide this main tag into two parts two parts first one is g-top zoom in Google and the top step and next one is G bottom so what we have done here basically we divided this main Tech into two part first one is then is is the top part and second one is the bottom part okay so here we will divide this the top class into two part first one is for top remote video show rap discuss this class will show the video okay with another class display Flex press Tab and then we will create another div with a class G top left also with buddhistor class background light BG light and set text secondary also set with 50 this all of the class not 50 25 percent and then also declare display Flex deflects and then set align items Center read justify content between this is like Justified content space between and then set up padding left two and padding right to press tab okay fine for set here text light next slide now here in this class first we'll assign a class called red all the video available in this call up class press Tab and set here in line Style background color black okay then in this div class we'll declare a class with video wrap and also signer ID the users okay press Tab and this here we also set summon inline style display in display Flags there okay and then set Flex rep rap so declare display flex and flexor app next in this class we will declare another ID this ID name is me with class user box and we also declare here display center class with Plex Direction column next column First Step so this div will hold the user information just right above the video here we'll specify first one is username in is to tag so here we'll set class display center you also set style in line style font size 14 pixel so the username will add it to this S2 tag using JavaScript letter we'll use it we'll use JavaScript to assign username in this H2 deck next we will wrap video tag in a deep class to make it Center so to make it Center we will declare display center press Tab and in this class we will declare video tag you will not put any Source here we will write auto play autoplay mean sign up for any video loaded in this tag it will be Auto played then at first my video load it will be muted any set ID equal to local video player okay fine so just write it for this me id will declare another ID with the name other template press Tab and you also set class here user box display center and flags Direction column also set a style here we don't want to show it in the page because this other template will be duplicated or copied in JavaScript to show multiple user in a single page okay you will learn the technique in upcoming classes right now I'm just coding this HTML and CSS to design the page they are set a style display none okay and in this class we'll declare same H2 Tech S2 tech can the hair class is same as it was so just copy it and the past in here okay just right after it you will declare video tag just write just like it so just copy and pasting here and instead of local video player it will be uh we don't want to actually set an ID here because the ID will be set by JavaScript socket ID later in in this video tag okay but right now what you will do is we'll wrap this video tag in a class the class name is display Central plus tab okay and right after this video tag we will assign another tag is for audio tech okay so right here show the controls of audio controls and I don't want to show this audio read video why you learn later so that's why first I'll set here style is equal to display now foreign video tag and here is another video tag so this video attack is basically for local video player that means when you load the page and open cam your webcam then your video will be loaded in this local video player and all other users remote video will be showed on the other template area by duplicating this code for every individual remote user you will understand it later so right now just code as I'm writing in here okay so this is for showing video in our web conferencing web page there is not only video will be displayed in the place but also there will be some option and information also will be displayed in the page that's why you have created this div tag the top left this part will show the participant info and the message options [Music] okay so now you can see here that this G top left is with 25 percent but this one has not yet fixed or set any width in this area so what we'll do we'll set a area for this deep by declaring in a different dip so here we'll declare another div ID is meeting container with width 75 percent okay and also Diggler d none that means display num press tab okay so then cut this deep from here and just right before this deep air place this div and save it okay now this div this diff holds 75 width and all this area hold by this div also get the 75 percent width okay fine so you can you may notice why I have not set 75 percent in here because a letter you will see the action when we will use the message area or participant details area there you need to adjust something in here that's why I have placed with 75 class with this meeting container ID okay so okay fine now we'll move to the next part is this the top left okay this is the top remote video show wrap and this is the top left so here what I will do now now we will divide this G top left area in three parts uh first one is for participant icon and tax basically participant heading to declare a class here top left participant RTC band wrap with class creating top two and set custom pointer so this is custom class fine next we'll create another div ID [Music] plus top left chat trap and as you can see here this is called the chat area and assign padding top 2 go to strip class and assign also the cursor pointer custom class that we have not set CSS property yet press tab okay and here we'll declare a span tag for materials icon to show message icon you can do it later with this we have divided this DB top left Plus in these two subclasses now we'll create another one is for showing time so the class is top left time rep this class will show the time okay fine now we will divide this class top left participant wrap into two parts first one is for Icon so declare class something like this top left participant icon hit Tab and really assign a material icon here so as you know material icon declareness contact with fast material icons okay and the name of the material is people so this is for participant icon you can see in our editor just right after Computing this you'll see the preview and the next one is for participant count civil declare class top left participant count press Tab and using JavaScript you will assign participant number in this div class okay so it's our JavaScript part we'll do it in our upcoming classes so and next this is the chat here we call it top left chat rep we assign chat headings here okay so in order to show this is the chat area we need to assign a icon here and Google material icon just write a standout material icons press Tab and name of the icon is here message so save it now go to the browser and press here index.html press enter you can see there is no significant change in the space except these two buttons first one is for Google material people Icon and next one is the message icon that you have created just right here so friend we need to to make it look good you need to use and apply CSS to these classes you're ready so we'll do it just right after completing this HTML part while you will use CSS property to our page it will look fine okay now we are writing the system or code so keep writing now we'll move to the G bottom area now this is the G bottom that means this is the bottom part of our Google mid app so here we need to assign some class bootle strip and custom class the first bootstrap class is here background will be light VG light and then we'll set margins margin zero and also declared display Flags Justified content in between and also make it align item Center to make vertically center items in the div next we will divide this div into three parts first one is bottom left [Music] second one is duplicate it button middle and the third one is bottom right okay so in the in the first bottom left class declare display Flags and also certain line style height v y [Music] this is because here in this bottom left area we will assign meeting details okay so declare a class display Center Dot cursor pointer Dot meeting details button then press tab okay so in this class or in this deep first you will declare aspect for material icon so call spend tag with material icons path to declare material icon and press tab here we'll write the material name here we'll write the icon name keyboard underscore Arrow underscore down here it is you can see it is show meeting details say here you will set the tax meeting details okay you can see here next in this bottom middle we will divide this deep into three parts first one is for mic toggle wrap so declare a mic which I will wrap class so this class is for toggling microphone on off if anyone want to switch off this microphone or want to mute his microphone he will use this icon my traveling web he will use this class microbial graph and we'll assign material icon here okay first of all we will use also some plus here action icon Style so this is custom class for this div we'll set CSS property here later so we'll also use display center class here and then in set margin right 2 and also set cursor pointer and here is set ID this is the important ID Mike mute unmute okay say here we assign Google material icon so in a spin tag include the class which will icons first step and write name of the icon is mic off okay it will be underscore [Music] save it here you can see my curve icon so next div is for India Echo to to leave a meeting or session so here we'll use the in-call wrap class this is custom class we have created it in called web with another class action icon Style [Music] we have created in here okay and then also declare display center set margin right 2 and also set cursive pointer Plus [Music] tab and here we'll declare material icon so write a span dot material icons press Tab and we'll name it call and here we will assign icon color is text danger danger [Music] okay save it so you can see call Google material icon so this is the two part of the bottom middle class next the last one is for video cam on off or video cam traveling so we'll declare class share video Turbo red with the class action icon Style [Music] and also declare display center class with capture pointer [Music] we do need to set margin right two here because this is the right one this this will place at the right side you do need any cancer marching at the right side so press tab okay declaration check for Google Mutual icon and we assign it with the Call of material icon class [Music] okay and the icon name is video you can underscore off and here you can see okay so you have completed the bottom middle part next we will move to the bottom right part where there will be two options one is for school sharing and another warmings for option like we'll use record video one single Channel recording option okay so we will divide this div into two part first one is for present now red and second one is for option red okay so in order to show it in poison in the vertical we need to First display Flags so right here display Flex justify content Center also set align item Center [Music] Plus and then set also margin right 3D okay these are the classes and we need to also set a style here for height the height will be 10 view height okay next in this present now web we will also use displayed Flags cost justify content Center class and it will be Flex Direction in column okay and settless a line items center with margin right file and then cross save pointer okay declare spend tag for Mutual icon with material icon class and Trail icons there's tab and here we'll write present unrisk it to all icon and next we'll declare a div here just right after this the div name is present now so I declare another dip here just due to because you need to show this present now text just right down this icon that's why we set it just right after this deep tag in a new div tag okay because you know div tag breaks line next in here we'll declare classes cluster pointer display center and also set a style here height 10 view White position [Music] reality okay and in here we'll declare a class first the class name is option icon press Tab and in this area we will declare spend the natural icons press tab okay and right here more underscore the word this will assign vertical dot here okay so save it and go to the browser you can see here this is the bottom line it divided into three part first one is this mid bottom left so this is bottom middle and this is bottom bottom right so we need to use CSS to place its own place where it should be we need to add CSS to our HTML code and we will do it in the next so in the next class we will use CSS to make look good our web conferencing page okay so we'll do the next foreign [Music] CSS to our HTML code okay so in our previous class we have written basic HTML code now with Buddhist strapped class but it doesn't fulfill our requirement to design page as we want so here we need to exchange you need to add some code here we can see in home wrap here it is first of all we will make this homework background black so here I'm just right after there this is for our index page index page so oops okay so here we'll first specify the class name and then set background color RGB 31 comma 30 comma 30. save it now go to the index.html and there you can see the background is black here okay next what we'll do here we can see in the G top we take the class and go to the style.css and here will set the style height 90 view height and position relative okay save it now you can see here the change okay it is now getting oriented okay it is now getting fixed its own position according to our CSS code so next what we'll do here everything is okay next here we'll take this video wrap path and rest is okay this we shouldn't change anything here just take this video here plus and gear here foreign height 600 pixels and here we'll all the tag in the video wrap was we'll use this flag to one one two fifty pixel okay and then we'll make border one pixel solid white oh so here it will be all the child of video rep class we will apply this flags and border so it will be something like this video wrap to all disaster refers to select all what is in video wrap class will be selected and apply the CSS property okay so next in here the top left in line 37 just copy this class go to the style or css and paste in here with doubt and that's some style here first of all set position absolute okay so G top left is basically this one this area that right zero okay height view height and also set top zero then that a border bottom left radius 10 pixel okay so you can see here this is what you wanted to do okay so currently you can see here there's a there's there's some Gap in the Border we can remove it easily remove this container fluid class it will just or the space of basically margin in the Border will be removed it looks fine so we have done this G top left right now here it is the top left now we'll work with top left participant wrap just copy this class stuff like participant web and go to the style.css and here past it and set a style here position really deep just only this okay and from this line you have introduced this cursor Point path we have not created yet this class so we'll create in here simply we just made cursor pointer and where you can give a padding 5 pixel okay we can give a hover effect to the cursor pointer so you just duplicate it and path forward sudo class so here it is and here make a background color our GB q26 225 J2 5 and also give a border radius 5 pixel okay here you can see the effect here when you hover on the icon you can see a gray color background with a border radius okay here you can see also however we have used the cursor pointer there you can see the effect okay and next class top left participant count copied go to the stylish CSS and just in here and we use position absolute because you can see here this is the under the top left participant wrap here you can see top left participant rep we make the position relative now under this class this top left participant class located we have made position absolute then it means this class will be exactly into this class area okay and also set top -2 pixel I hope you know already know it what is this top -2 pixel and then right minus 3 pixel and then font size 15 pixel okay so where it will be located in here again suppose we give a true here then you can see this tube just right at the top right corner you can see the count okay now move to the G bottom here in the 50th line just copy this G bottom this is the whole area of the bottom okay just copy this class and go to the standard CSS and paste in here and assign machine wizard pixel from top and bottom and minus 10 pixel from left and right and make it important to overwrite bootstrap CSS code then set a padding here zero pixel from top and bottom and 20 pixel from left hand side okay is that a box shadow 0 pixel from x axis and 0 pixel from Y axis 5 pixel blur and black color is black set also jet index two save it you can see here the change okay but it is currently now scrolling we'll fix it later okay go to the index.html get the bottom left custom this class copy it and set a CSS property to here in bottom left class so set position relative and padding five pixels okay so this is the bottom left you can see here where the index.html page and let's look for the Clause that you need to assign CSS um here we have got an another class icon action icon style copy it okay here it is but you can see this icon positioning vertically we need to make it assign horizontally so go to the bottom middle class and set here display flag it will align horizontally you can see here it's fine it look okay and then we also that justify content Center here and align items Center here okay and you also set an inline style for height and height will be 10 view height okay save it I can see it look fine okay and take this section icon style and copy and paste in here foreign here plus set height 40 pixel and then third to it also for the pixel set border one pixel solid light gray set up border radius 50 to make it Circle and here set font size 8 pixel and make it important save it now here you can see three icon with circle border background and on every hover over on it you can see it converted into an rectangular shape background okay it looks cool point we want to set a style to the icon to here get the action icon Style and here you can see that we have a materials icon just right after this action icon Style okay in this div area we use the material icon so you can see gear so we'll catch the materials icon class okay pan then set on size 18 pixel let's take a look on it how it is look like okay it looks smaller but I think it also fine here it looks okay it looks quite more beautiful than this smaller look okay next what we'll do we'll move to our index.html page and take this in called wrap bus and go to the style.css in here and set a style Ms transform rotate 135 degree and transform rotate 135 degree okay this is this is for browser from Microsoft and this is for Chrome let's specify the E here because this is in called wrap here you can see it is the rectangular shape has a rotate of 135 degree it looks cool or you can design icon or Button as you want so this is so far what you wanted to design our page but there's a vertical line you can see here we want to remove this vertical and horizontal scroll bar from our page so just remove or reduce the g-top there it is reduce the top height so let's go here it is Jitter gtop height to 92 let's give it 89 baby and for removing this horizontal bar from the bottom we need to get the G bottom here you need to remove this margin just commented out this margin and refresh it it should work yes there is no horizontal and vertical scroll bar right now in our page okay so here you can one thing you can to fixed this one present now so here you need to fix this uh present now a screen sharing option this is not aligned correctly so go to the editor and so here is the president now you can see that div is out of this parent dip so we just cut and paste into this parent dip just save it and go to the browser and here you can see it is aligned correctly okay so in the upcoming class we'll assign step by step all the functional related to your page and basically in the next class we will write JavaScript code to create the functionality to get the meeting ID from URL and get user ID from JavaScript prompt so exactly we'll do it in the next [Music] okay guys in this class we are going to write JavaScript code to bring the functionality in our web conferencing page so first of all we have seen here that uh from action.html when we click on new meeting you can see here that a unique meeting ID generated and the page redirect us to you home page or index.html page okay so here what we'll do first we will get this meeting ID and we'll create a prompt to get user ID from the user who just create our host emitting or join animating uh both will be same we will get first user ID and meeting ID at the beginning of starting a meeting okay so let's go to the editor and in index.html first what you will do here we'll add some script here so here first you will load jQuery script so here you can see in JS folder I have already placed jquery.minjaw.js file that is what I'm going to first load here so write the script Tab and specify the source here public sets slash JS and jQuery 2.4.1.min.js okay fine next what we'll do we will create a script tag also and right here first we will run jQuery function okay so here first we will get all the parameters from the URL so here is the parameter is meeting ID and value is this uh eight digit number okay so here first get the parameter and store in a variable constant URL params parameters equal to we create a new object for URL search params and we will pass window dot location dot search as parameter for your source params so basically it will return the parameters next we'll declare another variable for meeting ID meeting underscore ID and it will be URL params dot get so here you can see that this is the meeting ID is the actual parameter holds the this eight digit meeting ID so we will get this parameter by using UL params.getfunction and the parameters name is meeting ID okay so you got the meeting ID and store it in meeting ID variable next you willister user ID from and prompt so here write user underscore ID equal to window dot prompt and right here enter your username okay so specify some variable okay now we'll check if either user ID is empty or meeting ID is empty will not let users to access our web conferencing page so here we'll alert them that user ID okay so you find a decision then it will be better if we specify here user ID okay so we'll alert here user ID or meeting ID is missing if it is missing then whenever user click on the alert then we will redirect user to the action.html page to our landing page so we'll do it by using window.location.href property here we'll link them to action dot HTML file okay and then we'll return this here you can see this meeting container we make it display none here okay so if user ID and meeting ID both is true that means both are not empty then what you will do here we will first make the meeting container show okay so here we'll make this meeting container show it is it's an ID so please hash here and then we'll create a external Javascript file to JS folder so right click right button of the mouse and here click on new file and write app.js so here we will declare a function variable my app equal to function so here what we'll do will return function object is underscore init columns so this init object will hold a function and the pass here the parameter is user ID and meeting ID then we'll call our unit function using uid and meeting ID okay so you have not created this unit function yet so here we declare function variable my app and we return this underscore unit function object and this function object run a function init where we pass user ID and meeting ID as parameter okay so with the time we also can create the function here function name unit and here we pass the parameter user ID and meeting ID okay so this init function we'll call in this underscreen it function and this underscore init function return and recall my app function variable okay so I hope you got it we start our application JavaScript code from here so here we got the my app function variable go to the index.html and here we'll call my app dot underscore in it and we'll pass the user ID and meeting ID from here so what exactly we have done here we have got meeting ID and user ID from page okay this is something like this okay here fixed the typo it will be prompt uh fix this typer here let us search save it now go to the browser click on new emitting here you can see we have moved to our index page with unique meeting ID and here is prompt to put user ID so right here Hobby press OK and here you can see we have successfully landed to our home page we have successful accessing our home page but if we refresh again and keep it blank and then click ok then you can see user editor meeting ID missing then whenever you click OK it will direct us to action.html page or what you can do enter a meeting code and then click on join here also we have move to a meeting ID exact meeting I do have put in the input field and we move to the index page with this meeting ID and the prompt here to put user ID put your user ID or name and then click OK we can access the home page okay so here this is exactly what we have done here we got the user ID and meeting ID and if it if any one of this is empty the code will redirect us to the action.html page if both are true that means the meeting ID and user ID is not any one of his if it's not empty then we will pass this user ID and meeting ID to the my app function and we run in init underscore init function is instantly with the user ID and meeting ID parameter okay so here we have not done yet so here what we have not done is that we have are not link this up.js to our index.html file so here we will add this script and use Source property here we will write public slash assets slash chess slash and this app.js fine so here what you can do we alert a text from app .js Let's test it we need to go to the action.html page and click on name meeting give a user ID press ok let's inspect it my app is not defined so let's take a look on here so here it will be my app a capital letter like this you need to wrap all the function in the parenthesis and we need to invoke the function immediately use that's why you use this parenthesis here it is called immediate invoked function the function will be called or will be run on the page app.js to be loaded in our browser then this function will be run and this underscore unit function will be returned under this my f function variable okay and then we can access this underscore init function using this my app variable function in this index.html by writing something like this my app dot underscore unit and we pass parameter this parameter will go to my app to in underscore unit function my app to underscreen it function to this init function here it is okay so let's check it to the browser go to the action.html page click on new meeting place the user ID or name press OK and here you can see from app.js fine click ok so you have successfully linked app.js space to our index.html and we successfully pass user identity meeting at information to our app.js file okay so in the open class we will utilize socket.io to build a signaling server to connect users multiple users in a single room okay so in upcoming class we'll do it just the best tab in the next last what we will do we will work with init function okay so we'll do it in the next hello everyone in this class we're going to set up our basic server to our server.js file so let's move to our server.js file and here first what we'll do we'll first load our Express Library so as you know at the beginning of the setup environments class lecture we have installed this Express and socket IO dependencies to our node package now we are going to use this express.js to build a basic server okay so first we'll load the express library to a variable constant Express equal to recurve and call this Express Library here so we have load to the express next we'll use node.jscore path module so a story in this path variable and constant part equal to it will be required all okay then we'll load the express function to a variable app equal to Express okay so this Express implicitly create a basic server behind the scene now what we'll do we'll run the server to 3000 port so you'll write it app Dot listen and 2000 port and we will store this server in a variable call server okay now we get the server and the server is running on 3000 Port next what we'll do we will use this server to set a parameter for our socket.io so declare a variable constant IU so basically we declare variable for socket IO is IO equal to recure and here it will be socket dot IO so this socket.io Library return a function and we'll set server This Server variable as the parameter of this socket IO function okay now socket.iu linked with our Server Express server okay now we need to Define our static directory name where all the assertion file will be loaded so here we will use the app dot use function and we'll use Express dot static method and here release spot dot join method to set directory name as this empty string okay so this exactly uh point out to our root folder that means we set a static directory to the root folder okay so now whenever we run this server.js file then a basic server will be created in the express library and whenever we run the server the server will run in 2000 port and on client demand This Server will serve the HTML files here all these files so let's check our server so here we'll use another function parameter and we will run the function here we'll console the info so right here listening on Port 3000 okay now create a new terminal that means we will open our project to a new CMD so from terminal menu create new terminal and here you'll see a terminal open in our Google meet root folder so here we'll write npm start because we have seen that we have already specified a script start node server to our package.json file and here what what it will done whenever we write npm started it will start this server.js file here we have specified This Server we now need to specify this dot JS file because note only run the dot just file now here write npm start press enter and you can see here listening on Port 3000 okay so our server is running absolutely fine so whenever we run our Express server then we can load this HTML file using our Express server so let's so let's go to the browser and test server okay so here now you can see the the active Port is 5500 let's close it so here's the port 5000 just click on it server is Now offline fine now 5504 Port will not work okay so you can see here now what we'll do here we'll use three thousand Port you can see here this is localhost IP you can write also like this localhost colon 3000 slash login dot HTML page not login it's it will be action dot HTML page okay so you can see that now this section.html page is serving from the server okay so whenever we load any page using this 3000 port in under localhost then this Express server first this Express server will search for the static directory that we have set in here the main root directory is our static directory Okay then if this action.html file in this static directory that means in this project root directory then it will run the file others otherwise it will not so here's the index.html if suppose here we set public as an project root directory then again run this port here npms start press enter okay now server is running on 3004. fine but now if we want to load action.html file let's let's see what we'll get that cannot not get action.html because this is why because we have set aesthetic directory name to public folder this public folder it is here is the public folder okay but we can see that there's no action.html file in this public folder that's why it is showing cannot get action.html file okay but if we create a new file to the public folder right action.html and set here HTML column Vibe and bodytech in each right I'm from public folder save it now you can run it you can see I am from Project folder this is why this is because now the action.html file that we are asking to our server to load it is now loading from public folder because we have set here our root aesthetic directory name here we have set the public folder that's right now this login.html page is loading from public folder okay so why I'm telling you this because if you don't understand it you will not understand how exactly socket are you connect with the client side it is very very important to understand how exactly socket.iu connects to client-side with server site okay you need to understand it first okay so here we just remove this slash public directory now we have set our root directory as a Express aesthetic directory name okay now save it and go to the browser now if we load reload the section red HTML file you can see oops we need to rerun the server server npm start 3000 now if we reload it you can see action.html is now loading from our root folder root Google underscore meet folder so just delete this action.html from public folder okay here we have load our socket.iu with server to a variable IO now check socket are you in server site so here write IO dot on method this on method for socket dot IU Library okay and here we will use connection event and we'll pass a parameter here so it's an arrow function so here what we'll do we'll console L log socket right socket Ides socket ID socket dot ID we know so here in every connection of socket I will generate a unique socket ID you cannot access this ID for a visual user by using this socket dot ID so let's rerun the server see what is going to be happened so write npm start press enter you can see listening on Port 3000 but it is not going to show that socket ID is this that means there is no connection still happened in here but if we going to run our index.html page index.html with a meeting ID 7 8 press enter now there it should show this socket ID is uh a unique secretary but it is not showing why you can see here we have now loaded index.html file from Express server which is still not showing this console this Tech socket ID is cost our user just loaded the index.html file but not connected from client side to server side using socket IO I hope you got it so let's go to the index.html and add here an script from socket IO so right here script and such shoes https colon CD NGS dot cloud flare.com slash socket dot IO here we are going to use the version 2.0.4 slash socket dot io.js okay foreign [Music] now so far we have loaded chocolate.io.js to our client site now it is time to run io.connect function in order to load this socket.io.js client-side function to our index.html page okay so in order to load socket.iu.js successfully to our client site application let us go to the app.js file okay so here the app.js and remove this alert line here so here we'll declare a function event process or signaling server so we'll call it function here that you have not created yet so here run function this even process or signaling server and here what you will do will store our io.connect function to this socket variable but uh you can see that this socket is in this function area but we need to set this socket variable to Global area in order to access all the place of this my app function okay so here we'll declare the variable in global area variable socket equal to null set here now you can Access socket in all the place of my function so here we have just load that io.connect and now here we can write socket dot on connect then client connected with socket dot IO then run this function foreign primarily you will alert a text socket connected to your client site okay then in the server.js file we have already written code for socket connection okay so now what will happen if we load index.html on 3000 Port understand it carefully when we load index.html under this 3000 Port then this index.html file will be loaded from this root folder index.html using this Express server okay and suddenly Express server will inform to socket.iu here we have added socket server to soccernet.iu that you have a new connection that means any user just have loaded a new file from your application then socket.iu fire this connection event on on method okay in the meantime socket.io from index.html will also load this socket.i.js from this CDN link and run through this app dot JS this function event process for signaling server and then socket.iu will run the site.connect function and when saga.io run this io.connect then from the client set socket to IU will interconnect it with socket.io Library so now socket.io library from server site connected with the server.iu.js file in client site okay here find both connection is successful then in the client side it will alert this this text because here we use connect event on socket or client-side that's why it will show this Alert in client site on the other hand in server.js file this text will show in our terminal because we have used here console.log and that is all happening because this connection event fired because there's a new connection for soccer.io so both from server side and client-side will inform in both sides this site inform the admin panel that you have a new socket connection and this code will inform client that your socket connection has established successfully okay so let's check it out so here we'll just see here we'll load this index.html file from this 3000 Port so just press enter input user ID press OK nothing happens so reload it there's there might be an issue so this is calling battery because there must be a right typo let's check it out so this is very common issue so let's copy this complete error line so search Google for this error so you can see here troubleshooting connection issue so socket dial is the reliable source to solve the issue so here from here console panel just click on it go to the network tab you can see just click on this link here you can see the message unsupported protocol version just copy it and here press Ctrl F to Source it and you can see here on supported protocol version message five so they are saying the protocol version is not supported supported by the server support for socket IO version 2 clients must be explicitly enabled with the allow aio3 option AIU option okay here you can see that for socket dial version 2 client marks we explicitly enabled this so we'll copy this Allo ai03 uh code from here you can see that false by default so just copy it and go to the editor and for another parameter paste in here okay now save it and rerun the server npm start press enter now you can see it's listening on Port 3000 also the socket ID this this unique socket ID generated from this server.js here it is this is Socket ID and this is their Unix socket ID and you can see that this connection event has already fired because now our server get connected with the index.html client page so now go to the integral HTML paste it should fire this alert okay because now client also connected with the server site socket IO Library now go to the Google meet you can see it already fired the socket connected to client-side uh so now you can refresh it and press and start the username press ok ok fine now it is saying socket connected to client side which you have set in our app.js here okay now we have successfully set up our soccer.iu with server and client site okay so in the next class we'll write code to register individual user and to write code to inform other user about a new connection okay so we'll do it in the next foreign [Music] class we have learned how to connect user to socket IO using Express server okay now in this class we are going to store user information in order to inform other user in a room to complete connection with them and and organize codes in order to perfect system of a group calling system okay so let's go to the editor first go to the index.html and share in the app.js so here first we will check remove it here plus to check if socket dot connected if the circuit States is connected then only then we will check if user underscore ID so here we have not got user ID yet so here is the uid where we got we send user ID form index.html here it is user ID that we have got uh from here only a load index.pins then we place user ID here the user ID and this is the meeting ID okay so first what we did here we got the user ID and meeting ID and we send to the my function variable in under this underscore you need function okay so go to the app.js and here we got the underscore init function with this user ID and meeting ID here it is we user ID and meeting ID and we return it under this my app function variable so here's the my function variable we successfully sent user ID meeting ID from index.html to my function okay so now here is user ID and meeting ID and we pass in this init function also this user identity ID and here is the init you can see here now what we will do we will store in this user underscore ID variable uid okay so we have not created this user ID we will create it in a global area so here is the global area to access this user ID all the place in this my app function so here write user ID is underscore ID okay just to close this variable and here variable meeting under Scruff ID okay so here meeting ID hold the value of meeting id M ID okay now this user ID and meeting ID have changed in this init function and this user editing and meeting ID variable in here have just changed its value according to this user ID and meeting ID okay now we can access this user ID and meeting ID in here but uh forget to set MTB Loop here okay so here now it is empty okay so have you got it now if user underscore ID is not equal to empty and meeting ID also is not equal to empty then we will send to the server using socket dot emit emit that means send there's a sent method for web socket okay so socket dot image so here you will use user connect method okay and we're going to send two data first one is display name is the user underscore ID and the other one property will send this meeting ID with this meeting ID okay these are the user ID and meeting ID this user ID and material is not empty it carries the value of uid and meeting ID and then we send this user ID and meeting ID using this user connect event to our client site index.html 2 or server.js now we can access this display name and meeting ID in this server.js okay so how you will get the information that's sent from the client side so here we'll use socket on method and here's the event is user connect same event like this okay or you can say copy and paste in here and then will pass the parameter data now we can console log the user display name and meeting ID so right here user connect and uh data is data dot display name and data Dot meeting and describe it I hope it is yes medium discover ID and display name okay fine so here as you know that we have sent this to data property with property below and then we have got these two data in this data parameter argument okay and then we extract this data by using this data dot display name and data.mitting ID and control them to check exact proper information have sent to the server site okay fine now we have got the data next what will do so here first we will store all the connection information in a variable like uh the variable is user connections and we have not declared this user connections very affiliate so take this uh copy this user connection variable and just write a book here and declare this variable and remember it's an array variable is hold information in Array okay so here what we'll do as you know to pass data to an array variable we use push method JavaScript push methods so here we'll push what will push will push first connection ID connection ID is the individual socket ID okay then we send user address for ID what is we sent from the uh client site this is data.d display name copy it and paste in here and then third one is meeting ID making underscore ID is this is the same we have sent from the client sites so paste in here also that's it now this is the user connections that holds other connections and also my connections and it will be stored in This Server okay now we'll create another variable the variable name is other underscore users so this variable holds the information for other users so how can we push others user information in this other users array variable so you can do this by using filter methods we got all the information from this user connection array variable that holds all the users data for an individual room so here is filter method and we will check every single data for a single user and we pass here a parameter p or an added function we will check for the match meeting underscore ID is equal to data Dot meeting underscore ID so it will be better if we change it to underscore ID to unlimiting ID yeah otherwise it can create issue so that's right removing this underscore from meeting ID here also so this is the meeting I do you have sent from the client set so you also need to change it here because this is the meeting ID that you have got in here okay another name meeting ID meeting ID and here's the meeting ID so in this meeting underscore ID is in the user connection array variable okay so here we have filter my meeting ID by with the meeting ID that is currently now in user connection array variable so you have just filtered out my meeting ID from all the users information and store in a variable called other users okay so now we have got all user information in user connection edit variable and other in other user information in this other users are available have you got it if you have any question feel free to send a keyword panel so you must put these other user's array variable before this user connection that push method okay because when you first enter in a meeting you see first I wrote other user variable which takes information from user connection variable but in this case I mean when you join in a meeting for you user connections variable is empty that's why other user variable will not able to store your information then you name Australian user connections variable from the next time all other users will be stored in other users variable and also user connections variable IP got it next we let other users know about me that I have just logged in in a room in a video conference room so how we'll do we'll first get this other users variable then we use for each Loop okay so here we'll pass the parameter V then we'll send to the room and we let other user from this room that you have a new user or new member in this room okay so how we'll do it we'll use socket dot two so two method is basically used to send information to a specific ID so here is their ID is our V Dot connection ID okay here it is and we will use also emit to send other user and here we will write an event as you want inform other s about me okay so we let others about me others video ROM interface will change with my video also when we pass the information to them so here what will tend will send them first one is Southern underscore user underscore ID and IDs data dot display name and then connection ID you can say con under con ID is Socket dot ID so why I have written this other user ID instead of my user id because for them you might send this in for my information uh for them my IDs for them is other user ID okay that's why we have written here other user already so now we have sent other information about me now the information have sent to the all of the users so how you know that the information have sent to all you all other user you can see the other users array variable hold only the information of other users okay so here we have sorted out all the other users connection ID so and we are also sending this information to this other IDs okay now go to the app.js that means in our index.html client site and then here what we'll do now I am the others users now in others users application as you know that this application will be used by all other users so they also have a copy of this exact application and how to write code in order to get my send information to them so here we will write socket.org so they will get my sent information by using this inform this event by using this event that that same event I have used to send information my information to them okay so in form others about me so this is exactly same when other user join in a particular room I will be informed by using inform others about me so I'm just talking here right about me because it will be easy to understand if I say about my perspective that I'm just joined in a room and I send others other to my information that I have just joined in the room and I will get the information using this event and they also get the data okay so they can access data using this function data parameter and they can use this data wherever they want and whatever they want to do so what I'll do here I'll write a code for them the way they will get that data and they can create a new user's interface to put their web conferencing meeting that way they will see me they will communicate with me so here we'll create a new function add user okay and here we'll pass the information data so the information is this other user ID and connection ID data other underscore user underscore ID and the data that connection ID okay so the function we have not created yet in the next class we'll write code in this add user function to add a new user in their video interface okay so we'll do to the next foreign [Music] now in this class we are going to create a red user function to add new user in other users interface okay so here create the function user okay so here you'll pass to information first one is other underscore us underscore ID and the second one is connection ID list two okay now here what we'll do first we'll create a clone of our other template dividing so here is the other template ID divid Ed so we first will clone this clone this D varia complete and then for every single user we will clone this and we'll create new video interface for user okay so here first we will declare a variable new div ID equal to this copy this one other template ID and then paste in here so first what we'll do we'll first clone the ID it will clone complete this full area okay and here first what we'll do we'll add a class and set attribute ID as connection ID okay so right here new div ID is equal to new diff ID Dot attribute so now we're going to set attribute to this new divid and also it is stored in this variable new divided that means new divided will be updated every time we add new attribute or new HTML code to this new div ID variable okay so here we'll set at an attribute ID and I develop will be this connection ID okay like this here is the ID and this is the ID value okay then we will set a class here at class adarsh okay next here and copy it and here we'll find the h2 tag to set name or text exactly so it will be in double inverted or inverted so here it will be text and the text is other user ID okay so here in this S2 tech you can see here's the in this S2 tag there will be the name of the user that means user ID that you have got from the prompt you have seen it earlier okay now we'll find this video and audio tech to add Video Connection ID and then audio connection ID okay individual connection ID we we will need it later so here right now it will do we'll just duplicate it and here write video and we'll exactly add attribute and attribute is idea attribute and the ID value is video underscore V for video video underscore ID is Will concatenate the uh I connection ID this connection ID so this is something like this video and there an ID tribute will be created for this line okay so and the ID value will be something like this V underscore something like this this is the connection ID and connection ID will be stored in this video tag with this V underscore plus this connection ID okay I will got it next we'll do this same for audio duplicate it and here it will be or do you an ID is it will be a a underscore connection ID so this is why this is letter we need to identify every single video and audio tag for every single user okay next what we'll do you can see here we have make this other template is display none you didn't show it but now we need to show it so here copied and paste in here just use JavaScript show method and this other template divid will be shown because here when we clone this other template it will be cloned exactly like this okay but here is display is none that's why you need to use this divided show it will show the created new created other template okay now what we'll do every single time this will repeat it until the last one will be created okay here is the every time this inform other about me will be run since it ends iteration of this other users array variable you see here we use for each Loop that means for every single user it will send information to the client site and client site will create a new user to other users room okay so that's why we need to add or append this template to others users interface or room okay so where we will append this you can see in here this other template is in the this other template as a child template or divid under this user's ID okay so just push it little bit forward so here you can see all the this other template is in the diffuser City so what we'll do now here for every single users this add user function will run and create a new other template now what we'll do we will add every single new deep to this div users ID here we'll use append function new div ID okay we need to put this in a inverted okay now for every single user this will be repeated and will be append to these div users ID that means it will be something like this for every single user like this it will be append that append that you can see here 's this this all are will that's all are added to the div users ID by using this at user function I hope you got it now go to the editor here we will copy it or will run localhost clone 3000 slash action.html and we'll put this meeting ID in this import field and click on join join user with a new name right here for him press OK and you can see this is the same meeting ID okay so now when I am as if entered in this room then other user that means this hobby should let know about the fahim's join okay but there is no users around the template showing right now in this room it is not showing here because what's the reasons can you tell me what's the reasons why fahim's deep users is not showing in here this is because we have not set and we particip connection with Fahim and Habib yet okay we have not created any connection yet that means we are just sending information to an user to other user just using socket.io but not yet create any web artistic connection and that's why we are not going to show any video and audio to the other users so that's why what we need to do how you build a new connection to using webrtc to our application okay so this is what I'm going to do right now so just right after this add users we'll run another function we'll run another function function name is set new connection okay and here we'll pass the connection ID in data dot connection ID okay so why this is function this function is for our webrtc technology to use web particular technology to build a connection with other users to send video and audio data data without need of a server just using browser to browser so that's why you have created this function but this function we are not going to write in this my app function because if we create this set new function like this add user function in this my app where my function it will create some complexity that will be difficult to understand that's why what we'll do in here my app function will just write code which will directly bind with the server and all other process app process information we will write to an another function like this my app function okay in order to process related code that will not directly bind with server.js so that's why here we'll create another function like this and duplicate it and here we will call it app process okay so basically these types of helping function we will process in this app process function and then we will get the result from this approcess to use in this my app function and that will be easier to combine data with server.js and so here how can we get the set new connection function from this app process function so you can access it by simply right here my sorry app process set new connection okay so we have not created this set new connection function yet in our app process function variable so here declare this function set new connection okay now we can access this set new connection through this app process just by writing like this a process dot set new connection and we pass this data variable data parameter here so we'll get this data from here to there by using connection ID so can you check it and test it out is it exactly working or not I have explained you at the beginning of the writing our function how exactly we can make it actionable from this app process just by declaring this function in the app process and just call something like this process.set new connection is it possible no this is not possible I have told you at the beginning of the course when you declare a function variable then in order to access this function you must return this function in an another function property okay so this is what exactly need in this app process so here what we will need to do we need to return set new connection function property and it will be in a sync function a single fashion we use for using await keywords okay and here we'll pass the connection ID the connection ID is exactly this this data dot connection ID that you have sent from the server.js file okay so this connection ID now here we will declare this Avid keywords and now we will declare function the function name is set connection and pass also this connection ID to here okay and that's set connection will call in here okay now now here we can access this set connection function using this new set connection function property that is returning using this written keyword in approcess so here how exactly you can get it so I hope you know how exactly we can access a function from an action variable and this is simple as that just by returning the function in an function property okay have you got it next here what we'll do first we'll declare a variable connection so this connection variable will hold the participate connection objects your declare new RTC appear connection and the parameter must hold the ice configuration okay so we need to First create the IC configuration here it's a declare variable ice configuration equal to now here write IC servers and we'll Define here stand server urls and this is from Google so write URLs go on Stan server stun Dot dot google.com slash 19302 so this is the one stun server we'll use two Stone server okay so just duplicate it here write the stand one what this Aston IC server will give this Aston IC server will provide users information from computer and this information stored in this ICA configuration variable and all the users information that means user information like Network IP address computers internal users information will be stored in this IC configuration variable on all this user's information will be will be accessed by this rtcpr connection object and all this works under the hood okay fine so far we have created the ICA configuration with IC servers and we set IC configuration parameter to RTC back connection object and a story in a connection variable now this connection variable has many property of webrtc connection like on IC candidate on IC candidate error only you shouldn't needed basically is used for set offer so in the next class we will do it step by step for creating a successful webrtc connection okay so we'll do it in the next [Music] hello everyone now here what we'll do first first we will send offers to the other users to make a connection okay to make a webrtc connection so this is we'll send by using this connection dot on negotiation needed method okay so when on negotiation needed we send offer okay so in order to Center first what it will do you declare it's an async function okay and first here there's only one thing you need to do is to declare a is to declare a function I read set offer and pass this connection ID in here we need to close it in here okay so we have declared a set of our function under this connection on negotiation needed then what we'll do next after sending offer what will do you will send also IC candidate so here write connection dot on Ice candidate higher we'll use the function and we will not create a another function like we create first set offer so here we'll write it in this function so if event dot candidate is true then we'll use a function server process to send candidate information to other users so here you'll use Json dot stringify method to stringify the IC candidate so here write property name I see candidate and the value is event dot candidate okay and then we'll use another information to send is connection ID Okay so you can see here these two parameter we have written here and we pass into this server process function okay so what we have around this server process function here because this is the app process function we can't send or process server related code here all the servery deleted direct code will process in this my f function so what you need to do we need to get this IC candidate or create of our data from this approcess function to this my app function we need to get this data and we can get it by using functions so here's server process is the function so how can we send it here Let's uh create the process so in here we'll create a f function function call init okay we can call it underscore unit we will get the sdp function as DP underscore function okay and my connection ID from exactly we get these two parameters we will get it this information from my app okay that we have not created yet so first what we will do we will here create an function property in it and set here as sync function and we pass here as DP underscore function and my underscore connection ID and then we'll call this underscore init function with a weight keyword and here we'll also pass this sdb function on microscore connection ID okay now we will send this sdb function on my connection ID now basically we will get this sdb function and my connection ID from this my app so first you need to get this sdb function and my connection ID in this my app so go to the my app and Hinds socket connected in here basically when a user connected to socket then we initialize the init function here from approcess dot init and we'll pass the sdp underscore function and we also set my connection ID as socket dot ID okay so here is exactly we got access of this of this init function property from my approcess to the my app function by using this approcess dot init and then we send sdb function and socket ID so here one question is Raising in your mind that we have got socket ID from socket that's fine but where is the sdb function we have not created this as div function yes exactly your right so this is what now I'm going to create then you will understand what is the necessity of sdb function why sdb function is used for so here declare this function variable as as DP underscore function equal to function and it will send two argument here first one is data and then to connection ID okay so here what we will use we'll use socket dot emit or send function to send data to server and here we'll use sdp process custom event to send data so what we'll send to other user will send message as data and two connection ID tuners connection ID has two connection ID I hope you got it say here this is the sdb function this sdb function is used to process sdb that means when we need to send IC candidate and offer or local description to other users then we need we need to send using the server.js to other user and how exactly we can send information from client-side to server side we can use it is simply socket.mit method and we are sending exactly same data data as misses and connection ID S2 connection ID using this sdb process event to our server in order to get this data information to others users okay so here's the sdb function we send this complete sdb function by packaging into this sdb function into this init parameter name is sdp function hope you got it so on a call approcess Dot init we pass this two sdb process and socket.id data and this will exactly go to here as the functional connection ID and we know that that we run a function under this function and so the function is underscore unit this also holds the same parameter data as DP function and my connection ID so this sdb connection and my connection ID will store in this underscore init function in here okay so here's the SD function and my connection ID this is so here this sdb function is coming from here here to here to hear from here okay so this is the exact sdb function okay so have you got it what is the exactly sdb function okay now how exactly we can connect with this sdb function to This Server process function this is not the same right so this is exactly what we are going to do here so here first we will declare we declare a variable cyber processing and we store this sdb function through this server process variable but this server process variable is z is not in global place so we need to First declare 18 a global space declare this server process now we can access This Server process variable from anywhere in the approcess function okay and then we declare here another variable my underscore connection underscore ID is equal to my connection ID happy got it now we got the server process function from sdp function and this cyber process function will be running here and simply we put only the parameter as data information in here and here there this two data parameter is exactly this you data okay message and connection ID this will be go to the server.js on the event of SGP process have you got it so first first of all we'll send offer our local description using this sdb process function we will do it in this uh set of our function and then we will send ICA candidate to all other users to make connection with others information in a particular room okay so we have done our nice candidate first we have done set offer and then on IC candidate uh next we will work with track so connection dot on track okay equal to function pass the event as parameter and we'll write code in here and there's the available track on connection okay so we'll do it in upcoming classes so here we have completed the ice candidate uh send process there's a one taxes left is to complete this set of our function so copy it and just write out of this set connection function we will create the function set offer okay we have send connection ID in this set of our function copied and paste in here okay so in order to work in set offer we need we exactly need peer connections and peer connection ID that is exactly what we don't have right now because we need to set connection ID and peer connection array variable in set connection function okay so here we need to do the talks so just right after this connection dot on truck function we'll declare variable fears underscore connection underscore IDs and here we'll pass the connection ID the connection ID is this this is the connection ID okay and here we'll set the connection ID so I hope you got it so here are exactly what is I'm doing we have set the connection ID to peer connection IDs array variable okay and it will be stored as an array but we have not created this PS connection ID set available yet so just copy it and go to the top just right here declare this variable and it's an error variable okay so I hope you got it uh this is the peer connection ID the ideal best store in this area connection ID will be best stored in this array next what we will do we will store peer connection appears connection it's also an error variable with the name of connection ID and what we will store we'll store exactly the connection what we have got from here okay so after completing all this we will store connection ID to PS connection ID set available and also store connection information to this peer connection error variable this too is important and available we needed letters so copy it because you have not created it just paste in here and it's an also an array variable okay now in set of a function first we'll get the fierce Connection in a variable connections or connection equal to peers connection and you'll pass this connection ID we'll get the connection ID from peers connection and store in a connection variable first and then we will create the offer using a read connection dot create offer so I hope you got it so here this connection that means this rtcpr connection has many property create offer is one of them so we have now declared this create offer function on this rtcpr connection object okay this rtcbi connection object we can access uh from this peer connection cost so you can see here connection is in a store connection has a stored in the spear connection error variable that's why we can access this rtcpr connection using this PSP connection connection ID so what has stored in this connection variable and we can literally just access this connection variable to create an offer by using this creator for function okay and then we will store it in a variable offer okay next what you'll do we'll also use this avid keyword and here what we'll do we'll set local description to this connection using our offer created offer okay so right set uh local description description when we pass the offer okay so here we have set local description to our rtcpi connection using created offer okay next what we'll do we'll use the server process function to send data to the other users you can see here two server process to this sdp function to this sdb function to this sdb function to init function property to hear a process dot init sdb function and this sdb function is in here sdb function here the data and we send data using socket document function under this sdb process even to the server.js in order to send data to all other users so have we got it so here's the Cyber process and first parameter we are listing if I just run Dot stringify and here the data will be offer offer and offer is the connection dot local description okay so we are sending offer property with the value of connection dot local description to other users in order to identify my connection or my PC and second parameter will be in here is the connection ID this connection ID we have sent through this set of our function in this set connection form under this send connection function here is the connection ID okay that's it so this is the here's the completion of our set of our function we have successfully send offer and connection ID to other users so in the next class we will process this offer and local description on the view of other users okay that means we will next in the next class we will work as the other users when we got the for our IC candidate that then how we exactly process this offer Nic candidates to build a successful web vertices connection okay so we'll do it in the next [Music] okay guys now if we are going to test this function or code we can test it right now because we have not invoked the function yet so just like this my app will invoke function here and we need to wrap this function in parenthesis okay now I can test it but before test it we will first complete the function say here is the connection dot on track how in we have exchange local description and IC candidate then then you will get track available on connection there you use connection dot on track to get the truck and use it in our connection so first what we will do first you will check if remote underscore video underscore stream so it should be an error variable on this connection ID if removed video stream area variable on the connection ID is not set then we will set New Media stream to this variable remote underscore video underscore stream on the connection ID we will set a new media stream object to this array variable okay but we have not declared this array variable in global space so copy it and go to the top here just duplicate it and paste in here okay remote video stream fine so same for audio just duplicate it and write it here remote audio stream copy and paste in here if remote audio stream is not set on this on the particular connection ID then we will set new video stream to the variable so copy it and also duplicate it and paste in here remote audio stream is equal to empty array okay next we'll check if event this event parameter dot track dot kind so basically you'll get truck in this event parameter so here we will get access of this truck so here you write even.truck.kind is equal to video then we see here that if video track is available on the event then what we will do then on the remote video stream for particular connection ID we will set first to get video track function it will take the video track then this is how you'll write then we'll use for reach on the array to access every single every element and we pass parameter t as the error element and here we will remove track from the video stream so right here remote video stream on particular connection ID we will remove the truck okay so use remove track function here okay we'll remove particular truck from remote video stream if we got any video trucks in this array okay then what we'll do after removing video truck we will add track to the remote video stream so write remote video stream on particular connection ID will set at truck and the track is event dot track will get the video track on the event here and the track from the event we set to the particular remote video stream variable in under a particular connection we add track okay I figured it fine so after adding video track to the connection what you will do we'll first get remote video player so declare remote video player variable we store the ID to this remote video player so I document get element by ID so the ID is V underscore plus concatenate this connection ID so where we get exactly this remote video player this V plus connection ID V underscore plus connection ID you can see here that uh just right here you can see when we add a new user then we set V underscore plus connection ID as ID attribute to a particular video okay that means here here there will be an ID with V underscore connection ID whatever it is okay something's like this I figured it so there is a multiple number of other template for multiple number of user there will be unique socket idea connection ID for a individual user we can identify every single user by following their connection ID and here we we track or follow the video particular users video using their connection ID with v underscore and this is the ID for a particular user okay this is how we identify a particular user so next what we'll do so first here we will make Source object search object of this remote video player is null we first make it null and then we will set the remote video stream for a particular connection ID in this search object so is equal to remote video stream and we add the connection ID from this remote video stream array as a source object for remote video player okay then we'll use JavaScript loot function to load video on this variable okay remote video player dot load so have you got it so this code will be run if video track available on the event and then you will check I'll see if the event dot track dot kind equal to if it is audio then we exactly do the same work but this is now it is for audio so here instead of video we'll use audio you can see here we have already declared this remote audio stream okay here instead of BDU it will be audio track rocks and for it's just fine then here it will be remote audio stream connection ID and then remove truck okay and then what we will do here and instead of video player we create here a variable audio player and instead of B underscore which we know that for video it will be a underscore you can see here the ID is for audio the ID is a underscore connection ID so that's why we are identifying the audio by using this a underscore connection ID okay then you will copy It Best in here and here and also here and it will be audio stream save it now I hope you got it okay and so here at the end of this on track function and at the end of the code we need to return so what we will return we will return connection okay so this on track basically will happen the real are called when there will be available track in the connection but if the connection is not established then how there you will get Odin video track so on the perspective of our site that means suppose we are an user and we are sending offer and local description to other user then they got the local description and IC candidate they returned back to us the IC candidate and local description then after the perfect negotiation then we will get track on the connection okay so so far we have done this process only for the sender perspective we have not written code on the perspective of the receiver site okay for understanding purpose I can actually ask you that when I send this IC candidate and the the local description using server process then how are this data goes and how these data exactly processed do you know about it no you still have not concerned about it because I have not showed you about where exactly this local description is processed so exactly this local description and uh this IC candidate we sent through this server process function So This Server process function exactly what does so you can see the server process function is is exactly this as deep function as the function is as this underscore unit function property um here here you can see also this has DB function this SD function and then this SD function is coming from exactly from here sdb function you can see we get this init function of approcess function variable and set this DB function and here is the app process function variable and we send this sdb function to this underscore unit SD function and there does DB function we use this sdb function and store it in a server process variable and then server we use what I see candidate and this local description to send this data in server okay so here's the sdb function and you can see that function details in here so they are basically two parameter first one is for data and second one is two connection ID okay so here we have sent using socket dot emit method under this hdb process even we have sent the data and connection ID to the server then server will get the data and then send to other user users in a particular meeting ID okay so this part we have not yet written in our project now we are going to written code to get the send sdb process data and how exactly these data sent to other user in order to build a successful webrtc connection okay so now here this sdb process data is going to app.js to support.js now we will catch the data in here now just right after this user connect event we will declare another socket dot on method on the event we have sent from the client site this is the hdb process event and passed in here okay so now we have got the data sent from the client site these two data these two data that means this local description you can see in server process this local description and the connection ID these two data and here for IC candidate this First Data is this I second it in second one is connection ID these two data we will get in server.js in this data parameter okay then here what we will do we will send the message to socket.2 all the data dot to connection ID to underscore connection ID so here you can see that we are sending data to the connection ID this connection ID and we named it here in our main function is to connection ID so here it will be to connection ID we are exactly sending data to to connection ID and we'll use same it for sending so what is the event so here we also use the event same sdp process so this event has set custom set from server.js and will identify in client-side by using socket dot on method like this and this time the event will be sdb process okay so here so on the sdb process event what we will send will send two data first one is message and the message value is data Dot message the message sent from the client site and the next one is the from underscore connection ID and the connection ID is this is exactly socket ID because I am sending the data to other user in order to get connect with me that's why I'm sending my socket ID as from connection ID okay now we have got the data from client side that was sent by using this HD process event the and the and these two data we got in server that JS using this data parameter and I will get access the data simply write data dot the variable name or the data is coming from so this is the data.connection ID this connection ID this connection ID and the data here is the message data Dot message and who's sending this data is is exactly me okay from connection ID now we have send so for these two data for other user now let's think that you are going to write code for other users on the message and connection is sent to them and how they exactly process this data so go to the app.js and just right after this we will use same socket dot on method and here the method will be sdp process and here we'll run a sync function and he will pass the data the data is this to data in this data variable okay and then in this function we will write function name process client function and this function will not locate in this my app function variable it will be located in here that's why here we'll use app process dot process client function and it will send those two data data Dot message and data Dot connection ID okay so here we have not declared this process client function yet in this approcess function variable so just right after read we will declare oops we will declare the function here process client now this process client function has returned in this app process function variable and then that is how we can get access a return function from a function variable by writing just simple approcess Dot this function property name process client okay and here the function will be sdp process this is the function here sdb processes the function name and the two data is first one is data and second one is from underscore connection ID okay so here's the function so in the next class we will create this sdb process function and we'll process all the message from the sender side and we will return the answer to the sender and we will keep sending ICD candidate and all the local description until it builds a successful webrtc connection so we will write this function in next class okay so we'll do it in the next [Music] hello everyone in this class we are going to create our sdp process function in approcess function variable so copy this function name and just right here integral function and the function name is sdb process so here we will pass the message and from connection ID okay then what we'll do so here you can see that we have sent sdb process data since the data this message data carries multiples amount of elements in a single area then there will be multiple number of area elements and properties that's why you need to purse the message information in here right message first delete this variable message and then store in this message variable the message from here and here first what we will do we will parse the data using Json first function okay now here first we'll check if message Dot offer that means if the data is in offer you can see in here when you send data using sdb process event you can see in here that the first one is exactly over okay so if the message this message hold this offer property then you can identifies this property using this message dot offer okay and we send this data by using just on a stringify that is why we have used here Json dot purse method on this message and if the message is offered that means this offer then we'll run this code block here and alsif so is this always better to first check if it is answered or not okay if it is answered then without further Ado anything else we will run the code Block in this area and then if it is not answer type the message type is not answer then we'll check here essays dot offer okay when we send offer then other user will get this offer and in their application I mean in their site we will write first if underscore peers connection on the particular from connection ID is not true that means if from connection ID is not found in this Pierce correction variable error variable then what we'll do first we'll first add this from connection ID to this peer connection and how we can add this from connection ID to peers connection you can see here using this set connection function higher at the end we have assigned this connection to peers connection on the particular connection ID this is what we are going to do in here so we'll write we'll use a weight keyword then right here set connection and we'll pause the parameter is this from connection ID since we have used a weight keyword in here we need to use a sync in before this function okay next on the connection ID is in the peer connections then we will create an answers a declarable answer is equal to a weight appear peer connections for this particular connection ID this connection are basically exactly the connection that we have sent to other users now we are working for other users I hope you got it so then we will create an answer to the connection ID that's sent to us that means other users and now you're going to send an answer on behalf of the offer to the sender okay so here we will write create answer function on the spear connection okay so this great answer is a method for this participle connection okay and we have created in here the create answer method now we will set local description this answer as remote user local description so you write a read clears connection right from underscore connection ID dot set local description and we'll set local description this answer okay now the answer we have created here we set the answer as local description for our remote user okay fine next we will send back to the sender who send us offer what we'll send will send the answer okay so same here we will use this server process function same Ctrl C copy it and paste in here so here this time it will be answered okay and here the value of this property is answer okay this answer so this answer is is this answer and this answer is stored as value in this answer property okay this answer will send Using This Server process function to the server and to whom we are going to send this answer to whom exactly we got the offer so just copy this from connection ID and paste in here so what does it mean we are returning back to whom who sent us offer okay right now we are going to send answer to him yeah we got it now in his now in his site this answer will be checked in here is this message is answer type is or not here it is then this answer will be checked in Sanders site and he basically in here is this data is an answer or not if it's an answer then the sender will set this answer as his remote description okay so right here I wait Fierce connection on the from connection ID and we'll set remote description and what will set here we'll set first you will declare new RTC session description RTC session description object and we'll pass this message dot answer in here so basically what we have done here we have set the answer as remote description for the sender okay happy got it so here we have set remote description for sender but one thing we have missed here we have not set any remote description for us so here we'll do it when they send us offer as local description or sdp we will set this offer as our remote description so right here I wait Pierce connection same from underscore connection ID dot set remote description and regular RTC session description of object new or PC session description and it will pass the parameter message dot offer here as to set remote description for other users okay have you got it so I'm explaining it when we send offer to other users using server process function okay to SGP to as do function to this as div function to sdb this sdb function to it will go here and then it will cast this sdb function using this sdb function the those of our data will go to the emit or send to the our server.js file on this sdb process event so here you will cache the data using this sdb process event by using this on method and then we send this sdb process uh to whom we are going to sending data data dot to connection ID that means to other users then other user will get this data using sdb process even so we got here the sdb process data data is this and this data sent to the approcess process client function in the structure of data data.misses and data.form ID okay so here is the uh process client function we have written in here and we send this sdp function and connection ID whatever it is it doesn't matter so we need to change it here otherwise it will create issue so that is data and here it will be from connection ID okay fine next sdb process function will run then we will parse the message to check either the message care is the answer sdp or offer sdp okay if it is over sdp then it will check if the connection is in the peer connection variable or not if not then it will rerun the set connection function and store the connection ID to PS connection variable array variable here it is it will store under this set connection function okay then we set message dot offer as remote description using this RTC session description object to the peer connection for particular connection ID okay then you will create answer on behalf of this offer and we'll set the answer for other users local description okay then send this answer to me basically because I have sent the offer to them they got this offer now they are returning back me the answer and now I have got the answer in here and suddenly I have set this answer as my remote description using this artistic version description object to my peer connections array variable for particular my connection ID okay hope you got it so you need a little bit more time to understand it I am suggesting you to repeat watching the lectures after watching few times I I'm sure that you are going to understand how exactly this process how excited this process works okay so there is an issue you can see here under the weight there's a three dot that means it has no effect on the type of this expression so go to the set connection function here it is I have just press Ctrl and click on this set function and return to the function so we need to use here async otherwise this save it keyword will not work okay now this three dot has removed you can see here okay now we also need to do this for init function okay right here a sync as you know we can't use a weight unless we Define a sync before this function fine so far we have done for offer and answers there's a third process need to be done is for IC candidate so first sending offer and then getting answer as replay from other users now it is time to exchange IC candidate okay just right after this elsif we'll use here also else if If the message Dot IC candidate is two true so check whether it is where the message is IC candidate or not if it is ICA candidate then we will first check if like offer if previous connection array variable is true for this connection IDs or not if it is not true then we'll run set connection function again using this away keyword for this from connection ID to set this connection ID in the Sphere Connection array variable then we'll use try catch option to try first a read Fierce connections from connection ID dot add ice candidate candidate I will pass the message.ic candidate uh IC candidate data okay basically here we are going to set IC candidate to the ad IC candidate method for peer connection that means this rdcpr connection object we are going to set IC candidate okay so it returns true that means okay then it's fine else please catch block our required will pass e as parameter and we'll console the E4 error okay it will return error fine so so far we have send offer to other users other user got the offer using this sdb process function and send back the answer to me or us then we got the answer okay we set the answer as remote description after sending offer and receive answer the steps the final step will be started this exchanging ice candidate so our basically IC candidate keep exchanging for multiple times when both sides get a stability then they will set IC candidate for both browser and the connection will be established okay so so far we have developed our application higher we have successfully written code to build a successful connection okay so this is not the end there's a lot of work we still need to be done and that is what we are going to do in our upcoming classes okay so in the next classes we will write code for part where I will be informed about others joining in my room in my video conference syndrome here you can see we have run the code for all only the users who are going to inform about me that I have just joined in the room but I also need to inform about others someone else who just joined in their room and need to show in my video conferencing page the video and audio of the new joint other user okay I also need to update my web conferencing page that is why I need to create another process like this to show other user information in my page okay so this is what we are going to create in our next class okay so we'll do it in the next foreign [Music] in this class we are going to right code to inform me about other users okay so we'll go to the server.js and in this user connect code area just try it after this other users that for each Loop here we'll emit another data so right here socket Dot emit so you'll emit on the name of the custom event is in from me about other user okay so this is the custom event we have created to identify other users to inform me so here we will send data to me about other users is the other user other users array variable these other users okay here's the release here's the other users so here find any new user that means other users just entered in our meeting then I will be informed about the users using this method inform me about other users and the data we are passing here is this other users okay now this event fired from server.js and we can access this event in the client site by using socket dot on method so here you will we have just duplicate it and here we passed the event inform me about other users everything is fine and here the data will be other underscore users okay so here we will run this at user for every single other users okay so that's why we need to Loop through these other users array variable so here copied press check if other users is true then we'll run it so here we'll use for Loop so let's variable I is equal to zero then we'll iterate the other users data variable okay until its last user so you're going to get the number of the user in other users array by using this length property other users dot length and here we will iterate or a single time we have iterate every single users by writing this I plus plus okay so here for every single user we will declare add user function where we'll pass first user ID so it will be other users eyesight dot user underscore ID I hope you got it then we'll send also other users what connection ID so let's check it how exactly this connection at in server.js so here's the connection ID copy it and paste in here it's fine so you have run add user for every single user to see update users in my room okay save it so next we'll run this approcess dot setting a connection to set connection with these users so cut it and remove it just right after this add user we'll also run approcess set new connection every time for every single other user so here we will pass other underscore users for every single user we set I for index and then pass the connection ID I hope you got it so that's it this will let me know about other users in my page and will add new user to my video interface Accord according to the information about new user have joined in our meeting okay so I hope you got it so this is the basic part of our creating connection and showing users to our interface but there is a lot of things still need to be done basically for even event process and all other update about on the new user adding or leaving we need to update our video and video track and there we also create functionality to close the connection and a bunch of features will be added in our application so in our upcoming classes step by step we will keep adding new features to our application like file sharing messaging Etc in the next class what we'll do you can see here here we have connected to the remote user that means other users we have set connection and displaying their info in our interface using add users function but still we have not done a basic things I think is this to load camera audio and video to our local interface okay so this is what I'm going to do in next we will see how to load our local video that means our video in our interface this is important okay so we'll see in the next class how to do this exactly okay so we'll do it in the next foreign [Music] guys so in this class we are going to load audio and video for our local user so in order to load Orient video for local user we go to the app.js and in the app process function variable here in the underscore init async function we will write first and a function name event process so we have not declared it we have just called here this event process will handle event for our application this event basically for audio and video then we will store local div player in a div called local underscore div variable and we'll get the local video player by using this document.getelement by ID so here is the local video player higher our video will be loaded in this video tag now go to the app.js and paste it local video player but we can't use this local div variable till we declare the variable in global space so here declare the variable local div fine next we are going to declut the function even process so first here we will work with audio so here you can see the audio is this audio mute unmute relate with this mic of Icon so go to the index.tml and here you can see my cuff this apparent default the ID Mike mute and mute ID so copied go to the app.js so first select the ID or get the ID oops copy it and paste in here then on on click we'll run an async function is first we will try to find the audio is audio is true then we'll run the function a read load audio okay and if it doesn't load that means if the audio can't be loaded then we'll show them an alert that audio permission has not granted okay basically it happens when permission doesn't granted by user in browser okay and then we'll return it fine letter will create this load audio function so here we have not set this audio variable yet so let's set this audio variable in global space so here declare variable overview okay now you can access in whole place of this approcess function variable this audio variable fine and here you will also declare a variable is audio mute is equal to true okay so basically here first the audio will be mute when it is first loaded in the browser so that's where you set it is audio mute true now here we'll check just right after this code block if a system statement here we'll check if is audio mute is true or not if it is true then we will make this true video dot enable is equal to True since we are clicking on the mic mute and mute button so we need to uh you can see here we need to unmute it when we click on this mute that means mic off icon and when we click on unmute button or the audio should be mute so here we are going to do this exactly is audio mute is true but then we will make audio enabled is equal to True okay next we will change the icon in this div ID so here the icon is the this dot HTML will change complete icon code span sorry I can see that complete icon code for material icon so we'll change it here convert it into single inverted then it will not show any issue and here it will be on the mic okay and then we'll run a function to update this audio in our truck so here we will use update media senders function and we'll send this audio and regular another variable RTP underscore audio underscore senders and we'll send it to this function and we will create it later now we are going to declare this RDP audio Center's variable in Globe in global space and it's an array variable okay it holds information about RTP audio senders fine so if this audio mute is true then we make audio unmute that means we make audio listenable by writing this audio dot enable this is called true else if the audio is unmuted then what we will do we'll use this else code block here we'll make just opposite of the code you have written in here audio dot enabled is equal to false it will mute audio and then we'll change this code blocks to mic off icon okay this could block and then we will declare another function remove media senders with RTP audio senders variable okay this will remove audio from truck okay so you write is audio mute equal to is not this audio mirror so it will work exactly as opposite here you can see it is true here say if it is true and if we click on the mic mute unmute button then it will be false that means it will be on mute and if it is unmute it will be mute this this will work exactly like this if it is true here then you click on the mic off button then it will unmute audio and at the same time this is audio mute variable will be false and again if you click on the mic button then this is audio mute variable will convert into true okay I have you got it now is audio mode is true if I click on the my Audio Mic mute unmute ID then this is audio mute variable will turn into false okay here it will be false here it will become false and if we click the mic mute unmute button I am is audio meat is false then this remute variable will turn into true here in order to make false again when we click on the mic button next time okay so have you got it feel free to post a question if you have any difficulty on understanding these topics I'll be there for you so now we'll work with video so here you can see when we click on this video cam off button the video will be displayed here that means it will be then video cam on and again if we click on this video cam on button the video will not be displayed here and this icon will turn into video cam off icon okay so let's go to the editor here just right after this code block where we have write code for mute and mute so here just write the ID so we have not set an ID to the video cam off so here we we declared an ID is that video cam on off just copy this ID and go to the app.js and paste in here and we'll write on click and I will run the async function the function is if there we need to check something here look carefully so when we click on the video cam on off there might be video from camera or video from the screen that means when you click on present now then this video screen will be displayed in the video tag okay how exactly we'll be able to know that that the video is coming from video cam or screen from our computer so how we can be confirmed that's why you need to create an variable called video State okay so here we will declare a video State first so declare variable video underscore States equal to we'll declare some property here none equal to zero camera equal to one here I mean this is colon I'm saying equal to that means we are assigning one for camera one value for camera property so here the third one is screen share and we set two below for this screenshot property okay so now we will declare another variable uh video underscore State I say St to understand it in better way so here video States so here we first set that video States dot none that means there's no video right now we primarily initially set video state is equal to various States now this one okay now go here we'll check so we'll check here first if video underscore State equal to video States DOT camera if there is a camera with video States then what we'll do we will first declare a function call a function have it video process with uh with the state video States dot none that means when we click on the video cam on off while the video cam video States is camera then we set video States camera to none and we will set it in this video process function and we'll create a letter and if the video state is not camera then we will set A2 camera here we will set video States camera if it is not camera that's why you use here else statement okay so this is for video cam on off next we will do same for screen share so here's the option for a screen share so go to the index.html this is the present now so here we will declare an ID so ID is button screen share on off just a screen share on off copy it and go to the app.js and here paste in here if we click on screen share runoff then we need to check first that video state is skin Shear or not screen share you can see that okay it's going to share is 2 in this array okay so here If Video status is scrims here then we will make it is not else there's no video in this video tag then after clicking on the present now div area the screen share should have to be displayed in video tag that's why you will send here the screen share oops it will be screen share and okay fine so I hope you got it so in the next class we will write code for our video process function in order to display local videos and we will also write code to enable audio to our video okay so we'll do it in the next [Music] okay guys in this class we are going to create video process function that you have studied in here now here we first will delete the function function video process and we'll pass a new parameter here is called New video state because video state will be changed according to the user's choice so here first truly use try cater statement so you write try and first here we'll declare a variable video stream and we set null video stream here then we'll check if new video state is equal to equal to video State video underscore State streets DOT camera that means if video States is camera so here you can see we have send that's three video input type so here is the video stage camera in order to click on M off icon then it will send this video state DOT camera okay so here if you get this video studies camera then run the code here we'll use a read Navigator dot media devices dot gets user media so this is the get user media API here we'll use the parameters video property and here we'll set the video property is height first width 1920 pixel and then set height 1080. okay so this is for the video and on the same time you can also specify the audio and we will make audio files just for the video cam because you will add audio separately to the mic okay so whenever you click on this cam off button then video cam will be started here and at the same time Mic will be off that means microphone will be off and whenever click on the mic off button then audio will be in stream okay now here we'll use else statement else if and if the new video state is foreign share instead of camera then we will use get display media instead of this get user media just copy all this and paste in here oops not in here and just right after this understanding purpose I am removing the white space so here we'll test it and instead of get user media it will be get display media okay and since you have used this a rate in this function block so here we need to use must as sync okay and we'll store this output in a variable via stream that we have declared here okay same will do in here for screen share so here every time this video stream variable will be changed according to the camera input or screen share input okay and then what we will do and then we will change the state of video State here you can see here declared video State Higher video States we set none okay now we are going to change this video State according to the states currently now in our new video State variable so we are going to change it here just right after this try cut block so here right video state is equal to this new video state Whatever video State we have enabled now there can be a camera or a screen share okay so next here you'll use catch statement so here in the Casual instrument you will get the error we'll catch the error and we'll console log there and it will return it okay next first we'll load the local video to our local video player okay that means in uh local video div tag so here is the local video player ID for video tech um in this video tag users video will be loaded that means if if I'm joining in a video then my video will be loaded in this video tag and the others video will be displayed in this in this video deck okay so here just right after declaring this either get user Media or get display media now we are going to check if video stream is true and video stream dot get video tracks dot length is greater than zero that means if there is a video tracks on the Stream view stream then first we'll get the video tracks and a story in a variable so declare the variable this video camera okay and we'll store the video stream dot get video tracks okay zeroth Index this will get the exact video tracks from stream this stream I can a store in a video cam track variable we have not declared this video cam track yet so declare this video come track in Global space so nuclear here variable video cam track okay so here it is video cam track and next you'll see or we'll check if video cam strike is true then there is a data in this variable that I'm in the video tracks then we'll load these trucks as Source object for local div so declare here local underscore deep we have declared this variable and here you can see this local variable holds the local video player ID this ID local video player okay so here we'll use Source object property and add new media stream object and will pass this video cam struck as parameter in this bid media stream object okay then we need to update the media senders so we will do it later first this is for now we have just built the systems the basic system so in the next class we are going to check whether the basic system is going to work perfectly or not okay so we'll do it in the next foreign [Music] phase so we run the server Ctrl C to desktop running server now type here npm start to restart our server okay now you can see that our server is running on 3000 port so here go to the action.html and now click on new meeting here is the index page with new meeting ID and set here or type here your user ID and click on OK so there is no change you can see let's check the inspect for any error and click on this console tab here in the Google dab tools you can see that an error on code syntax average is only valid in a sync functions and the top level bodies of modules so they are in our app.js somewhere we miss using a sync function where we have used Avid keywords that's the reason why you can see here my app is not defined so okay let's go to the editor and you can see here that just try it out for this approcess function variable there's a my function variable and and it is showing error that my my app is not defined so this is because there is some issue in this approcess function variable that's why it is not running this my f function so let's find out the issue here so now here you can see that right before this award you can see that there's a three dot under the weight course it is showing that I read keywords should be used with function where the function is called with a sync so go to the set of our function so here's the set of our function but we have not used async function here you can see that I would curse right here as sync okay now this I read is now solved okay I think now the error should have to be removed save it go to the browser and refresh it okay check the dev tools here you can see there is no error right now so code is working fine whenever you click on this video cam off icon then there should be an video in our local video tag because we have set here the local div Source object New Media stream object that we have set Source object for local div is a new video stream however we pass video cams truck as video truck so this should work so I've alert it to check whether this portion this code block is working out not it's right here video cam found save it now refresh it with user ID click on the icon you can see this is not running here this alert is not showing so let's check the issue so okay so here's the issue the camera c will be in capital letter so in JavaScript this capitalization is a master issue while you are debugging a code so save it now refresh it click on this bacam off icon you can see that now video can found okay fine now you can see that video now is streaming but video is not showing in here so check it out inspect so here's the meeting ID you can see that meeting ID is D num that means display none so you need to make it show okay display block so go to the app.js just try it after calling this my app function variable the init function will be called or run and there will write the code for showing meeting container dot show save it and not only that we also want to show username to this S2 tag so here we'll get the ID Hash Hash me to H2 you can see here this is the ID me and S2 is under this ID okay now you're going to set text is user underscore ID you also want to concatenate uh text Customs text is me that means this ID is currently me for me you will understand it when you will see this in action in the page okay and we also want to set the user's name in this title area so here write document Dot title equal to user underscore ID okay now rerun the server Ctrl C to close the server now rerun it and VM start you can see a connection is already connected so rerun it and set user ID okay press on this video came off icon and here you can see that video cam found okay but there is still nothing showing so inspect it we can see that it is still this display none because you can see here that none is none has an important keyword that means uh it is overriding our displayed block okay what we have set in here this it is this is not working cause bootstrap has set important keywords with display none that's why we will remove this display non form index.html this meeting container ID so here we'll write inline Style display none now this meeting container show will override this display none and I will make it display block okay so refresh it write user ID and here you can see that our interface working absolutely fine three interface three video interface this is because I have refreshed the page for two times and there is three user that you can see in here every time we refresh the page we have login with three unique soccer data user ID okay so so in upcoming classes we will create option for Closing Connection not now we will just close server and start again npm start press enter okay now if I reload with a new user ID in this particular meeting ID we will see that this two difference name for him is me that's where you can see here me in parenthesis fine now what we'll do we'll copy this link and go to a new tab and here we'll paste it you can see this this is same meeting ID or copy this meeting ID and go to the action.html page and paste here the meeting ID say meeting ID from here okay click on join and you can see here in same meeting ID and right here a user ID copy press OK and you can see this copy is me now there is one thing we need to ensure that you can see here in fine here's the Cobia that means connection has successfully established we are getting information from other users in our meeting okay so so copy this link and go here suppose we are we are entering a new meeting with meeting code press enter okay now you can see there is no user from this room okay there is three user for him hobbypan kobish but you can see there is only one user cause it is a different room okay and if we enter the same room here with a new user ID for a hunt that's okay you can see that there's two user Runner and Farhan so you're seeing that our room is working absolutely fine and connection has established with other user okay now if you click on this video cam of Icon then video confound okay now you can see that video is streaming in local deep okay and here you can see there is no videos showing for for him here exactly now you can see that for him is a streaming video but it is not showing here finds video not showing in here but webrtc connection has established but why remote video is not showing in rana's web conferencing interface this is because we have not updated the track for web RTC since first finally load the page we have set video track none to the webrtc track but when we change the track here for Farhan at the same time you have not changed the web address track for for rana's interface to show us a remote user's video that means farhan's video in rana's interface okay so let's go to the our editor and update the code that way the verbatc track for every single user will be updated once you on off video or or display or screen share okay so go to the editor and in app.js we will create a function or call a function on this on truck here this is First Hawaiian connection will be loaded so there will call a function update media senders okay and we'll pass two parameters first one is video cam truck okay and second one is RTP underscore video underscore Sanders okay so here we can set a filter if video a state is equal to video Estates Dot camera is r copied and paste in here our video strategies in screen share mode and then an only then update the media senders otherwise you don't need to update media centers because at the beginning of the loading of the page you will see that uh video States set to the nun okay so if it is none then we don't need to change library to see track we don't need to update it okay but if video status camera or a skin share basically click on this video on off icon or this screen share icon then that means should have to be updated with video cam stock and RTP video centers okay so now we also check if video cam strike is true or not it is it is empty or not if it is false or empty it will not update the media senders otherwise it will change it so what exactly media send us how exactly media senders will change you will understand it in a few times so here we will run this same function we will call same function just right after adding local deep just here remove this alert and right here update media senders video cam tracks and RTP video senders okay so here we have not declared this r2b video senders in global area it will create issue if you don't declare it here so declare this rtb video senders and it's an array variable bracket for it and now media centers will be update for audio video okay we have not created this function yet so we are not doing in this class so in the next class we will create this update media senders function and we will update tracks according to our choice whether we are trying to show camera or screen share or we don't want to share any of this we will change web Artistry track according to our choice and we will be doing this by using this function update media centers okay so we'll do to the next foreign [Music] in this class we are going to create this update media centers function which updates drop to RTP senders connection okay so copy this function name and just write above here process declare this function and it will be an async function so right here update media senders and we will pass two parameter first one is truck work is basically we have sent in here this is the video cam truck and next one is rtb video senders so here it will be RTP underscore senders okay next here we will Loop through all the peer connection IDs so that's why we are going to use here for Loop declare variable connection ID in appears connection IDs so we will get all the peer connection IDs and store in connection ID variable and there we will run every single connection IDs so first we will check the connection status since check first that connection status for this peer connection IDs is okay or true or not so you have not created this function yet so if it is true then we'll run this code block otherwise not so copy it and just right after right before this subject media centers declare this function connection status here pass variable connection here you can see that we are sending peer connection IDs to the connection status okay so here you will check if connection and we will also check connection dot connection state so you can access this connection State Property from the connection okay and if the connection dot connection state is new so there's basically three state first one is new then connecting or connected so if the connection dot connection State a equal to new or connection dot connection state is equal to connecting or connection rate connection state is equal to connected then and only then we'll return true cost you need to First confirm this that connection state is either have to be new or connecting or connected if if the connection is in this three state then you can return true otherwise return false okay so high and basically you are going to establish a connection then you will see these three connection State okay for establishing a new connection so if in of this state you will find true then you will return to otherwise false and here we are doing exactly same things if this connection status is in these three stage for the particular connection IDs then what you will do oops it is not connection IDs we need to pass connection ID to peer connection so it will be Fierce connection with the particular connection ID so here if this peer connection ID is in these three states then it will return to and if it is true then and only then we'll move further okay if if we are connections for particular connection ID is not in this stage then will not process the next code Block in this statement okay we will return an else block or we don't need to return anything we are in check so if RTP senders connection ID and RTP senders connection ID the track is true if there's a truck on the particular connection ID then only then we will replace the truck on the RTP senders connection ID replace truck and what will pass there will pass the truck name what is where exactly going to replace now this truck okay the truck has sent from here this is the video cam truck you can see that video cam track has got the video tracks from video stream that means our local stream okay fine is connection ID on the RTP sender server variable is not true also with the r2p senders connection ID that track is not found then we'll use this else code block and it will send will send RTP underscore senders for the connection ID equal to peers connection for particular connection ID so exactly what is we are going to do here we are going to add this add this track as a new truck for the particular connection if you don't found any previous track on the particular RTP senders okay so there we will add track we are going to use UI party CR truck property or method and the parameter will be this truck okay uh we got it if the if there is no truck earlier on this RTP senders connection ID then we are going to add the truck to this connection okay then this then when we change video input here then at the same time the other users video interface for particular room will be also changed okay so this is we have done in here okay so before testing go to the index.html just set uh here with video with go to the style.css so before making this video I have added this few CSS property to the class so you can see that top remote video show wrap this is the parent class of this meeting container ID so I have added some CSS code to this top remote video show web so here I have added justify content Center align item Center and height 100 percent and also set video border one pixel solid gray here so let's set a width here this is hard coded with 300 pixel okay save it now I'm going to close this first close the server now what we will do here we'll write npm start press enter then refresh it you can see now it is refreshing right here a name a bit press enter you can see it's me now okay same time refresh this one also now right here user ID find him press ok now it looks fine now click on this video cam on off now please run IV cam this means that now streaming is ongoing okay it's it's I become an app for my computer this is not I'm running right now that's why you're not showing my face but this is not an issue for you you have your own webcam just run it you'll see your face so let's go to the habits interface and here you can see you have successfully seen that uh video from rap for him okay now I'm going to on video cam for habit so click on this button you can see that ibcam is running here this video stream should have to be transmitted to find him you can see here it is successfully transmitted or streaming in Fahim interface now we have successfully build and established and also successfully create room hire user are exchanging their video interface and also the information now the main part have solved the rest of the part is to create features for our app okay [Music] hello everyone now here you can see that this code block is not going to work because we can't write code right after return statement okay so we need to cut and paste just before this written statement and now it will work so save it now go to the browser and refresh it oops so here first we need to start the server first so right here and Prima start it will start the server and now go to the browser we go to the action.html and click on new meeting name it a beep use the user IDs now it's mine interface next we'll go to the new tab and write same localhost and here it will be action.html and past this meeting ID copy and paste in here and click on join we have redirected to this meeting and we will enter with a new user ID fine okay you can see now this is both now if I enable this video cam you can see me right here okay and also you can see me in here okay and if I enable this webcam then you can see in here and this video stream will be transmitted to Habit that means my interface okay now you can see that our streaming is working absolutely fine now what if we are going to create another one let's take a look I just copy and paste this in a new tab press enter with a new name right Kabir okay you can see these two previous uh users video in this user interface okay this is happening because of this code block this could block we want to load this in a new tab here you can see that this is the same meeting ID press enter name my hair okay fine now make it on okay and here also for my hair make it uh on the cam you can see that our app is working absolutely fine so highly load this page than previous other user interface video interface also loaded in our app so this is exactly working for this code block this code block okay purpose of this code is to show other users hi new user enter in existing meeting then other users video will be displayed in his interface just because of this code block this upload media centers function will add track to his interface here's that works and if I make it on off then this replace Rock function will work to replace a truck either it can be webcam or from screen share okay I hope you got it and there I knew click on this video cam on off then according to its video States the video process function called and then video process function also update media senders according to videocam track so here video cam truck is the get video track function which can be display media that means the screen share or it might be an camera or you get user Media or you can see this both media devices stored in this B streaming and this B stream is used to get the video tracks this video tracks a story in this video cam this video trucks a store in this video camera variable and this video cam track replace in this update media centers function in here okay it replaced according to user choice either it can be a camera or a screen share I hope you got it now if you want to switch it off you can't make it because we have not created the system yet so go to the editor and now we are going to create system to stream off for video camera okay now here you can see that and even process function here you can see that video cam on off when we click on video cam on off ID then first we filter out that it is video camera or not if it is the video status camera that means the camera is on now then it will call this video process function with video state DOT none parameter okay otherwise it runs this video State camera so till now you're working for this video process video States camera basically high and video status is now basically when we click on this video cam button okay now video States is camera because now camera is now in running here so if we click on this button then you can see here this statements will be true in this event process function this video state is equal to video status camera is true then video process function will be called with this video please State non-parameter okay then what we will do here in this video process function we will first check if new status foreign status dot none say if the video status is known cost now we are sending video status none because it's already the camera already are in video State camera mode okay because now we are we have to run the camera in our app okay so here now this video process function is called to in this video as to test none then then what we'll do we will change video cam on off IDs HTML so copy this you can see here this is the video cam of icon from this video cam on off ID this icon okay so just copy it and go to the app.js select the ID and then change HTML of it here instead of video cam off it will be so just copy it and paste in here okay make a single inverted comma okay so this is for BG video States none but in case video States is camera then what we will do we'll do exactly same but Here video cam off converted into video cam on it will be camera now refresh it okay now click on the video com of and here it is converted into video cam on icon but it is slightly moved to left from its place so we'll solve it later now now here change the video State Just Right Here Right video state equal to new video State copy and paste here okay so high end video States is none that means video cam office activate this icon is now in display and there what you need to do we need to stop video streaming that's why you're going to run a function remove video stream okay then we'll send RTP video senders variable in this remote video stream function and then we'll return it okay so let's create this remove video stream function just right above this video process regular function so here write RTP video senders as parameter and then write if video cam struck it is true that means if there is a video if there is a video in the truck then first what you will do will stop the truck using a stop method then we'll make it a null media chemist track equal to null and then we will also make local deep Source object also now this will remove video from our application interface and here we also need to update media senders and the update is removed so that's why we are going to create a new function called remove media senders and it'll pass here RGB video senders as parameter we will create this remove media centers function just right here right function removed media senders and give here a parameter parameter name is RTP underscore senders now here we are going to look through peer connection IDs so use for Loop for variable connection ID in peers connection IDs okay so here we'll check if RTP and underscore senders connection ID it will be ID not in if r2p senders connection ID and connection State and connection status for this Clear Connection connection ID is true then we are going to remove truck from our peer connection for particular connection ID CPI connection connection idot remove track and here we'll write RTP senders okay and we'll pass the connection ID which we are going to remove okay and then we also make this RTP sender connection ID null we didn't want anything in this connection ID so make it null okay so now this will remove video from interface when you click on the video cam of Icon okay now here you can see in the event process function here is the event process function we called and load audio function that we have not created yet okay but we have already created this update media senders and remove media senders function okay so when you are going to mute a video then this update media senders will run with this audio and audio senders variable as parameter and then high-end audio enabled is false the administrator is muted then we'll use remove media senders with this RTP audio senders and this will remove audio from the truck okay exactly same way we have removed video stream or we have removed video truck from video stream okay so now we are going to create this load audio function so just copy it and and here so right here async function the function name is bloated and here we are going to use try cat statement so here we'll use get user media API to get audio so right here at wheat Navigator dot media devices dot get user media and for audio here on the parameter we will make video false because to mute and mu to Rio we don't need video track that's why you're making video false here and then we will make audio true to get audio from the stream okay so here we will store this get user media unit variable it will be audio stream a stream stream that means audio stream okay next we will store in audio variable this as stream dot get here we will take the audio truck okay that is webrt is a function to get out your tracks from stream and you will get zeroth Index this zeroth index will return us as audio tracks from a stream manually store in this audio variable I think we have already created the real variable in global space yes that is right next what you will do we will make audio dot enabled is equal to false then here you write catch statement and we'll pass parameter e for error and we'll console log the error a so here we have make audio enabled false and at the same time you can see here in event process function we have made is audio mute 2 is now to remit that means if it is mute we make it unmute and if it is on mute you make it mute okay so unmute mean orientable is true and mute main orientable is false so here when we make first audio enabled false in load audio okay so it will it will be checked in here is audio mute then we will make it enable true and then change the icon from mic off to mic only mic that means it refers to mic on then we call update media senders function to update audio track and if it is not mute then this code block will fire it already enabled false it will make mute audio so it will be mic underscore of save it just add some CSS to the video com off icon here we set a style with 100 percent okay and on the other hand same for the mycoff set Style with 100 percent it will stop moving icon to the left side now go to the take this meeting ID and go to the new tab and right here localhost connection.html and paste the meeting ID here click on join you will join this adjusting meeting here here right a user ID click OK and you can see is now five video cam is off now we'll make on the video cam but it is not working here let's inspect it should not move so you can see here that the width 100 helps not have not applied because we need to apply one with 100 style in the app.gsjs in here style in single inverted with 100 percent so this is for my cough and also do it for video cam on off so here in the video process here is the video cam of icon pressed in Here style width 100 percent okay also set it here and here you can see that of course you need to set with 100 uh for mic also save it now copy this link or you can join with this meeting ID from action.html page so here just paste it and press enter write a user ID press OK you can see here now click on this icon you can see now it's not moving it is now in own place and if we unmute the microphone you can see now it's also working fine so guys let's find the issue and solve the issue so here in the set connection function move to the down in this connection on truck function area here is the issue just uh it will be remote audio stream copy this remote audio stream and paste it in here okay and then go to the index.html and in here you'll see move to the top you'll see in this div users ID area here's the other template and here's the audio and we have set first audio muted we shouldn't set it muted here okay it will be automatically mute by JavaScript that we have written in our app.js so save it [Music] hello everyone in this class we are going to create system for screen share on off that means it's considered toggling so whenever we want to share our computer screen either it can be a programming window or a browser tab okay so whatever the screen is you can share using webrtc get display media API okay so here it is get display media API this API is for capturing a screen okay so let's go to the application and here write localhost to the center in this meeting ID with the user ID fine so whenever we click on present now I can you can see here it is now suggesting us to show which screen is screen one or screen two okay next it also there's also tab for window and next one is Chrome tab okay so there you can see the available Chrome tab anyone we can broadcast or we can put any stream either it can be a tab window or Intel screen okay so let's suppose this screen or and window for this our Chrome tab like Google share okay now it's sharing you can see here here you can see that now the Google page is now in Sharing okay so whatever I write here hello world you can see in here now it is transmitting okay so it is now in a small screen whenever you double click on this screen it will be the screen will be bigger okay we will create the functionality letter so now the screen is successfully streaming so here you can see that we have got the view stream for display media basically when you click on the uh you can see here and I will click on this icon a screenshot on off then it first check if video state is screen share or not if screen share is equal to video stick then it will call the video process function with the video States now so this will stop screen sharing and there will be no screener video in the video States or in the video tag here so whenever you click on this present now you can see now it's gone okay this is because we have past video States non-join video state has a screen share you say I have seen now when there is a screen share in video State and then when you click on this present now or screen on of ID you can see in the industry HTML here the ID for his present now his screen share or not find a click once again on this button then it checked and find out a screen share on video State then it pass these states video States none to the video process and video process function stop screen sharing and remove video from video tag okay so here it is burial process here's the video states that the video status is basically this foreign States none so we got using this new video State parameter and so here is the we check this if new BDS States is equal to video States dot none then what we have done here we have just removed video stream okay and uh convert the video SC variable to new video states that mean video States none right now this video status and that is what we have returned next what we will do here when you click on this present Now icon then this text should have to be changed to presenting now okay and whenever it is okay I can see Chrome type Google share fine now go to here if we click on this camera video cam of Icon then you can see that it has converted into video cam you can see please run IBM that means camera is video cam is running here I just switch off my camera that's where it's showing in here this doesn't matter now if we click on this present Now icon it should run a tab or window or a screen whatever it is and this icon should have to be video cam off because now video cam has moved out from this video tag because screen now in streaming that's why this should have to be off and this is this is stimulus issue we are going to solve using JavaScript in our editor so go to the editor and just write here in the video process in The Brute process function where it is say basically high on beta States is none we will change in the screen share on off ID here it is just copy it and here and you remember it it is in the video process function however you have checked new video States is equal to video States none so here's get the screenshot on off ID and change its HTML so here we are going to just put this one uh this material icon present to all and present now copy it and paste in here remove quite a space from the code there it is so we have written present now when we have stopped showing or streaming is screen using present now button the text should be stop present now so here we'll check first if new video state is equal to equal to video state video States DOT camera is true that means video States if now it is in camera then we will run this word block however we'll use dot HTML function for an ID to change HTML code next what we'll do we will exactly copy this or else if and we'll check if it is screen share okay then you will use this block so here if we just straight screen share that means screenshot is running on here then what will do we will change text file screen share on off the screen share on off copy and paste in here for avoiding any case sensitive issues here and here we'll use HTML and then same as above just copy this screen share enough from video process function just copy this HTML and paste in here oops last in here just add a text here Mr President now okay and also you can set a text color here text just to make it green and just copy that icon color to the text here set a class for the Deep and set the class name whoops it will be double inverted and set text color text success bootstrap class so save it and on the other hand for this code Block video status camera they are also need to change the stml icon so here's the HTML I'm gonna spend tag just copy it and here uh the ID name is video came on off so just first we set HTML it's fine and here we will use only video cam and they are it the the HTML function will be applied to this ID video camera off so this is basically for Hawaiian video camera now in streaming so here you'll specify the ID video cam on off and we'll change this channel video cam okay I hope you got it and in this case we also need to change the text for this screen share on off oh and there is a camera now in streaming then this video cam should have to be converted into video cam only the admit that means this icon otherwise not so here you will change the HTML for this screen share on off and here we'll set also HTML this HTML where we are going to change oops we are going to change a stock present now this text will remove it and also remove this class text success and this text access class also from the S Pen tag okay I will got it so here hi any screen share is now in on a stock present now is on then we need to also set video cam of course fine this uh streaming screenshot streaming is now on then this video cam should have to be off okay so that's where you're going to also add this uh code blocking here for screen share my screen share streaming is now on then we need to change video cam onto video cam of okay save it and so this is what all we have done here here one thing is left to do is to specify how there is no streaming on the interface then what we will do basically behind video streaming is not active or inactive then what we'll do in this case you are going to use on inactive property for video stream so here so you can see just right after this get display media you can see here just right after this we will declare a property for video stream on in active is equal to we are going to declare Arrow function here so first what we'll do we'll remove uh video streams for the RTP video senders and then we also specify in the screen share so this basically remove video stream also need to change text for this extra present now text to present now stay here what we are going to do is to just uh copy this and paste in here okay it will convert step present in now to present now basically there is no video stream podcast display media in the video process function just already has status table for a scrim share here is desktop present now and we need to set here the hash for the ID save it refresh it put it over here press ok help you find him now that's fine click on the present now and stream a Google tab or window tab just uh share it you can see in here that is streaming now it's sharing and then text has changed to green color and showing here is top present show text okay so it's not working absolutely fine and here also you can see that this icon has turned into video cam off okay if we stop streaming that means click on this extra present now button you can see now that it is converted into prison now text again and the screen share is now up from the div and here what you will do if we run the video cam you can see that video cam is running and on the other hand if you click on the present now and it's CR and share any screen okay you can see that video cam is now of course video streaming is now running here now if we make it on you can see that camera is now on and stop present here has moved present now now our application is working absolutely fine so far we have created system for streaming video audio and screen share this is what we have done till now successfully so in the next class so I will do we are going to work with the messaging system okay so we'll do it in the next okay guys so before Deep dive into our messaging system our messaging part here first we are going to create system for disconnect connection uh basically a user leave his interface or close the page then what we need to do you need to use a disconnect event for soccer.io in order to disconnect a user from server and also let others know about the user that the particular user have just disconnected from the connection so this is what we're going to do in this class so go to the first server.js so just write in this iu.connection function we are going to create the code for the disconnect event so here just right after this sdb process function here we will declare another event for socket on method and here we'll pass the event name is disconnect then here it will run the function and first console lock here we got user got disconnected okay or you can simply see disconnect that next what we'll do we'll find the socket particular socket area we have just disconnected from our user connection take the user connections variable and use find method okay so here we'll Loop through all the connections basically or the connection ID from this array variable so here we will specify the connection ID okay so we will find the connection ID which is matched with the socket ID socket that is basically the user who is now locked in the interface which is now in meeting we got the particular socket ID in here and if the socket ID is equal to connection ID then we'll store the particular connection ID in a variable variable name is user this connected user okay this user so here we have the user who got just disconnected because of we disconnected or closed his pager application at the same time this disconnected even fired and at the same time we got that this user disconnected users connection ID and storing this variable okay next we'll check if this user is true okay that means if there is a data in this disuser variable then what you will do we will get the meeting ID from the disconnected user so declare variable meeting ID is equal to this connected user dot meeting underscore ID so this is the meeting ID that we have passed in the user connection variable here's the meeting ID okay so basically we store a user details information where the socket ID is equal to connection ID okay now we will filter out the users from the user connection we have just uh disconnected so we are going to use it by user connections dot filter and here we'll pass the parameter P where P dot connection ID which is equal to is not is equal to socket dot ID and here we will update our user connection variable so it will be user connection is equal to this is basically what we have done here we have gathered all the users connected users information in this user connection variable except the user who have just disconnected that means you got the socket ID the socket ID for the user who got disconnected and we cut out or we just uh filter out his connection ID that means we got every single connection idea except disconnected user and we also need to inform other about that this particular user have just disconnected from the meeting okay so how we can do it first we need to get the users in a variable which is yours will be in list declared here available list is equal to user connections dot filter I'll pass the P parameter here and there is p meeting underscribed is equal to exactly the meeting that you have got in here this meeting ID okay now we'll use for each Loop for this list variable so write or each and then pass the B parameter here and here we'll run the code basically to let inform others about the disconnected user okay so here we'll use socket.2 to transmit particular audience so here we'll use V Dot connected connection ID you will let this about the user disconnected so we'll use emit function and we will use a an event custom event in from an about connection int okay next here we'll pause the data so the data is first one is uh disconnected connection ID is socket dot ID and uh okay this is for now next we go to the app.js and in here in the app process not approaches my app function here we are going to get the event on socket dot on method socket dot um method here we got that information about Connection in copied and passed in here you can see here in form in from other about disconnected user with some big event but we can use it to understand purpose so inform other about disconnected user copy it and replace the event here will run a function with the data we have sent from server.js and here what we'll do we'll remove the particular ID from the HTML okay so first here what we'll do we'll remove the user interface uh or user video from other users conference so here what we'll do we will get the ID using hash and then we'll concatenate the connection ID data dot uh connection ID is this basically connection ID and we pass in here okay data connection ID so we got the ID and we remove it so higher so higher you exactly set this connection ID so you can see here on a new user editing the connections here you can see informable inform others about me or inform me about others every time you call that user function so here you can see the ad user in the new deep we have uh set an idea attribute with connection ID and there we add a class other so we exactly Target the ID which ID assigned assigned for the particularized ID and we got and remove all the information basically video interview and his name from the interface basically we remove the user you will see it once we complete it and test it in browser okay next we'll process this disconnected function in approcess function variable so write app process function variable and we will declare close uh connection call and we'll pass the data data connection ID the ID who have just disconnected so as you know we need to First return this close connection call from approcess function variable so here's the process and at the bottom of the function we have returned all necessary information so here it is return and just duplicate it and here we call this function close connection call and here we pass data only okay so the data is connection ID and here we'll call a function close connection and we'll pass the connection ID for this function okay so copy this function with parameter and move here just right before this returning right here as sync function close connection connection ID okay so here first what we'll do we'll make now the peer connections ID from peer connections ID array variable for the particular connection ID so right here peers connection IDs and we'll pass the connection ID that have just connected and will make it null okay and then it will check if PS connection for the particular connection ID is already in the connection variable peer connection variable then we will do what we will do will make will close the connection first so we write peer connection for particular connection ID and use the close function wherever it's a function to close the connection from the connection variable it will remove the connection property from the peers connection variable then we'll make also null the connection ID so just duplicate it and right here connection for connection ID is equal to null okay so at the same time there might be also audio streaming and video stream in this connection this also need to clear we need to make it clear so right here remote underscore audio stream so first take the audio stream and pass the connection ID and here first you'll get the trucks and make it a stop so write demo for your stream for connection ID and then first get the truck using get truck method and then we will use for each Loop to get the trucks and to stop the truck so here pass parameter T So declare array function and here we'll check if T dot stop is true then run the function T dot stop next just right after it will make a remote audio stream for connection ID null is equal to null okay that's it this is for the audio stream now we are going to duplicate this for video stream and here instead of audio we are going to use video okay copy it and paste in here this is same get tracks for HD and then if T dot stop is true then uh run the TS top function it's basically it will stop the streaming from video stream and we also need to make remote video stream for connection that is null okay so this is the function we needed to create to disconnect a user so it will help us in our further classes to work with message and user count also with file sharing system it will make it easier to work with that so let's check the functionality that we have created just close the server and rerun the server again npm stock okay now right here localhost and run the action.html click on new emitting press and user ID okay and copy this URL and paste in here press again and right here for him okay so here click on present now we are going to stream it tab Google okay now here you can see that Prime is now sharing AC screen at tab Google Chrome tab now you can see in habits interface the file is now in the remote user place okay just inspect it you can see that in the other classes there is an ID here we have set using add user function in here and you can see here we set an ID and also add the class other so here it is we have set ID and set class other here now when we close this connection that means we are not going to stop presenting down here we just close the connection by pressing this cross icon from browser just close it now you can see in here you can see that for him is gone okay and his streaming also gone now from here because now Habibi is now informed about other users disconnection okay so you can see an error that get truck uh type error remote audio stream connection edit.getrack is not a function okay so go to the editor and and here you can see that it track it is not truck it is trucks certain s with this truck get trucks okay so it's fine now I have the issue will be solved okay copied and paste in here enter a user ID coverage press ok now enable the video cam here so you can see and it also running in here now I'm going to disconnect this uh my user you can see in here is disconnected now go to the editor and here you can see that the text disconnected okay that means a user have disconnected right now we have no Talent here we have not specified here we just specified that this a user has disconnected so we have successfully built the system so in the next class we are going to write code to create messaging functionality in our project okay so we'll do it in the next [Music] one the this class we are going to write HTML and CSS code to create the message interface okay so here is the so here's the top right bar here when we click on this message or participant icon then this top bar should have to be expand to the bottom okay and here will be details for message and participant information okay so here first we are going to create this complete area interface okay so go to the editor and in index.html so take a close look here is the meeting container you can see minimize it just right after this meeting container close dip we are going to create another div for class we name it Google RG right details wrap and we'll set a background color light since here the background color is black and then we will set text color text secondary for gray color and then we will set also bootstrap class height 100 percent h100 okay press tab fine now here we will also set some inline style that will help us to design our paste so set here Flex basis 25 since you have seen in here that you have set with 75 percent or Flex basis you can say that 75 percent formatting container okay so instead of class with 75 let's set in here Flex this is 75 percent it will be easier for us okay though it seems to work same whatever now the area now the area got 75 percent and this area got 25 percent just refresh it with new user ID you can see that the area Okay so this got 75 and this got 25 percent okay now you want to show this white background to the top you can see the white background is now just right under this right top bar okay so set here jet index 1 you can see now that this 25 area is now in the top just try to Over the Top Bar okay next we'll declare another property display none but will not declare it now we will declare it later because understanding purpose we are going to see the what is going on here after completing the whole interface we are going to set display none cause we want to display block or and we click on the message icon or participate details icon okay so right now we are not going to set it so just go to the editor and here set that index one okay oops not in here cut it in here now we are going to divide this G right details wrap class into three parts first one is for meeting heading reps so declare a class meeting adding to graph okay we'll set here also good step class display flex and justify content between thank you and also set align items Center okay and also set padding write three and also set padding left three okay press tab and here we'll also set a style for height set height 10 view height and this is for just heading right you'll see just right after completing this part in browser here we are going to or declare this deep class into two parts first one is for people heading we name it with a class display centers we have already know what is the classes and then another class is card search pointer press Tab and duplicate it for another time and here it will be chat heading instead of display center we are going to declare display flags do the step class justify content instead of Center we are going to use round and also site align item centers okay fine until we are going to write anything here we can't see progress in the browser so let's write it so in here in the people heading we are going to declare a class of people heading icon and then declare display Center class and also set margin write one press Tab and in here we are going to declare a span tag for material icon declare class material icons and the icon name is people okay you'll see the preview in browser in a short and just right after this people heading icon we are going to create another deep just duplicate it and right here people heading text the custom class and just remove this margin right one you didn't need to set margin here and instead of the people Icon here we didn't need to put any icon here we will write a text or the C pen okay it's got a number of participants so here we are going to declare another span tag so in this suspend tag we are going to declare a class class name is participant count and set a hard-coded participle count one so basically when user load his interface or create a meeting then participant count basically shows one we will later change it in dynamical way using JavaScript code so here we'll put this one in a parenthesis okay fine now save it go to the browser refresh it foreign count one okay text and the number of participants here here is the icon okay so this is their left side and in the right side uh there will be area for chat headings okay so now in this chat heading same we are going to declare a class chat heading icon with uh with the class display center and set margin right one okay declarespan tag in it and this has been tag is for Google material icon so declare class material icons okay so here the icon name is message then just right after chat heading icon you're going to declare another class or chat heading text press Tab and here write chat okay save it then go to the browser refresh it you can see this is the participant and this is the chat okay so when we click on this participant then there will be details for participant and when we will click on the chat then there will be an option to send message and to display message okay so let's uh get in another headings just write a book this participant chat it will look better so go to the editor just we're going to duplicate this meeting heading web duplicate it and here this will change the second duplicated class name instead of meeting headache wrap we will write it uh people chat wrap okay okay now it is different on the other hand on the other hand remove this content from here these two content these two class removed from the meeting heading wrap this class okay just remove it and here we are going to declare a class meeting heading with font weight bold and set a class also for cursor pointer okay press Tab and in here write meeting details on the left hand declare another class is for meeting heading cross this is for closing the meeting interface or message interface meeting heading cross and also set class display centered and cursor pointers press tab declare here and spend tech for Google material icon and set a class material icon icons and the icon is clear icon name is clear save it on the other hand here in the people chat head wrap set here margin left 3 and margin right three okay and also make a font size little smaller so right here font size 14 pixel save it now go to the browser refresh it and here you can see it looks quite better than previous so here's the meeting details and here's the cross okay here's the two option here first one is for participant details and the second one is for chat okay we can take out this cursor pointer from this meeting details so here's the uh cursor pointer from meeting details save it so here's the two thing uh heading and the people chat reflex next we are going to create another deep class is for in call chat trap and we'll set also margin right three and margin left 3. also set padding left three two trading right three okay press tab and here you will also set a style font size 14 pixel we are making it smaller than its default font size okay so here we will divide this in called chat wrap into two parts first one is for in call wrap up okay and second one is four and basically it will be Chat Show crap I don't need to write this up whatever so you need to set a color of the text is text secondary for our chat text message so this and call wrap up class will show the participant details and this chat show wrap or will display the message that was sent by the other users to me okay now here's in call wrap we'll set in line Style display none for the first time and will make it important okay at the time of loading we don't want to show any participant information we want to show the text documentary basically when we click on the chat icon then this should be appeared okay we'll also use JavaScript to make it enable just keep writing with me and you will understand once we complete the part using JavaScript you'll understand how exactly it is going so here we set display non import and for now because we are now going to work with Chat Show rep that's why we are not going to see this in call Rep class or any content from the class so because we are now working with messaging system that's why chat show web I'm now working with it so here first what we'll do we'll divide this chat chat show wrap class into two part first one is for uh chat message send input so right here declare chat message uh send input set also style here with 85 percent okay and here set the input input will be 85 percent and the rest area is for the send button okay so here declare input tag and that type will be text and then name now keep it blank and then we'll set a class chat message send input field okay also set here with 100 percent okay and next setup ID is message box box and then set a place folder text and a message to everyone here we'll set a style border bottom one pixel solid chill okay here we are going to use steel color so just right after this input tag we are going to declare another deep class this is percent button so here right chat message send action press tab and here also declare class display center also set ID button send and then set a style color teal and make our solve pointer okay and write a text here with uh not text we are going to use a Google material icon so write a span Dot material icons oops okay and write the icon name send okay save it now go to the browser refresh it okay and here you can see that send message to everyone and here is the send icon so this is not looking well so go to the so go to the editor and we just wrap this two and we will declare another class just right after this chat show wrap and the class name is chat message sent and here we'll also declare display Flex class and with justify content content between and then Airline items Center okay press tab where we'll set also style set here margin bottom 35 pixel okay now cut this deep from here and paste just right after the chat message sent action class here okay fine now save it and go to the browser refresh it put a name and here you can see it's working fine just right before this message chat message sent a class we are going to create another class for chat message show fire message will be shown and we'll also place an ID messages press tab save it and in here in call in called chat rep in style set and height 69 view height foreign okay and here we also need uh to add some class here in chat show wrap class okay so add here display Flex and with also set Flex deduction column that means Flex column and with this right Justified uh content in between and also set height 100 percent so right here each 100 save it go to the browser refresh it press ok now you can see it is in the bottom okay so what you need to do you need to just clear the border from the input field here then it will be okay so in here in a style and just write border none okay save it refresh it press okay now you can see that it is gone here you can write anything and send using this uh icon send icon okay so in the next class we are going to right code to enable the messing system where we are going to type text here and using this send button we are going to send message to all other users in a particular meeting okay so we're going to do it in the next hello everyone in this class we are going to build our messaging system we will write JavaScript code to send message in a meeting okay so in order to create messaging system we will go to the my app function variables and in here we'll call it function in the init function here it is so the function name will be event handling foreign handling is from my app this is not event process so copy it and uh right in here just before add users so create declare the function and here in uh curly braces first we'll get the input field so here's the input field the IDS message box okay and we click on the IIT BTN sense copy BGN sends and get the BTN 7 ID so whenever we click on this ID then we will run the function so what we will do we will use socket.mit method to send message and here we'll use an custom event send message and then who is that we are going to send that uh data we are going to send is the message box data dot value this is the data okay so basically when you write something in this input field and click on this send button then it will take the below from this input field and emit or send to the server okay after the sending input value we will make this message box message box value empty okay have you got it now we have got the message value and sent it using socket emit function under this send emessage event then we will make it below now now below empty now here the message will go to the server.js and here we will catch the value using the socket.on method uh just right before it so here we will declare the method socket dot on and the event is not between sent so here is the event event name is send message so copied and testing here and we'll catch the data here that data is message so write MSG is equal to array function so here we'll console log the message for testing purpose okay whatever now we will complete the coding here so what we'll do first first we will find the connection ID related to the socket ID okay and store in a variable okay M users that means message user is equal to user connections dot find so here we'll filter all the connection ID from P so right here P dot connection ID and there will check if the connection ID is socket dot ID okay so we'll find the connection ID for the socket ID and store in this user and user variable then you will check if an user is empty or not if it is true then we'll first get the meeting ID from this m user so declare variable meeting ID and and we'll get the meeting ID from M user Dot meeting underscribe you can see here at the beginning we push meeting ID to this meeting underscore ID property or variable so here you have got the meeting and described from M user and store it in meeting ID variable next we will declare a variable from which exactly we are going to we are getting the message so it will be amp user dot user underscore ID and then what we'll do we'll declare a variable list and a store in this list user connections.filter anterior filter p dot b dot meeting underscore ID is equal to the meeting ID okay so here we store all the information in this list that related to the meeting okay by your permitting ID is equal to meeting ID this meeting ID okay next then use Forest Loop to this list for each so here we pass parameter B and we'll check foreign data to other clients using socket.2 so we're going to send data to VDOT connection ID okay and here release dot emit to send data using this show chat message event okay and then we'll send the data so data data is formed is equal to from this from the user ID and then message equal to message you set message to message okay exactly said this message in here in this message property okay next uh go to the app.js and in here we'll write socket dot on method and get the event show chat message the event is this show chat message copied and pasting here and then we'll run the function data and then here first you will declare variable time to show message time so your time will be new date object okay then we will declare variable for L time that means local time is equal to time dot to local string foreign us and there will set power is numeric and minute is also numeric then I will set also our troll it's true okay next what you'll do we'll declare a variable div and in this div we will selection div you can start created div and in this div we will declare HTML function where we will write code here will first declare a span tag and in this suspend tag will declare class class equal to font rate bold reset ball to the front weight and then set margin right three okay there will use an inline style equal to color black to the system tag and close the span tag here and we didn't need to close it and in between here there will be double inputted and here we will concatenate the data from the user ID name and also concatenate the closing tag of this pen and then we concatenate the local time here and then we'll declare brick tag and double inverted and then we will declare the message data Dot message so here's the data the data carries the message and from here is the data message message and from okay so have you got it next what we'll do we'll set the or we will append the div to the message ID so here you can see that we have declared a variable for chat messages show the ID is messages copied and paste in here with hash Code system ID and then will append the div okay save it now it concludes the messaging system okay [Music] so select the complete code block and cut it because we don't want to run server-related event out of the event process for signaling server function okay so here in the approcess function variable we have declared ribbon process for signaling server so all the event that you're going to catch for server.js we need to write all this event related code in this function right after this sdb process passed in here so let's try it in our browser so just so just restart the server npm start and reload it right here a name okay and here also reload it and write a user ID okay fine now here we are going to send mscs hello from him click on the send button okay now there's you can't see messages here but go to the habibs interface and here you can see the message for him hello from Fahim on the other hand go to another meeting localhost action.html Neo meeting press OK and here you can see that uh this two meeting ID is same for fahime and hobby but Kobe meeting ad is not same is different okay but then here if we send anything like uh hello from cabbage press send so this message only sent to this meeting ID not other meeting ID will not get this you can see here will not get any message from Kabir sent to this message to his meeting ID okay so it's fine but there's an issue we have got is that fine send message then message should have to be displayed in here but it is not showing okay so this is what we have to do to write code to show the message in his chat box also so go to the editor and uh yes the event handling and right after this just copy it copy this from here and complete this copy and paste in here so you need to change something here this data dot format will be the user underscore ID okay L name is fine and that data message will be the this one Mrs dot value okay so why not we create a variable here message data is equal to this message box dot value so then pass this message that are in here okay and also in here fine now this will do exactly the same this will create a div with new message the message you have sent using BTN sent button that will get the message from this message box ideas input field and we set in this message data that store in this deep variable and the variable app and to this message ID okay and then we set into the Mrs box input field okay so let's save it and go to the browser refresh it also refresh it okay now you can send whatever you want either you can switch on to camera on or off or you can also share your screen whatever you want at the same time you can send message so let's check it uh so here right hello from Bobby click on send button and here you can see that Habib is the user ID and uh uh message is Hello from Habib and this is the time okay so let's check for Fahim and here you can see also that in Chad Mrs Habib hello from Hobby but you can't see in kabir's because the covers meeting ID and habiban for him meeting ID is not same okay we got it so this is so far we have created the messaging system okay so you may ask that what if I want to send any image or any file so this is not going to send using this chart option file is shared from this meeting details option okay so this is what we are going to create in our upcoming classes so in the next class we will create this uh participant option this will show the participant details okay so we'll do it in the next [Music] well guys so in this class we are going to create system to show participant details okay so whenever we click on the participant button then participant details will be informed in this area okay now this area is for chat so here we are going to create flip chat area to participant details area Okay so let's go to the editor and in app.js at the end here first all stars in the document for any click on the selector so the selector is this inspected and here you can see that people heading this is the class for this button so just copied and in double inverted paste it people heading and then run the function so here what we'll do we'll change this chat details area to you participant details inferior so inspect it and here you can see that details area this is now Chat Show wrap okay you can see here this is Chat Show rep currently now when you click on the people heading button this button then this chat show wrap will hide and show the in call wrap up area okay so here this exactly you're going to do we'll first hide the chat Show rap class okay we'll hide it and we'll use 300 milliseconds that's the time to hide the height this deep clause and then we'll show the class and the class name is in call wrap copied and paste in here okay then we'll show it in 300 milliseconds okay save it now refresh it Okay click on participants now here we can you can see it is going and restoring in its place this input field that means this chat show up so let's inspect it check out the reason so here you can see that uh radius respect it here you can see the chat sure app uh it has a display flex and also a display num you can see this plane on is overwritten uh because of this display Flex important keywords okay so so it's fine here now go to the index.html and in here uh you can see Chat Show rap instead of this d-flex bootstrap class we will write this display fax in this inline style so right here display Flex and now our our Discord chaturrep.hide can work on this display Flex since this Flex is not set as important so here reload it Okay now click on this participant you can see that now this area is for participant and when you click on this chat then this chat share app also appeared in in the area so this is what we are going to do now so go to the app.js and duplicate it and check for the button this chat and here is the chat heading copy the class and paste in here okay now in Color Labs it should have to be height and this chat share wrap this has to show okay now let's inspect it refresh it load it the user ID then click on this participant it is gone now and then click on chat it disappear according to our action okay so now here we are going to write code for the participant area so let's go to the index.html and just write above this chat show wrap here's the in call wrap up class in this class we are going to write code tissue participant details okay first of all declare a class in call wrapped and here also declare class for display Flex and then justify content between and also set align items Center and also set margin bottom three okay so here we will divide this class into two part first one is for participant image name wrap so declare a class participant image name wrap create class display center and car search find us press tab okay now duplicate it because I have said you you'll divide this class into two parts so first one is for participant image rep image name wrap and second one is for depend action wrap okay so in here we'll divide this day deep into two part first one is for image so your declare here participant image press Tab and duplicate it and here we set class participant name and also set margin love to okay and in this image class participant image class we will declare image with a source public slash SS slash Images slash and here you'll set other dot jpg okay and on the same time here we'll declare a class uh border with border secondary for gray color to the Border okay and then also set in line Style height 40 pixel for image with 40 pixel and then set border radius fifty percent to give image circular ship okay fine next here is set here participant name is uh when a user load and meeting then this must have TV you participant name ml U okay that means when user load and see the participant details info you will see his info in this as this new text okay on the other hand participant action wrapped we will divide this into also two part first one is participant action dot participant action wrap said also here participant action Dot and then set also display center with margin right two and also set customers pointer class Tab and here we are going to declare in Google material icon so declare spend tag with material icons class press Tab and here you'll use the class icon name is more underscore word fine next we are going to duplicate this div and here we will set a meta Google material icon is push understood pin and here we'll set it participant action pin save it now go to the browser refresh it sign in with a new name and click on this participant and here you can see the user details so this one is the U okay you can see that this cursor pointer is now applied on the both so let's change it you go to the editors and instead of showing cursor pointer here uh here let's remove it and keep cluster pointer for this tube icon save it refresh it and here you can see now it's look fine okay now we have written HTML code now it is time to show the participant number here okay find a user load his video interface that means user join in a meeting then his interface should have to be shown here the participant number for a particular meeting ID so let's go to the editor and go to the app.js so here we are not going to do anything first here first we will go to the server.js tiny user load the index.html page then hit connect with socket.iu then we get his information and a store in this user connection variable and then we inform others about me and also uh inform me about other users use these two events to send the user information for me and for other users so you will also send the user number information via this event okay as data so how can we get the user count that means how much user now exactly are in the meeting so this you are going to get easily by using this user connections.length by using the length property on user connection server variable so declare a variable user count is equal to the user connections.length so it will get the number of the user now are in the meeting and then you will send this user count to here just next of this connection ID and you'll send user number and set the user account as below for this user number variable or property okay we can also console log save it now copy it first user number and go to the app.js so you can see we have sent this user number uh using this inform others about me this event so go to the app.js and find the event inform others about me here is it so so here we call add user function with this two data first one is other user ID and second one is connection ID next we are going to send another data is data DOT number of users okay so go to the add user so here we have sent three parameters but you can see here we have set only two parameters okay so here we also need to count the user information okay we are going to use variable user number and it's equal to other users dot length Okay so basically the other user is this we have sent from here the other users complete other users number we have sand using this inform me about other users event so you got the data using this uh inform me about other users event and we pass other users and when we set the property length to these other users uh array variable then we got the user number the user number except me that means there's a one person is less than actual number of the user in the meeting so here what we are going to do we are going to declare another variable user num for number and we'll add one with this user number and this one is me okay because you can see here we filtered out in this in this other users here we have filter out uh the user is me okay so these other user holds the number of user for others so that's why I add one number one for me and then we set this username in this add process function parameter as a third parameter okay now go to the function so here's the function and the third parameter is user so right here user num as user number okay then what we'll do here for every single user we are going to add this code to this in-call wrap up class to add every single user in the list okay so here we'll get first the class name here's the class in calls not this one this one this is the class name for a individual users info so copy it and go to the editor and in here we will first select the class and then append HTML to read so what will happen so just copy this code and call wrap this code from here just copy it and passed in here okay here you can see there's a lots of what is space just remove it so there is easy way to remove this wider space so go to the text fixer.com and press this HTML code here then click on compress HTML it will remove all the white space from the code copy it and go to the editor control set undo it and pasting here okay so here in this class in Call wrap we are going to add an ID so ID is this participant underscore will concatenate here set connection ID okay so this connection ID is added with participant this ID and next what we will do in this area you'll see that U so we'll change this name U2 user ID so concatenate it okay so here's the other user ID just copy and paste in here okay now this will add a user like this on the other hand here we'll get the user account variable so here it is so fine for the class uh participant count so here's the class participant count just copy it and paste in here just right after it select the class first and then set text what will set here we will set here this user number okay to show updated participant count okay now save it and go to the browser copy it first refresh it with a name now if and here enter the same meeting with a new name Prime okay now here you can see that participant number is updated to 2 and let's check it here but it is 1y you need to also check for it so let's refresh it with Habib okay now it is two two next copy it and paste in here enters with a new name Kabir now you can see that participant count three has updated but here it is not updated because we also need to update this one let's check this so I click on this participant three you can see that there is three user U Kabir Fahim and Habib okay foreign [Music] testing it we need to restart the server so Ctrl C press enter and here you can see one so one is for the user count is one that means the one user right now so refresh it write user ID and then we are going to then we are going to enter in the same meeting your right frame press OK and here you can see that participant number now is two let's check the Habib and here you can see the participant number also updated in here too plus enter other user in the same meeting so in here okay you can see that now participant number is three three and three so number is updating now let's check for the participant details so yeah here you can see that you a beep and for him you have even for him let's check for for him click on the participant here you can see you Habib and Kabir you hobby okay so participant list is working absolutely fine okay now what if I log out from the space or disconnect in my connection then what will happen then others users list should have to be updated and the disconnected users should have to be removed from the list so this is what we are going to do in our code so let's go to the editor and in server.js here is the disconnect event so now what you'll do here in the list dot for each Loop what will do you're you're going to get the length of the user user connections after removing the users who it has disconnected from the user connections area variable we are going to get the length of the user connections array variable so here we'll use user connection dot length and we'll store this variable in a variable disconnect that user it will be user number after user leave equal to okay use a number after user leaves so copy this variable and paste in here where we are going to send this updated user number to the front end using this inform other about disconnected user so here we are going to use a property name user number U number okay so let's copy this U number property then go to the app.js and in the inform other about disconnected user this event you can see here and from other about disconnected user so we got these two data in this event in front it okay and in here what we will do first we'll update other users participant count so get the participant count class first and then add text with this data dot this U number my that means user number updated user number and then we'll remove the user from the list okay so here what you will do we will get the participant ID so here you can see how an end user edit is set and participant ID participant underscore connection ID so we are going to get the user using this participant underscore this participant underscore the connection ID so here we'll concatenate for connection ID data dot connection ID connection ID so check for the connection ID is spelling here here is the con ID connection ID and paste in here okay and then also concatenate this double imported and now what we'll do we'll use remove function to remove this D barrier from the list participant list okay so this is what we needed to do need it to be done save it now since you have added new code to the server we need to update it so yeah right npm start to rerun the server okay I'll just refresh it okay again refresh it create new name next is copy refresh it because new code has been executed okay now the list is okay you have opened for him you have even for him list is fine also here you have a bit you have Kabir and here is the you for him and copy you for him and Kabir search working fine now what you'll do here we just remove this Kabir from the meeting okay so let's remove it yeah you can see here that Kabir has now successfully unlisted from the participant list and also this you can see this participant count has just updated okay here also same have just applied here same have just happened okay so we have successfully created participant list here uh so there's one two thing you can do letter one is to pin a pin user to show his video only in the video interface and on the other hand you can do a lot of things using this dot like you can remove one user from the meeting just by clicking an option from this dot is like remove this user okay remove this user from meeting so if you're an admin of the meeting you can remove the particular user from the meeting you can create this functionality so with time I will add also these two functionality in this course let's first build the core functionality of this Google made phone so the next class what we are going to do we are going to complete the functionality for this meeting details we have not enabled this close icon yet we have not added functionality that indicator switch tab is now active suppose if this is the participant active this participant tab should have to be colored in a different way that identified that this participant tab is now active in this in this details area okay if this chat is active then this chat button should have to be colored okay so let's do it now go to the editor and in app.js here we have written the jQuery code to show it so here let's add and class add a class active so right here this dot add class the class name is active that we have not created yet and then we'll remove class from this chat heading class so right here this chat heading we're going to remove class is the active class so remove class this active okay so do same for this chat heading save it and it will be people hiding okay save it now go to the style.css and create the class at CSS property to this active class so right here background color Ash zero zero eight zero eight zero four seven okay next add a border radius five pixels 5 pixel save it now go to the browser refresh it click on this participant too you can see that now participant background has changed and then click on the chat you can see that chat background has now changed okay fine now let's go into create functionality for this cross icon where it will close this meeting okay now here get the class for this cross icon so here is the class meeting heading cross so copy it first and go to the editor in app.js just right after it duplicate it remove all the code and in here just pass the class name heading cross and in here what you will do when you click on the cross then complete area should have to be disappeared let's get this area completed here you can see that the area is Google right detail strap so what I have done here just click this one and get the complete area covered with this blue color and here I got the class I hope you know it so just copy this G right details wrap course and go to the editor here get the class as selector first and then use here Hide method and hide in 300 milliseconds okay so save it now refresh it Okay now click on this cross icon now it's gone okay so it's working absolutely fine now what we need to do and we load this page then this interface will not be displayed in here when you click on the chat or this participant list then this will be updated okay so this is what we're going to do so in order to create this functionality to show the details area let's go to the editor and here duplicate it and get the class for this two icons so first one is this in respect so this is a tough left participant to wrap so copy it and go to the editor here best here and then in this area what we are going to do first we are going to show this G right details wrap this is the container which contains the participant and chat info okay at the same time we also show the participant details okay so that's why you are going to specify that class there in call here it is in call wrap up this container this container contains the information for participant and here we are going to show it and 300 millisecond then we will hide this chat share wrap just copy it and paste in here and it will be height okay next duplicate it and in this case now we are going to check for the uh chat icon if whether a user click on this chat icon or not so here is the class top left chat web so just copy it and go to the editor and paste in here we just reverse this hide this uh in call wrap up and show the attach your wrap okay save it now go to the browser refresh it so this is there's one thing we have left to do is is to not show this details area when you load the page so go to the editor and in index.html page here is the digital serial do you write details wrap so here you will set display none we don't want to show it when the page is loading so here refresh the page and write this write a username okay now here you can see that the details is not showing it here now if we click on the chat icon then here you can see that chat is now showing close again and now if we click on this participant wrap then you can see the participant details here okay so it's working absolutely fine now here we need to update these two according to the user number okay so let's find from the Google dab tool so here let's find it so here's the top left participant count so search for it Ctrl f top left participant count so here is this top left participant count two so we'll change top left participant count to only participant count we will update with one cosine user load his page then it defaults to be one it the participant count here updates when any user ad and uh multiple number of user join in a meeting so let's check it refresh the page and that's uh the classes change we need to get the CSS property for this class so copy it and go to the starter CSS find it so here's this okay no problem so here we will keep this class just right after this class we'll declare the class participant count which are responsible to show the participant number just save it here you have set the participant count we update that count find user load in the in a particular meeting so refresh it it's now showing two because this was the another participant so remove him you can see that the participant number has changed two to one now copy it and and paste in here same meeting will join within your name and okay and here you can see that particular participant details has changed to two here you can see the change okay and then here's the details okay I hope you got it if we close this close finds connection or if for him leave from the meeting then let's see the change here it is okay so our top right bar has successfully done so in the next class we are going to create functionality to leave the meeting using this Leaf button okay and then we'll create step-by-step functionality to show meeting details and file share option okay and at the end we are going to create functionalities to record single Channel video and download the video from the channel okay so we will keep doing it in our upcoming lectures okay so the next answer we're going to create functionality to leave the meeting using this leave meeting button okay so we'll do it in the next [Music] okay guys in this class we are going to create functionality to leave a meeting using this Leaf meeting button that is what we say so let's inspect the class for the button so the class is in call wrap okay so copy it and go to the editor and here in index.html what we're going to do is to check so duplicate it first check if there is any kind of click on this class so is there not if anyone click on this end call wrap then what we are going to do we are going to add HTML to a class the class is should have to in here so just right before of this main Tech create um class top box show press Tab and here set style display none okay primarily I set none display none to this class next what will you will go to that app.js and in here we'll first here reset CSS display block to this class the class is Top Box share that the class you have created just now and set CSS here display and set it block okay at the same time we will set HTML to this class so here the test table is so let's write this channel in here in this class so first declare the class top box and then I assign align vertical middle class in the same times align at class profile dialog shoe press tab okay in this class first we are going to declare H1 tag and in this stack declare class Merchant top two okay then set text here leave meeting okay so this is the heading and then we'll declare an HR Tech HR horizontal row and then declare a div tag so basically declare a class call leave cancer action with display Flex and justify content with align item Center so Center and then set also with 100 and then press tab okay then in this class we are going to set to button first one is for leaf and then second one is for cancel for two options so here set an anchor attack with hypertext reference here it will be action dot HTML okay and in this anchor tag will declare button tag and then in this button tag create declare class called leave action then also declares BTN bootstrap class with BTN Danger to give a button background red and then set margin to write five okay then set button text leave okay then declare here just right after this anchor type declare here at button tag with class call call can selection then set also BTN Buddhist strip class with BTN with the BTN secondary or gray color to the text press Tab and right to button text cancel okay that's it now cut it from here this complete HTML code then go to the browser and in textfixer.com press the code here and then click click compress HTML you will get the HTML without what is best just copy it and pest in this HTML area here okay we need to first set this double inverted to single inverted because we have declared class in this HTML in double inverted okay so let's check it controller save it now go to the browser refresh it press ok now click on this uh live meeting button here you can see the leaf meeting button and just right here it should be in top of the page now it is in here because we need to set CSS to this top box class we need to set some CSA property so copy this top box and go to the style.css at the bottom here declare CSS property to this stop box first the first chair declared background color RGB RGB 14 6 and 6. okay then set position fixed at the same time set with 30 percent so duplicate it for height also thirty percent then set top 20.5 percent at the same time set left 30 35.5 percent and then set also display block with box shadow 0 x 0 y 5 pixel blur and set color block or you can set it here white because the background is black here and then border radius 10 pixel with Z index 999 because you need to set it top and also set color white and set a back setup border 2 pixels solid white save it now refresh it give the user ID press enter and then click on this leave meeting button and here you can see that leave or cancel the meeting okay here you can see the heading leave meeting so I need to change this hat tag so in here in this text here set Style text align centers and set color White save it now refresh it okay click on this slip meeting button and here you can see the leaf meeting dialog box either you can click on this leap button or cancel it okay so you can see when I click on the leaf button it redirects to us to action.html page okay [Music] now we are going to create functional group for cancel button and if we click outside of this dialog box then this dialog box should have to be disappeared so let's go to the app.js so right after this code declare another code write document dot here it will be Mouse up Mouse up event and you will check the function and we'll pass the parameter e here and then run the function so here declare first variable container is equal to new array so here we declare an array object and then we'll push the top box show class to this array so the clearcontainers dot push we are going to you're using JavaScript push method to push a deep class to this array so the class is the top box shell okay then we're going to use each Loop dollar dot each and here we'll pass the container variable run the function will pass key value to this function here in color braces you will set if value dot is Target e dot Target if the target is not clicked in this case if the value is not true in this target and also check same with value dot has the E dot Target dot length is equal to 0 then we'll run it that means we make the value empty dot empty okay so here if value dot is e-target is not set that means false and the below and the target e Target length is zero that means if you don't click on the top box show or click outside of this stop Box Row then we'll make the value empty that means you are going to make Mt whatever in this top box show D have okay basically we are going to empty the deep in the stop box so we have passed this HTML and this will uh this code will empty this remove this code from this Dropbox show okay if we click outside of this tip so you need to rectify this remove this parenthesis from here it will be e dot Target in here okay that's fine next we're going to create functionality if we click on this cancel button so here you can see the class call can selection copy it and in here we will first search in the documents that there is any kinds of click on this class then we will run the function where we'll make the top box or show class empty top box show dot HTML is empty we just make this disappear all this code from the top box view when we click on this call cancel button okay so let's check it save it go to the browser refresh it okay press ok now I click on this leave meeting icon and here you can see if we click on this cancel this dialog box should have to be disappeared yes it's working fine now again click on it if you click outside of this dialog box then it should have to be also disappeared like this you can see we finally click outside of this div the div is disappearing okay so our code is working absolutely fine so in the next class we are going to create functionality to show meeting details okay so we'll do it in the next guys in this class we are going to create functionality to show meeting details also later we'll create file sharing option in this meeting details area Okay so let's go to the editor and in the index.html you'll see here bottom left class under the G bottom parent class okay so here's the bottom left so just right above this meeting details this meeting details meeting details heading area we are going to declare another div tag remember this is under bottom left class so here we are going to declare first class is this G details Google details with the class border with borders success to set green color to the Border and also set margin bottom to press Tab and here all the details when I click on this meeting details button then all the details will be shown in this G details class area okay so here we are going to divide this G details class into two part first one is for first one is for heading and second one is for details so declare variable G details heading the step and in this class we are going to declare another class display Flex justify content between also align items center with a class border bottom okay so this is the G details heading and next create class for the details adding share wrap so basically in this class we are going to show details of this G details heading option this kilo hi and we click on the details then it will show the details of the meeting and when it will click on the attachment heading then it will display the attachment option available file in this area Okay so you'll see it later next what we will do here so first here declare a spin tag with materials icons material icons and set Google material icon is errors and then you're going to declare another span Tech I reset an inline style margin top minus 5 pixel okay and right here the text details okay so here we are going to show this icon in another class just called cut it and declare another class here in G details heading into two okay press Tab and in this class we're going to paste this icon and the text in details and here we'll set few other classes display flags with align item Center and then cursive pointer okay next here just duplicate it and it will be the details heading attachment here we'll be heading for attachment file attachment and here we'll use icon Google icon for attachment and then the text will be same is attachment save it now go to the browser refresh it now you can see here this details energy and attachment so we're going to fix this this will be shown in this top area let's go to the editor now move to the style.css file here we'll declare class for bottom left so here you can see that uh bottom left class I can just copy it and in a standard CSS get the class first and then set property position relative because we need to set position absolute to the G details child class of this bottom left and then it is set here padding 5 pixel okay next we'll get the G details class okay copy it and but dot Geo details class and then that here first position absolute since you can see that parent class is relative here this parents class this is generally dependency details class is absolute here and then set with 30 width a review with and then set background color White and then margin top minus 135 and then give a colored black also give a border radius 5 pixel and then give a padding five adding 5 pixel save it and then get this G not now okay fine let's check in the browser refresh it agreed okay now you can see here it is moved to the top from 135 pixel from the bottom okay so let's add go to the details and attachment go to the editor now go to the G details heading show wrap and in this class we will divide this class into two part first one is for GE details adding shell okay press Tab and then here so first declaren div and right here joining info okay set in line of style in this div and here set font weight 600 or you can set bootstrap correspond weight Bolt and then set color Gray okay next here declared a div and Status style here cursor pointers and in this div we are going to declare a span tag spam and in this pentagonal declare class material icon okay and then set also Style font size 14 pixel and then set my Google material icon content underscore copy this is for copying link next you will declare another spin tag and this is for joining info so set a class here copy unrest code info and also set bootstrap class font wait bold and set text here copy joining info okay and then right after this copy joining in for text we'll declare another span tag and in this Sprint tank we'll write link copied okay if you click on this copy join info then the link will be copied using JavaScript we will create it later right now we when we click on this copy join info then this link copied text will be displayed at the beginning of loading we will set a style to display none first you want to show this text it will be showed to the link copy text will be showed how in user click on the copy joining info and then info will be copied and then this text will be shown so background color will be uh Aqua Marine okay and then give a bordered radius 5 pixel okay save it now go to the style.css uh take this class the details heading shift copy it and question here and set font size 14 pixel and also set pairing left 10 pixel save it now go to the browser refresh it now here you can see joining info then copy joining info so here just right under this joining info text there will be the URL of the meeting that means this okay we'll add this URL in this place by using JavaScript in letter and then here just right after this code here we'll declare a variable URL and here we'll set window dot location dot href okay so here we'll set in the meeting URL class dot mating underscore URL we'll set text the URL okay so basically just set this URL as text in this meeting URL class now so this is not going to what cause we are not calling this code while we load the app.js that's why you're going to we need to paste this code in a function like this event handling function because when even handling function is called then this code also will be executed save it now go to the browser refresh it press ok now here you can see the URL okay now when you click on the copy joining info then this text should have to be copied in the clipboard and and should have to be displayed a text link copied okay so this is what we are going to create right now now go to the editor and right here First Source in the document dot on click click so whenever you click on the copy underscore info I hope this it is right so here's the copy info class copy it and paste in here I normally click on on this copying for class then we'll run the function so here first you will declare a variable dollar temporary div is equal to input field then we'll append this temporary div to the body so declare this body as select selector and then append what will happen we will append the temp and temporary input field and then what we are going to do we are going to use this temp to set the value so here the value is dollar so we will get the a text from the meeting URL meeting underscore URL dot text you can see here the text okay we'll get the text and then we'll use select method to select the text okay and then we are going to use document.execute command copy document Dot execute command command is copy okay and then remove the temp dot remove and then we will show the text link copied so we have not set any class here yet so set here a class link confirmation and also set font weight bold with padding left one or you can say only pairing one okay here in in this app.js here we will get the class link confirmation and we'll make it show because you can see here we make it display none okay now we are going to make it show then we'll use set timeout function to make it hide after three seconds so you set timeout function and then here we'll execute the hide method to this dot link confirmation dot height okay and then we will set here the duration is 3000 millisecond that means three seconds okay remove this double inverted because this dollar temp is a variable fine save it and refresh it was already set and then click on copy joining info link copied okay then go to that another tab press Ctrl V now here you can see the copied Link in here so we have copied link using clicking by this copy joining info okay so the details part we have done so far it's in the next class we are going to work with attachment and it is one of the important for our project so we'll do to the next [Music] hello everyone in this class we are going to create a request full screen functionality basically when a user click on this double click on the video then this video should have to be in full screen in order to show it in clearly as we have written code to set video with 19228 1080 that means in full HD so it will be better if you make it in full screen then every single word and every single details will be shown very well from the video so let's go to the editor and app dot yes so just write in the event handling function so here at the bottom in this event handling function we are going to write code to make it fully screen so First Source in deep users deep users ID so here's the Deep users you'll see in the meeting container you can see that this diffuser IDs under this parent ID we declared the video tag okay did you see this so here we are going to search in diffusers so what we are going to search we are going to search when there is a double click on this on the video tag so right here double click so double click is an event on on method we are going to start sending double click on the video tag then we will run the function we are basically using request fully screen method so here write this Dot request fully screen method that's it this will make fully screen the video okay let's refresh it and set your hobby okay now make the video cam on here you can see now double click on this video tag and here you can see that our video has now running in full screen okay you you can see the text in much better way okay since take a look on the corner you will see this so we have created the system to watch video in full screen okay just double click on the video tag and to get out from the screen full screen also double click on the screen full screen then it will be replaced into in a small size okay so that's it for now foreign [Music] in this class we are going to create system to switch details to attachment okay so let's go to the editor write JavaScript code to switch details to attachment tab so here you can see that this is the detail step and this is the uh the attachment tab okay so when we click on this G details heading attachment tab that means this this tab then there should be details of this attachment basically an input field and all the uploaded details in this place okay so go to editor and in here just you can see that this is the so this is the meeting details showing in this the details heading show now just right after this uh deep tag we are going to create another div with class G details heading show wrap show attachment press Tab and set here Style display none and then set position related okay and in this class we are going to declare another class is basically we'll divide this G detail setting show attachment in two part first one is for show attached file press step and duplicate it and second one is for upload a Touch file okay so this show address file will display the file that you have uploaded to the meeting and next this deep will hold the form code to upload a file okay so declare a form tag with class display center also with an ID upload form okay let's press Tab and remove this action from here set ink type multipart form data okay and also set preference upload form okay at the same time set inline Style justify content space between okay and here we are going to divide this form into two div first one is for custom pile class first tab set error Style Flex basis 79 percent okay and in this div we are going to set input tag let's type is file type because we're going to upload five and the class is custom file input okay IDs custom file and name is image file okay next we'll create level tag for this input field and set class here custom file level okay first step here we'll set for this input ID so here the for will be custom file and then set a text here for this input field is choose file okay fine next we will create another div to share button okay so declare class share button wrap press Tab and set here button with class with step BTN BTN primary for background then set BTN SN small size BTN and then set a custom class share a touch press Tab and here set Style Flex basis 19 percent padding 6 pixel top and bottom and 20 pixel left and right okay that's it save it go to the browser refresh the page with new user [Music] okay then meeting details here we have not created to switch tab so let's go to the editor and in here you can see this G details heading there's two tab button first one is details and then second one is attachment so here in the pattern deep we will set padding bottom one because you can see here there's basically no padding under this tab there's no padding so that's why we have set padding one so just refresh it okay now you can see here there's padding under this details and error attachment now here in the app.js only click on the G detail heading attachment then we are going to hide the meeting details and show the attachment details okay so to get the meeting details submitting details is this this g g details adding sugar this is the meeting details and this G details heading show attachment is for attachment details so go to the app.js and in here select the class and then use side method to hide that div and at the same time show the class G details adding screw attachment foreign do for the meeting details tab so here G heading on the place of attachment it will be G details heading details detail here is the class G hiding detail heading so whenever you click on this uh meeting details tab this tab then this info should have to be appeared and instead of attachment details okay so here we got the class and we will show the the details heading here and we'll hide these details heading show attachment okay save it now go to the browser refresh it click on this meeting details and yeah when I click on the attachment you can see that and a form but there's no text because you have not set any text to the share button so right here share save it refresh it now click on it you can see here the input field and the share button okay you should set a padding to the top so let's inspect and here in the form check we are going to set class adding top padding top one now it's look better so here you can see there's a lot of space we want to also hide this space so go to the editor and in the G details area so here is the G details this is the this contains the complete area of this meeting details show so complete this area we are going to set a minimum height is 20 view height okay save it now refresh it click on the submitting details now you can see it is showing minimum 20 view height click on this attachment it is providing these lines serverless right here 19.5 percent save it refresh it now it looks better okay now it's working fine but we can also do something like this so I'm going to click on this participant details then we set a background color okay now we are going to do also for this one so go to the editor in app.js right here in this this refers to this class okay we are going to set CSS background apps not CSS we are going to add class active on the other hand we will remove active class from this G details heading okay copy it and select the class first and then is remove class this active okay we'll do same for this just copy and paste in here and here this one will be this digital setting attachment we will remove active plus from this class G details heading attachment okay now it will work fine save it go to the editor refresh it now click on meeting details click on details now here you can see the background click on attachment you'll see the color background okay now we got it so one thing you need to do finally click outside of this uh div we want this div should have to be hidden Okay so in order to do this go to the editor and as you did for this top box show we are going to do the same just duplicate it and here we'll push the G details class G details okay this G details class this G details class hold the complete this area Okay so here what we're going to do we are going to hide this class okay so right here height instead of make it empty so if you click outside of this G details it will be hide so let's check it mating details click on outside now you can see it is hiding you can also hide by using this oops it's not working because this meeting is also out of this div this always better to hide the Deep binary click outside of the area Okay instead of using a slight toggle to this meeting details we are going to use slide up the class so here's the code slide toggle we are going to use slide up save it now refresh it click on it it will slide down save it refresh it now check it okay it's working fine now if you click outside of this div it will hide okay now let's add here uh time 300 millisecond we're going to want to vanish it just a fraction of time we are going to giving it a 300 millisecond time to hide this G details div so click on it it's fine now click outside it is getting down to this meeting details button it looks quite fine so we want to do exactly same for this one if we click outside of this meeting details this or this should have to be disappeared okay you can see one thing here that's You Can Count an issue when we are in this chat then this chat is not showing the background of this chat is not showing active background that means there's no background right now go to the editor let's fix this so here you see that in this uh top left participant wrap when we click on this icon then this mid participant then the background of this participant should have to be activate so here we are going to add class to the button because the button is this uh people heading you're going to add class to this people heading so the class name is this people heading okay on a click top left participant wrap on the other hands we'll remove class from chat heading okay copy it and paste in here and sets this chat heading as class because if there is a any kinds of active class in this chat heading we don't we want to remove this class otherwise it will create an issue just copied and paste same for the top left chat trap and paste in here this uh it will be removed class and the remove plus will be at class okay and at the same time what we're going to do we are going to uh do same as we did for the G details you are going to do same for this complete area whenever we click outside of this uh this details area then we also want to hide this area so let's check and inspect to get the areas class so it is you can see here this is the class is the right details wrap okay that holds the complete area of this details okay so go to the editor and just duplicate this one and here put the class GI details wrap okay now if we click outside of this G right digital swap then this wrap also will be hidden refreshit Okay now click on this participant icon you can see that this participants now have a background now click outside of this area you can see now it's hidden it's cool right now click on this chat you can see this chat is now is a has a background active class and if you click outside of this div you can see it's now hidden okay it looks fine that's okay foreign [Music] guys in this class we are going to create the functionality to share file in our project so in order to create this file sharing option first we are going to set up our environment so here what we'll do first go to the terminal in the root folder okay and here we will first download Express File upload package so right npm installed Express File upload press enter so by using this Express File upload package we are going to move file to the local computer to Roots folder okay so here you can see in the package.json here you can see that Express File upload here is a new module so this is what we need to move file from users computer to project root folder that means server okay so here you can see in the index.html you can see that in file attachment code here is the input field and here's the share button okay so we will exactly make action how an user click on this share let us button to run the code npm start so here you can see till the time you're using uh npm start one better option we can do is to use node mon so from the beginning I have not used this one this is because you need to know how into rerun the server basically when code changes in the server or you update any code or added any code to the server you need to restart the server okay so here we are going to do is to install node mon so right here npm install Dash save Dash Dev and then write the module name not mon press enter now it will install as Dev dependencies okay here you can see that an old mode okay so in order to run node mode you need to set here the instead of note you need to write it node mode server save it now it will take care of your server.js and there's a new code or update of code in the server.js it will automatically rerun the server so you just need to right here and you'll start press enter you can see listening on Port 3000 suppose from I am going to change uh quote in the server press enter you can see that every time when I change anything the server vram you can see this is according for node mode okay now we don't need to restart server every time Norman will take care of the server now go to the app.js and at the bottom in here right document dot on click so whenever click on the share it does class here it is copy it Ctrl C and paste in here then run the function okay so first here we'll stop form to be submitted to pass here event e and here write e dot prevent default okay run the function first and then we'll get the file from the input field so input field uh ID is this custom file copied and paste in here in the jQuery selector area so first select the ID so it's an ID and then get the file using prop JavaScript function here is set the files and get the zeroth index okay and store it in a variable call attachment underscore image attach image okay next declare a form data variable which will where we will create a form data object okay then will append image and all the information to the form data so first we will attach image so you write here form data dot append so we append this so when we want to add any data to the form data we use append dot append and here we set a property name like we said event name for socket.ru so here we will write zip file this is the custom name we made here to identify the attached image okay next in form data we'll also set a meeting ID so here write append right meeting underscore ID so we set meeting ID variable to this meeting ID property okay later we can identify this meeting ID using this meeting ID variable or property okay next we are going to add inform data and append so basically we are adding username so username or you can say user ID whatever you can see here we will add the basically username is the is this user ID okay so let's check first whether you're getting the user ID or not so right alert uh user underscore ID we are testing whether we are getting this user ID in this block or not so refresh it now let us click on share you can see you're getting these ready fine now first console the form data here to check that is formed exactly sent or not then we'll use jQuery dot address method so here as you know that first you need to set URL here's URL will be based underscore URL plus concatenate pass with the URL string attach attach image okay we have not created this base URL yet so copy it and pressed in Here regular variable base URL equal to here base 0 will be in window dot location dot origin okay so here's the base URL like www.facebook.com image something like this so we are going to exactly make a post request so here type will be post okay then you're sending data is this form data okay next the content type is false and the process that is also false okay next here we'll use success callback so write success function here we'll pause the response parameter and here we will console log the response okay if it is not getting sucked it is if it doesn't get success then you'll use this error callback and here we also run the function and we'll tell you that there's an error so I simply write console.log errors okay that's it so we have sent this form data using post request to this URL now we will get this URL in server using Express post method so right the right at the bottom use app Dot post so here you can see that we have added this Express ion to this app variable and here you're using post method to this app you get the data from post request so here will you will write a touch image okay oops it is copy and where is server.js okay then here we will run the function and then your pass request and response parameter and here we'll first declare variable data and you will get the body from the request so request basically uh hold the hold the body or data which you will send Using as X methods so here is the data form data form data is in the body okay in the request and next what we will do we will get the image file so write image file using this request dot files dot zip file okay so you can access a file attribute using this request files and then zip file so here you have sent you can see that the attachment image this email image we have sent using this ZIP file property so here we have got this request files G5 next what you can do is to console the image name console.log that image file okay next here we are going to use FS module core node.js module first we will we are going to declare a variable for directory is equal to so here directory will be public underscore attachment that you have not created the folder yet so just write in the public folder click right button of the mouse and click on new folder here we'll create a folder name attachment here all the attached file will be saved okay and next we'll concatenate with the meeting ID so here every file will be stored in a in a folder where the name of the folder will be meeting ID and the meeting ID folder name will be available in this in this attachment folder that's why you are going to add data dot meeting underscore ID as a folder name plus we are going to use this slash there we'll add the file here we'll first check that if this directory is available then we are not going to do anything if this directory is not available that means it's not exist then we are going to create this variable using not FS module so we'll check first if it's not set FS Dot exist sync so we will check the directory name if it is not exist then we'll we're going to create the module here is FS make directory sync okay we'll pause the directory okay we have not called this FS module yet so copied and go to the top here constant FS is equal to recover FS okay I have got it so here you can see that this public folder this public folder uh and the attachment folder the attachment folder but the meeting ID folder have not created yet the meeting ID is this meeting right exactly so there will be a folder available with this meeting ID name under this attachment folder when we upload a file okay using this FS Mac directory sync directory whatever directory we have set in here okay now next what you will do we'll use MB function to send a file from user client computer 2 or project root folder that means in server so right image file dot MV that means move so here we are going to use public slash attachment folder slash plus a release data dot meeting ID and then you're also concatenate with the Slash and then at the end there will be image name so here you will write image file dot we can access name from image file using dot name okay and then we will run the function so set error as parameter and then here we will check if error is true then we are going to console .log could not upload the image file so here's the errors Plus a comma the errors okay seriously set else we will console MSS console log image file successfully uploaded okay now we are going to use this MB function to this image file by using uh Express File update that we have not yet loaded in this a library so here we are going to load this Express first so so declare constant here name is file upload is equal to recover on the module name Express File upload okay so this will return a function so here we are going to use method on Express library to as a parameter this file uploads so copied and just right before this app dot post here you'll use app.use and we'll pause the file upload as function okay save it let's let's go to the editor and refresh it okay let's check it browse so here suppose open this 5 PNG but you can see that there is no name showing in here so in order to show our choose file name here let's go to the editor and app.js just right before this we're going to duplicate it and here in instead of click here we're going to use on change and class name is this the custom file um custom file input class copied and paste in here so when there's a change in this input field then we are going to run a function or I will declare first variable file name where we are going to store this dot value dot erasing split to split using this backslash and then use pop to get file name exact file name okay so this will get the file name from absolute image path that will that we are going to choose from computer folder and then we are going to use this dot siblings and we will pass here the level so the level class is this custom file level copy it and paste in here and we'll use add class to add class selected and then you'll set HTML as this file name okay next go to the browser refresh it which they used already okay and then select a file suppose 5.png open you can see that the file name is in here now click on share let's check for any error in Chrome devtool yes there's no error right in here so go to the editor we should check the adjustment folder yes you can see that our image have just moved to the attachment folder with a new folder name that is the same as meeting ID so we we can identify every single file using this folder name okay so we have successfully moved file from client computer to our server root folder okay so in the next class what we will do here we will show the uploaded file in this area and we also let other know in a particular meeting ID that individual user have just share a file as attachment okay so on this what exactly we are going to do next class we will exactly use socket.io to let others know about the attachment okay so we'll do it in the next so guys in the previous class we have successfully moved file from client computer to server root folder project root folder here you can see the log um that uh the name is 5.png this is the data and here's the size here is the encoding 7 bit and all other information mem type is image slash PNG md5 is this and then here you can see that's confirmation image file successfully uploaded and this is from the server.js here you can see image file successfully uploaded so I hope you understand it now go to the app.js in order to let other users know for a particular meeting that the user have sent an attachment so we're going to use let other user inform by using socket.io so just right after this Ajax call we are going to declare variable attach file area I will store the class document without query selector so the class name is this we don't need to open it so the class name is this show address file where we are going to show the file letters attached file so just copy it and paste in here okay in this class we are going to show all that as file for every single user in a meeting so declare variable attach file name so here we are going to get the blue from Custom file I think the input ID name custom file copied and paste in here ID custom file and then we'll get the value from the input field then we will split then we'll split according to this backslash and then we'll use pop so this will get the exact uh at file name from an absolute file path okay file path is something like this let's take a look on it so suppose we are going to open this 14.png in browser open with Google Chrome and here you can see that this is the absolute file path the file is showing from the user's computer that means local computer here we can get this only this 14. PNG file name by using this first release will split the code okay by using this split function and we'll pass this double back slash okay then we use pop to get the file name okay and then what you will do here we declare variable attach file path okay so here the file both will be the public slash attachment slash here it will be first meeting ID oops and then concatenate with the Slash and then set the file name it will be attached file name and then complete the inverted we don't need to do this it will be completed okay now we are going to set inner HTML to this attached file area variable to show the send file information to the sender's attachment details area okay basically who sent the image or file there he can see that Send image and we are going to write code to show this for senders attachment area so we are going to use ethosphere dot in our HTML and here you use plus SQL to append okay so we are going to use first declarative div and this div will set class uh class name is left align okay and then set a style here so style is first display Flex and then set a line items Center okay then close it here we are going to set an image in this Stack The Source will be the assets this is basically the user's image so right here public slash assets slash Images slash other dot jpg okay then set here a style equal to height 40 pixel then set with 40 pixel okay and then set class here caller image with another plus Circle okay then we're going to create another deep set a style here and wait or 600 that means bold set also margin uh zero top and bottom and left five pixel left and right five pixel and then close the Deep here we'll concatenate the user understory ID and then we are going to close the deep and here we'll use this colon to if this color will be add with the name of the user then we're going to declare a div in this div we are going to declare anchor tag with style color and here we are going to set color is Hash 007 BFF okay and then set here href hypertext reference equal to right here Plus to concatenate and here we'll write file attach file path okay this is the down downloadable link and at the same time we will write here the attribute download that means this uh data will be downloaded that means this file from this attached file path will be downloaded and then we'll set the file name here attach file name okay we just concatenate with this string let's close the anchor tag and also close the div tag plus previous div and then declare this black tag to see another attached file just right under previous attached file okay at the same time we will make level a text empty so declare here level dot here's the class level classes this custom file level copied and paste in here and set text empty okay this will add the file name and the file sender name for file sender okay we suppose you send a file and you you want to see you want to see which file you have sent and then you can see in this then you can see in the file attachment area that the particular file has just added okay now it is time to send the file details in the server using socket.mit function to let others know about the file attachment so here write socket dot emit we're going to use the custom event file transfer to other okay and then you're going to set data property first one is suppose username is the user underscore ID and then meeting ID is the meeting underscore ID and then Set uh file path is the attach file pod okay and let's set file name and the value of the file name property is file attach file name this one okay I've got it now this four data will be accessed by other user so go to the server we have just saved it now that code are arranged now go to the server.js and right after this sent message we are going to write code for file transfer here we will use socket dot on method and you will get the send data from app.js using this file transfer to other event copied and paste in here then here we'll write the function and we'll pass you can say file or misses whatever it is then we'll here we'll console log the message next we'll use declare a variable user object so here we don't need to do anything we are going to exactly duplicate this send message code to send file the technique is just same duplicate it the the difference will be the difference will be just this data okay so go to the app.js just simply copy this data okay and in server.js just pressed in here so here just uh remove it just remove all this dot colon and other data so here's the here are the four data we have get from the app.js this for data okay so you just uh get these four data here and we can access this data by using this message so here it will be message dot username okay and a story in it in a property variable username also okay and do it same for this meeting ID just simply set here message and stir in the meeting ID variable okay set comma here and also the file path here file particle to message dot the file pod and the file name is exactly colon message dot dot file name set comma here okay so have you got it so this four using the meeting ID file both and file name so here's this username meeting ID false and file name using this message variable we get all this information that we have sent from the app.js and we get it in this property variable so here's these in the meeting ID file path and file name now here it will be show file message now save it okay let's go to the app.js in the server event handling function you can see here at the top event process for signaling server in this function we exactly write all the code that basically handles a server event so anywhere in this function we will write socket dot on we'll use the show file message event that we have sent from the server.js this show file message event using this emit function here you will get the data using this same event and here we pass a function and data is parameter and here you'll first you will declare variable time to show exact time and declare new data object to this time okay then regular variable L time is equal to time Dot to local string pass the language in US and then set the parameter here our numeric and then minute also set numeric then set 12 hour format to the hour to all the power format true okay then we'll get the variable exact variable like we did before for showing file for the others okay it's right here variable attached file area same variable and here we will get the class using queries selectory selector you can use also jQuery selector to select a class so yeah right dot show I think it is showed us file so here it is show attached file just copied and paste in here variable name it differently let's name it for other you just name it differently plus we have already declared this variable let us file area but we have not declared in global view that's where it shouldn't create an issue but we have did it for to avoid any collation so here we are going to use inner HTML to set HTML to this class it's class equal to to add HTML in it so HTML will be exactly this is in 388 line so the tax exactly will be where is this this okay just copy it and go to the 388 line so here it is just pressed in this area okay just change it it will be data dot user ID I think let's check it it's username oops so it will be data username and then second one will be data Dot uh what is it it is uh file path only copied and paste in here and the third one is attached file name it will be only file name copy and paste in here data dot file name so here it will be this to set the bottom where we have send the data here is the as X method and just write after read we have sent here all this data okay using file transfer to others event so go to the server.js paste in here send message to this one this one is for file transfer to other and now save it now go to the browser refresh it one refresh it set user ID to so you can see this both user meeting ID is same for one and two and for three this one is three instead of two okay that means it's it's in different meeting so let's share the file go to the attachment click on browse get a image 7.png click on share you can see the shared file now go to the user two and click on the attachment and in here you can see that once share this 7 PNG okay and if you go to the user threes attachment you will not see the file because we have sent the attachment or file only for the this meeting ID okay so you have successfully created it [Music] hello everyone in this class we are going to design recording button and we will toggle the recording button to show in our option icon so just first run the server and PM start and then go to the browser here enter in a meeting okay so here you can see this three vertical dot the meeting button will be available in this option area so let's find out the selector in Google dab tools so here you can see this option icon okay so copy it and go to the editor control F to Source the option icon and here you can see okay so just right above this option icon we are going to create HTML for recording button declare a cross recording shoe press tab rest of the part we are going to write in browser so refresh it and here is the option icon inspect so here you can see this recording show fine yeah right editor HTML okay and this recording show class we are going to write code for button so first declare a button okay and close the button and in this button tag we are going to write text start recording now here we are going to add some bootstrap class and custom class to identify the div so declare here clause and first one is the BT and bootstrap class and I will give a background BTN dark background color and then give it text color text Danger okay also declare a custom class start record Okay now click outside of this div here fine now in this record show we are going to add some CSS so here you can see the button so this button should have to be located just right before this option icon in here so first click on this plus icon here you can see there's two of it okay fine this doesn't matter so first declare position absolute now you can see that the button now in center and right here margin bottom 1 10 pixel and then set width 180 pixel okay fine now get this code from here go to the editor and paste in here on the recording show okay save it and then take this CSS property on the recording show clause copy it and passed in style.css fine now go to the app.js and move to the bottom just right before this return we will first starts and you click on the option icon on here okay so right here document dot on method so it will be event will be click and we are going to start click on this option icon class and run the function and what we are going to do exactly we are going to toggle the recording Shield class so right here recording share dot toggle and I will give it 300 millisecond so the recording shows this the recording show class let's go to the standard CSS in recording show you're going to use display property and it will be none save it now this recording button will be hidden it will be shown when you click on the option icon refresh it and now it is hidden this is for display non property now click on it and now you can see this is start recording here you can see a vertical scroll bar this is because we have set width for it now go to the style.css here remove this weight and give a 132 pixel to margin bottom okay fine refresh it click on the option icon okay and again click on it you can see on 300 millisecond it is the recording show div is toggling okay so in the next class we are going to write JavaScript code to create recording system for our project hello everyone in this class we are going to write code to create the functionality to record a meeting okay so we are going to create the recording system where the entire screen will be recorded with remote users voice okay and in app.js right in here first what we'll do duplicate it and here you can see the class name is restart record so whenever you click on this start recording button then we are going to write code here so just specify the class start record and then whenever you click on the start record first what you will do we'll remove and add some classes in this div so right here first get the div using these keywords and here we'll first remove all the classes and then we'll add courses like the class will be first one will be a stop record and then second one is BTN danger to give a background color red and then set a text color text dark okay and then you'll set also text to this button is stop recording okay next we'll run a function function name is start recording this is the function now we're going to create this function it will be an async function start recording okay so here file first you will get the screen Stream So declare a variable constant declare a variable constant screen stream is equal to a weight so it will be a function where function will reach on the stream capture the screen it's in function we will create it letter and then we'll create another variable for audio so we write audio stream it is also same I read capture audio okay and then we'll create new media Stream New Media stream and here we'll pass the trucks from the screen and audio stream so right first screen stream dot get trucks okay comma and then do same for audio stream dot get trucks so what tracks exactly we are going to get in here so that's why you're going to create this function Just Right Above This start recording function so here it's the right here sync function function name is this capture screen okay and in this parameter we are going to pass the constraint so here it will be media constraints is equal to set video true that means video capturing is true and here we are going to declare a variable constrained the screen stream is equal to a weight Navigator Dot media devices dot get display media and here we'll pass the parameter media constraints okay and then we'll return the screen stream variable to use it in our start recording function so right here is screen stream okay so like this you are going to create another function duplicate it and it will be this capture video okay our constraint will be video false and Oda true and here it will be audio stream audio stream and it will be get user media okay and here we are going to return the audio stream okay I hope you got it so here we have declared this media stream object with this screen stream get trucks and audio stream get trucks function here will store this media stream in a variable variable is constant stream okay so what we'll do now we will pass this stream as parameter for media recorder okay so declare a variable media recorder so we need to declare this in a global space so just write above the function here we will declare the variable media recorder I get to access it from any error of the file so here will declare new media recorder object media recorder and we'll pause this stream as parameter for this media recorder so while we store media recorder object to this media recorder variable then we can use media recorder under the available media recorder start and media recorder stop function our property okay so right you're going to write here media recorder door to start this will start recording the media that we have sent as parameter in here so the stream is tracks from screen that means it will record a stream with the audio okay next we'll use media recorder on a stop function basically basically it will apply it on midi recorder resist stops um stop it's in function and we'll pass parameter here okay so before stop our media recorder we need to also confirm that media recorder recorded data it has stored in a array variable okay so right above here create a array variable chunks is equal to an array empty array okay now in here and just write after this on a stop method we will declare media recorder dot on data available is equal to function here we'll pass the parameter E Event and then we'll push in this chunks array variable chunks dot push whatever will push will push the data and that I will get from this event parameter so it will be e dot data now on media recorder starts is recording then that I will be stored in this chunks variable irrevariable then and at the end of the recording this on a stop method will be applied to the media recorder objects here at that time we are going to load all the chunks in a blob and then create a downloadable link and also run the click function on a particular download link and the file will be downloaded so first here we are going to stop the track in this stream okay so that's we are going to use stream dot get tracks we'll first get the talks and then we use for each Loop query pass parameters track and then we'll stop the track using desktop method okay I hope you got it so we have just stopped the truck in the Stream on a stop method from media recorder object then we'll declare a variable blob is equal to so here we'll create a new blob and we'll pass the data so that data is this chunk copied and question here this is the first parameter and the second one is the type so here we're going to set type is this video slash web M so it's comfortably a lower size file in webm with high quality okay fine next here we are going to create an URL Diggler constraint here is equal to window dot URL dot create object URL and here we'll pass the blob to create an object URL okay and we'll store in this URL variable next we'll create an element of anchor text so declare variable constant a is equal to document dot create element a so it will create an anchor tag and then we'll set a style to this anchor tag we don't want to show this that's why we are going to use display property is equal to none and then we will set hypertext reference for this anchor it is URL okay then we set the download a DOT download property to the encode tag is equal to so here we need to get an clip name for this clip so declare a variable clip name is going to say here will prompt uh input field so right here prompt and here we write and touch and name for your recording extra Hawaiian user put a name for the recording then the name will be stored in this clip name variable and here you will use this clip name and then we'll concatenate with the webm extension okay and then we'll appendile the anchor Tech in body so right here document dot body dot happen child is so here we open child this anchor tag to the body okay and then we will use the click method on the anchor tag it will trigger the anchor and after the 100 millisecond we use the set timeout function so right here set timeout so here it will be 100 milliseconds and we pass here document dot body dot remove child a and then we will also set window URL Dot revoke objectival here on it so here when we click on the encode tag the file will be downloaded and then we remove child anchor tag from the body and also rebook object URL to make it clear so have you got it so this on a stop will not be fired on its own we need to make it fired when we click on media recorder stop function so that's why you are going to write code for this so just duplicate this code block we have written for the start record class when we click on the start record class the recording started by calling this start recording function and when you want to stop the recording then we will click on this stop record class here and we will just reverse the process it will be start record and then BTN danger will be beaten beaten dark to make background dark and then text will be Danger and here the text in the button will be start recording it will be stop okay so here in instead of start triggering we are going to use media recorder variable to stop the media recorder okay have you got it and we stop the media recorder then this on a stop robot method will be applied on the media recorder and this code block will be fired okay I have you got it so save it let's go to the browser okay now let's test it so refresh the page right here is ready okay and here you can see the start recording click on it and here you can see the S stop recording text with red background now here is the entire screen you want to record just click on it and then click on share okay post and debug okay there is an issue might be media recorder is not a Constructor so go to the editor and oops it will be capital letter M okay save it now go to the browser refresh it click on the start recording it's fine okay so it is recording right now fine now we are going to stop recording and see okay here it is enter a name for your recording let's write test recording then click ok and here you can see that test recording dot webm save it and here you can see the recorded file okay so it's cool I hope you got it so we have successfully created our recording system okay