How to build your own video conferencing platform using WebRTC

so uh hidden by when do you think we should start do you think we should wait for some more time um start now or we can wait another five minutes okay sure in the meantime we can talk more about american politics [Music] that's a never-ending conversation yeah uh i'm not sure how many people who have joined us now would be interested in that or not but i wouldn't be sir uh 27.7 for slack oh yeah that would be interesting that was a huge huge amount yeah that's that's that's the only trending topic on linkedin right now like everyone's going mad it's like it's as if they are paying for that so yeah it's it's a lot it's a huge amount i i wouldn't have like it surprised me i i wouldn't have expected slack to join salesforce it just as a brand it doesn't seem to be something that goes along with the slack brand my dollar signs speak pretty loudly though yeah yeah true and microsoft has its teams so they don't have any reason to consider it also and but again i think this sale has over overshadowed something which servicenow has bought there's this tiny news here and there that servicenow also has bought some some other company some other uh startups but the whole news is overshadowed by uh the salesforce news yeah that's a big news actually um a few weeks back heard about there's an open source um kind of i don't know if how much of an alternative it is to slack but it's called uh i think it's called rocket chat you know it's an interesting like rocket shop quite popular oh yeah okay it's interesting yeah because um i don't know like i just like slack is like pretty dang expensive yeah it does like yeah like i work at like a pretty small company and uh like we just can't you know we just can't justify the cost of slack it's just so much money and uh the interesting like to see like what it would take to just like you know stand up your own instance of rocket chat i've seen i've seen some companies do that with rocket chat yeah and other options as well i've seen some companies just go with something like discord as well which is what we use as a community um yeah but yeah uh i've seen like uh so slack is supposed to be i mean it's designed to be for small teams but uh it's also the whole uh that chatting kind of instant communication uh market has been saturated as well this there's a lot of options available today uh yeah for team communications and stuff so at this point like it the slack has a sleek design and everything but it's if you really kind of get into it there's not much of a difference if you go with slack or with some other alternative you know platform so yeah i think when they when they came out and like a few years ago they were like uh leading pretty much did they kind of completely disrupted the whole uh industry itself but today i don't think they have that kind of a position um uh on a side note uh this just this could be a new noob question but uh like how difficult it is to create a a very very scaled down not so fancy version of slack for any internal team it's actually very very straightforward uh to create your own group communication thing especially because there are so many open source options available today there is rocket jack as as i didn't mention this other options like rocket chat as well i think even matter most is open source i believe and they are doing pretty well there's multiple options available you can spin off your own thing using that and you can use it for your internal communication so enterprises relay on these sole properties because of the maintenance they get from the companies yeah i mean there's lots of reasons why uh every company has its own reasons uh for the platform they use uh some companies rely on uh they have adopted microsoft teams i've seen some companies smaller companies not bigger some smaller startups use discord as well for their communication uh some companies have built their own internal communication uh tool uh using some open source option so it depends on how much where they're willing to put in how much they're willing to invest in it uh what their uh you know what do they want out of it etc but today it's not that you should spin off your own version on internal chat honestly yeah as the famous meme goes uh just call up all your developers and uh give free pizza and tell it's a hackathon and they'll develop whatever they you want to get to be developed what would be interesting is to see the future of discord discord has done some amazing engineering with their platform and uh i'm still not sure how they really manage their expenses last i read they have some internal funds but there's not it's not clear how much funds they have how long they can operate um they have a huge user base and they're expanding most of them use nitro right nitro boost yeah i mean that's more recent but i don't think that is uh generating enough to sustain them so i'm not sure but they don't think they've raised any money either so and they have like more than 100 million users at this point at least so and they're expanding beyond gamer community they have a lot of other communities and groups even companies have started using discord so it would be interesting to see where they land how they how they kind of grow they also have their own internal video conferencing thing and screen sharing uh everything well should we go and get started yeah yeah we can get started i think now we have uh 17 people excluding the three of us around 14 15 i think few more people will be joining soon but uh i'm recording this session so we can put it up later for more people to watch as well cool all right well let's get started share your screen uh sorry give me one second oh crap sorry i'm having permissions problems it's okay gives this time to wait for more people yeah all right on meetup uh there were like more than one or two uh like 100 plus rsvps yes yes but the thing is that uh usually whatever the number might be you can expect at least 50 people to draw for drop off and on top of that it also depends on uh how long it got the rsvp a lot of people rsvp two weeks ago and then forget that the event is today so i've sent a reminder as well but uh i don't know let's see i think more people will be joining slowly but let's see all right can you see my screen yeah if you can see your screen yes yes cool so build your own video chat uh or more like webrtc how does it even work so that's we're going to talk about today and my name is hayden braxton and um yeah just as kind of an intro so um i we we met probably about two months ago it was a much smaller group probably i don't know it was like less than 10 of us and we kind of just did like a a survey of the different video related things you could do uh on the web in browsers uh these days and we didn't focus too much on webrtc but it seemed like that's where most of the interest was and so couple reached back out to me was okay you know it seemed like this was you know a lot of people are interested in in webrtc and you know how this whole video chat thing works and um came to another session so i was like okay and i'll admit at that point i was familiar with webrtc uh i'd done some research about whether or not it would meet a use case uh we had at uh at my job we ended up going with a simpler solution so um that being said i'm no webrtc expert um but i know enough to give us all kind of like a shallow dive into webrtc and to actually see how it works uh in the browser and actually you know enough that you can build it out get those peer-to-peer connections and the video connections um and hopefully that'll be a good starting point for you to go and do your own research and do your own learning uh so yeah and um this is me um i've been so i think most of everyone today is in hyderabad few from other places and over here i actually was uh i presented it in person at gooderplex um i guess that was in 2019 yeah and my wife is also from hyderabad so um maybe someday i'll be able to join you guys again in person um once uh once kova is gone whenever that happens but yes let's get started so webrtc rtc stands for real-time communication um and it's the technology or rather a it's a set of protocols mostly pre-existing protocols uh that power all the video conferencing applications that we know and love so the goal of webrtc is low latency peer-to-peer video audio and data communication the interesting thing about webrtc is you know the the big focus is obviously on on video conferencing but uh you can actually share just arbitrary data over webrtc as well um which could have a lot of interesting applications uh but the cool thing is it's not just for browsers so there are webrtc implementations or implementations of the webrtc client uh in all different languages and for different platforms so pretty much these days when you're using a video conferencing application even if it's outside of the browser right like any even zoom doesn't run in the browser or even it's if you're on a mobile device i think even embedded devices can support webrtc which is kind of interesting so it's it's pretty it's pretty it's pretty broad which is really neat so we are going to look at webrtc from the perspective of an internet browser but on different platforms it's really not that different from what we're gonna see today the only difference is the api for the client and uh maybe some different function calls and slightly different naming conventions but it's all essentially the same thing and it's not just for video chat they're it's really for real-time video right so so the obvious application for that is video chat but you could do a lot of other things with real-time video as well i think uh it'd be interesting to see i don't know like honestly i think there's some like untapped opportunity for like streaming and content creation that's actually powered by webrtc because since you don't have limitation of browser like it works on any browser works on any platform you could essentially use a webrtc for content creation on the fly which i think could be pretty cool um that's definitely a little advanced i haven't ventured down that but the other people have done kind of similar things but it's not really at this point it's not really a mainstream thing which i think is unfortunate i think i think it could be pretty cool to see other video uses for webrtc outside of video chat and it's not just for video like i mentioned you could use it for transferring files between between peers which is interesting or you know you can even build a chat application of webrtc i don't know how useful that would be itself uh because websockets meet that need pretty well but pretty much when you can share arbitrary data between users uh but especially when it's peer-to-peer and no server in between that could be pretty interesting so now the real question is well how does it actually work and uh so i've got a nice little flowchart prepared and we'll kind of step through that and see all the different moving pieces involved with webrtc uh but before before we we go through that does anyone have any initial questions no okay all right so we'll just get started so i'm going to run through this flowchart really fast and i'm not going to explain anything uh and then i'm going to step back and then walk through and actually explain what it means just so we can kind of get like like a preview of it and then actually break down everything so this is the world run version so we have two peers we have peer one and peer two and they would like to connect to each other over webrtc in this case we'll just assume it's video so the first thing we're gonna have is a signaling server and the first peer will send an sdp offer through the signaling server to the second peer and the second peer will send an sdp answer and from there they will perform ice candidate exchange over the signaling server communicate back and forth and then they can communicate over a there where they can use a stun server to communicate they'll ask the stun server what is their publicly reachable ip and port and other people do the same thing and then they can share that information with each other over the signaling server and establish pure connection that doesn't work they can use a turn server which actually does not appear to be a connection but it's just kind of like a a pass-through server uh that can be used to relay information uh between two peers when a peer-to-peer connection is not possible all right so that's a lot there's a mouthful a lot of acronyms and different things so we'll kind of go back to the beginning a little bit so let's come back to uh pier 1 and pier 2 and signaling server so the signaling server um is what's used to manage kind of initial communication between the two peers right so the goal is to establish a peer-to-peer connection but initially they have no idea they don't know anything about each other so we need something to for them to be able to like kind of talk to each other initially before they can just establish that direct connection the interesting thing is webrtc doesn't specify how you should build your signaling server it doesn't specify what technology or anything you should use except for it just says what messages it needs to be able to pass to the between the peers and so it's actually kind of neat because you can kind of do whatever you want uh the most kind of obvious solution for a signaling server is just to build uh something with websockets so the peers can just very easily connect to each other and that's that's what we're gonna do today and um but you can you could use other things you could use like i don't know like i think grpc i think that's what cool kids use use go and stuff like that and you could use you know carrier pigeons whatever you want to do so a webrtc connection all starts with what's called the offer and that's when uh the the first i mean someone's gotta start the connection so well so that's peer one and he's gonna send an offer message to peer 2 over the signaling server and what he's doing is he's sending this is using sdp which is the first of many important terms um oh man i can't oh okay here's all the important the important terms and i guess we'll have to go through the whole flowchart to get down here you know we'll just we'll just review this at the end we'll come back to that yeah so session uh sdp stands for assession description protocol and pretty much what that end actually interestingly uh stp predates webrtc as do most of the protocols we'll see today and we'll we'll see that webrtc actually doesn't really create much of its own but it just combines existing protocols in interesting ways to pull off these peer-to-peer connections so session description protocol kind of is like the way for peers to say hey i want to use this audio and video codec excuse me or to give some information about connectivity um and different things like that so we can actually uh inspect these messages as they they pass between the two peers and we'll do that uh when we get to the code and um yeah so after the offer sent to the peer the second peer peer 2 saves the offer sdp and then they create their own stp and send it back to the peer so they now know kind of the context they both have kind of a starting point yeah then once that initial like information has been exchanged we go into a phase of ice candidate exchange so ice is yet another fun acronym involved in webrtc and ice is a protocol that again predates webrtc i stands for interactivity uh connection exchange okay um and i'm sorry i said that wrong it stands for interactivity kidney interactive connectivity establishment that is a mouthful and what that is is there's a couple different ways that the two peers can connect to each other and we will look at those three primary three ways that they can connect to each other and so the browser or the ice in general the ice agent as it discovers different methods that are possible to connect the the peers will send messages back and forth which i said hey um i can connect over in this way and the next year i'll be like oh i can connect this way and they'll go back and forth saying all sharing all the different ways that they can connect to each other and then what's going to happen is behind the scenes the the ice agents will just try all of those different connections and then they'll determine what's the best way for the two peers to connect and then they'll they'll connect in that way so there's a couple different ways that peers can connect the first way is okay if you have two devices behind the same router on the same local network then they can just connect each other over based on their local ip address uh like you may have done something like this before right like if you are developing something like you know you've got a live dev server running on your machine and you want to see what how it is on a mobile device you can just hit your laptop from your phone using your laptop's local ip address if they're behind the same router and that's not very interesting because it's you know it's straightforward there's already really there's nothing interesting going on there and it's really not that realistic abuse case anyways because uh if you're video chatting with someone on the same local network it's very likely you can just go and have an in-person conversation with them so it's whatever but it's all it's at least useful for testing when you're first building it out uh you can kind of kind of connect with another device or and it's kind of like a nice uh step up to the others so the next way is using a stun server so stun is yet again another uh acronym involved with webrtc stun stands for session traversal utilities for nat so before i explain what stun is uh i'm curious if any of you have any thoughts like what you think might be a problem if you're trying to establish a peer-to-peer connection between two peers who are on different networks behind different routers what do you think might be the problem with them trying to connect to each other firewalls could be but there's another like kind of like glaring problem okay your entities what was that oh nats yeah yeah exactly so gnats are the problem um and if you're not familiar with nat and that stands for a network address translation right so um we all have all of our routers at home or in the office have network address translation and that's uh what we do to prevent all the ip addresses to be on the internet to be consumed uh so quickly right like your computer itself or my computer right now doesn't have some publicly reachable ip address right like i'm behind a router and that router has a public ip address but then what happens is as i send messages or different network requests out to different devices on the internet at large um sorry i had a message got distracted so when i send messages out to different devices on the internet at large though they need some way they need to know who to send it back to so then uh servers that i talk to on the internet they'll send a message back to my router's public ip address and then a whatever specified port that the router or the network address translation knows okay it goes back to me right uh because there could be you know multiple devices behind the same on the same router but uh behind the same public ip address and so stun um it gives a is the the first method to connect peers behind two different uh two different routers so it's really not it's actually pretty straightforward all that it does it's it's very lightweight uh a peer will just send a very small message to a stone server be like hey what's my address and the server will be like oh hey uh your this is your public ip address and port by which you can be reached and it's going to be the public iep of your router and then some specified port and then the second pier will do the same thing hey what's my address oh some service says hey here's your public ip address and port and after that happens they can again exchange that information over the signaling server and then they both have a public ip address by which they can both be reached and they can have a peer-to-peer connection and that's pretty cool and that works most of the time and when i say this is very lightweight like this is very very lightweight uh there are services out there you know like um you know like twilio for example like if you wanted to build a webrtc solution and and send that in the wild for the public for public use uh you might not want to build all this on your own i mean you you could uh but there's you know some security or some assurance involved in using a tried and true platform as a service so uh twilly offers that for example and uh they offer some of these different things you need to connect and they offer a stun server you can use and they don't even charge you for it like it's so cheap so it's uh it's super lightweight you can deploy your own you can use someone else's doesn't really make a difference and you're really not going to have many many problems with setting up stun and that works most of the time there are cases where uh peers won't be able to connect each other over stun and in that case they'll have to actually use uh something called turn turn stands for traversal using relays around nat so turn is what you do when you can't actually establish a true peer-to-peer connection it's actually just a pass-through server so in this case turn is a server that will pass all of your media and data back and forth between peers and when this is involved turn is where webrtc gets expensive right because if you're having to you know even with two peers now sending data over over through a server that can add up pretty quickly and you know think about what it's going to be like if you have maybe 10 people on a call you've got 10 people's video streams uh all the megabytes and gigabytes of that going through a server uh the cost of that's going to add up pretty quickly it's going to be cheaper if you had your own solution deployed out there but then you know you're also responsible for performance bottlenecks and that could be a problem with turn and uh with with this it's possible for you to kind of mix and match some of these so it's possible like maybe because of the maybe pier 2 can't connect over stun or maybe it can't get its ip address and port back from stun and so pier one can't reach peer two over stun so in that case pier one would have to talk to pier two over stun but if pier one can use stun well then pier two can connect to pier one directly while pier one is kind of uh talking to peer two through some other server so you can kind of mix and match it it really depends on your router and network settings and different things like that so before we go on any questions about what we see here no okay so we're almost time uh it's almost uh to the part where everyone wants to see where we actually write some code i will call out so we're gonna do is we're gonna build um a signaling server which is actually not very interesting it's just essentially web sockets that just pass messages back and forth that's it nothing interesting to see there and for stun and turn we're actually going to deploy uh a st uh a stun and turn on the same server and actually plot twist turn is built on top of stun so uh it's trivial for the same server to handle both in in the real world you don't probably want to do that because you don't want to you want turn to have all the resources you can get but for our simple example for today that's gonna work just fine uh and for our stun slash turn server we're gonna use this open source solution called pion which is pretty cool i i ran across pi on after last talk and they're pretty much they do all things open source related to uh web rtc and everything they do is in go so i guess that's cool i've never written go until a couple days ago i was uh testing out this simple uh stun and turn server but yeah you should definitely check them out they also have a lot of good learning resources but there's actually not a ton of code for us to see here besides just how we use this go package to to set up a server the main parts where we'll be focusing on for for code this morning is uh these two peers and the code that they need to run in their browser and the nice thing is this definitely seems like a little complex but the nice thing is a lot of this is kind of like like all the tricky parts and all the like you know complicated parts are handled for us by the browser so at the end of the day it it's really just us needing to understand what what method calls and what events we need we need to handle at what point and the browser does most of the heavy lifting all right so with that said let's write some code all right i'm going to close this right so this is can can y'all see uh my code editor yes okay cool all right so this is what we're gonna be working off of uh i will give you this is all in github so you can you know pull down and and play with it later so there's a couple things here we'll look at the turn server first just because it's interesting and it's simple um i can't explain most of this to you because it's in go and i don't really know go but the nice thing is is if you want just the basic uh turn and stun server you really don't need to know too much this is a pretty much a example that i just copied and pasted from pion and it just works and don't have to worry about it one thing i will point out here is uh the interesting thing is you see this off handler here and so there is some authentication involved with turn now that also isn't specified like webrtc isn't opinionated about how you do your authorization uh because you know obviously if you have a turn server out there you don't want the whole world using it because that's going to cost you could cost you a lot of money but how you handle authentication doesn't really matter just you do it however you want to uh for today's purposes we're just going to have a single user and single password that's not very secure at all and that's gonna work fine for us when you do this in the wild you might you know use some identity server behind the scenes or whatever else you use to authenticate and log in users this is really kind of all up to to what you want to do so yeah and besides that i'll also point out that the the default port for stun turn is 34.78 but again it's coming up to you you can do whatever you want um yeah so excuse me so that's the turn server nothing too interesting there to see next we'll look at the signaling server we're not going to i don't know like i didn't i didn't want to spend time actually building this out because there's not really anything going on i'll just point out a couple of things so we're just using web sockets and you know we have to have we have to be able to handle messages from the socket connections but the only message we're actually going to handle is this message that i created called just a join message where that the client is going to send when or the peer is going to send when they want to join and the signaling server is going to kind of track like all the users that are currently connected uh just so it knows who to route messages to and it needs to be able to tell all the peers everyone else's uh names but that's pretty much it so all that so besides that um it's just going to pass messages through to to the intended peer so if we see this right here on message when we handle the message if we find a message handler which is only going to happen for this message then we'll execute that otherwise we're just going to pass it through every message is going to have a sender id and recipient id and it just needs to pass that message through to the right to the right here that's it nothing too interesting there um one implementation detail i'll point out is is as soon as a user connects to the websocket i i go ahead and send them a user id which is just a uuid i just this is just something that i created um so the this implementation is non-normative uh when it if you want to build this you can do it however you want uh this is just the simplest way i could think of doing it all right so let's get to the interesting part this is our client code for the browser we're going to step through and excuse me and just implement these different functions i already have some basic utilities for like you know adding stuff to this to the dom and different things like that that's not interesting i didn't want to build that out with everyone watching because that would take too long but there's some basic things in here for adding the video elements to the screen and different things like that we'll use these but they're not too interesting for uh the purposes of this session but you can go back and look at them later if you want so let's get started and uh before we start slinging this code i'll just give one last call if there's any questions otherwise we'll uh we'll write some code okay you might be addressing this later but i understand like from your explanation how connections are made how like in my mind i don't understand how like latency is managed like like this call for instance if me and you are close proximity but then most of the uh people are halfway across the world to prevent you know conversations before being so frustrating you know if there was all kinds of different delays yeah how that's managed yeah that's a good question so uh part of it is so i'll call this out so that let me go back to the slides real quick so this interaction that we saw uh this happens only between each peer so if you have multiple peers um like this interaction has to happen between every single peer so if you have 10 people on a call you end up with this mesh of 10 connections and and this is happening between each and every person all the same time so that being said um fro like from one standpoint since you are getting video and sending video directly to peers um you're not gonna notice if someone is slightly behind or slightly ahead because i don't think you would um but i think um yeah so i don't um i think some of that might be handled behind the scenes though but yeah i mean so like technically i could be i'm like i like when i'm speaking you're actually hearing me like you know a couple seconds late and for the message to go from you know from two different houses in richmond and then from richmond to you know somewhere in india uh that's really not gonna take too long so you might be seeing me two seconds ahead of everyone else um two seconds probably a bit much it might only be like half a second right um and then two is you know you might you know jump in just slightly ahead of someone else um but i yeah so that's that's that's the best guess i have for you okay yeah that makes sense yeah alrighty so uh before we actually write the code let me just go ahead and uh get this started so we can see what we are working with i don't want the window there all right this doesn't need to be too big all right so notice that even though it's local i'm connecting over https uh because there are certain things that the browser won't let you do with video and whatnot if you're just over http and uh so when you're dealing with video and stuff it's just kind of it's a little nicer just to have https just so that there's no funky browser issues and i'm just using a uh self-signed search for that and this is not like you know normally you don't commit these things and get repositories but this is not useful for anything except for just hosting things locally so i don't mind putting this out there you can generate your own it doesn't matter all right so this is what we have working with uh not too much i've got these couple buttons already wired up to uh fill in all these settings for us based on whether or not we're just you know testing locally or actually testing it in production and then there's this joint call button oh yeah i guess that is required isn't it right and so right now it's not doing anything so let's make that do a thing um so let's see here all right so the first thing i'm going to do is we need to get a connection to the signaling server so what we're going to do is i've got this function called connect to signaling server and that just establishes that websocket connection to the server nothing too crazy there you can look at that later if you want to and then i've got this other function that's going to grab those settings from that small form on the screen and i need to pick out the signaling server from those settings and then i'm also going to pass it a map of message handlers so these are all the different messages we'll be expecting to come from the signaling server and a map from that message to the message handler and i'll just pass it in right here and we have the connection now what i'm going to do is i need to record uh just the name right that that we input in the form so i can display that and i've got to be able to tell everyone else what my name is so again i'll just get the call settings and get the username nothing too crazy and i'm going to go ahead and hide those call settings so that they don't get in the way later and now this is where it starts to get interesting i'm going to call this function called init local video and i need a label this is just again a function i i just wired up and i'm going to pass in my username so i'll say state dot current user dot username and i'll just in case i forget who i am let's remind myself and let's take a look real quick at what this function is doing oh it's right here and again this is something else that we will need to implement so let's go ahead and do that so what i'm going to do is i need to uh do something called get user media and i'm going to save that to a local media stream right here on my state object i'm not using any framework here i'm just this is all just vanilla javascript just to make it simple all right now let's actually look and see okay well what is this function doing so this is the the first the first kind of interesting thing here uh if you're at the last session you will remember this [Music] all right so right here we're going to do is we're going to say okay return and we'll do navigator dot media devices dot get user media uh this will not work if you are on http i think it'll work on localhost on http but i just make it https just to be on the safe side and we're going to pass in some settings here to tell the browser what kind of media stream and if we look at this one uh this is telling me that this returns a promise of the type uh this is a type defined by the browser media stream is pretty much the backbone of any video related thing you want to do in the browser you can use it for things so this itself often gets confused as a part of webrtc but it's not it's just the browser's way of getting a media stream uh that can be used with a lot of different apis uh so you can get pretty detailed with these settings we'll go pretty simple today we'll just say okay i want some audio and for video it's kind of neat actually you can i'll say facing mode and ideally i would like the uh first the user camera and next the environment camera and what that's doing is this telling the browser hey give me the webcam or the selfie camera on their mobile device if that's not available and just give me whatever camera you can find so you can specify that kind of neat and we'll just uh 250. there's a lot more you can do with these settings though it's pretty well documented and uh it's not not too crazy you might have other needs i think you can also specify aspect ratio uh noise suppression which is kind of interesting sample rate and sample size uh you might want to play with these in a real world application but it's kind of cool like um echo cancellation and noise suppression like like it will handle these for you and i'm pretty sure these are turned on by default but just in case i'll just say true you know what i'm not gonna i'm not gonna i'm not gonna do that right now i don't want this but it's fine you can play with that later so yeah that's all i need and now i have kind of a handle into my device's camera so if we come back here okay we've got that media stream and then oh yeah so this is a promise right so i'll go ahead and delete this and let's see okay yeah we're here so we we got that user media and then what we're gonna do is we are going to call this function for just inserting a video element and i'll give it a look this is nothing all that interesting so i'll just give it a label [Music] and i'll say muted because i don't want to hear myself uh that would get annoying with lots of echoes and i'll give it a pair all the good seeds and now we have some experience that's pretty cool we have kind of the local videos so actually i didn't uh look at how this works so we'll we'll i'll show you that real quick when we do insert video template all we're doing here is adding a video element to the screen and we passed in this media stream right so uh all you do to make this video show up in a video element is you just get uh that video element and you set the source object to a media stream and it'll show up one thing i will note however is that in order for it to work because thankfully browsers have implemented lots of things to prevent annoying like auto playing videos you've got to tell it obviously you want to auto play if i don't put this attribute on there then i'll just see the first frame and i won't see anything else that's not what i want i want to see the video in real time and then i'll tell it uh plays in line and this is like something pretty much it's not going to like try to go full screen on you automatically i'll give you a chance um in some cases if you want to play a video this is outside of webrtc but if you want to play a video on the screen before the user is interacting with your page you've also got a it's got to be needed in this case i don't want all them to be muted i'm going to reuse this multiple times and i only want mine to be needed i'm just handling that here in javascript instead all right so that that's working that's pretty cool the last thing i'm going to do in this function is i want to actually join the call so what i'll do is i'll send a join message and this is just communicating to the signaling server and now this uh nothing too crazy here uh let's see i've got a function that just sends a uh a message over the websocket and i will give it a type which is messagetypes.com uh and then i'll give it a username i'll have to communicate my username to the signaling server so the signaling server can tell everyone else on the call hey this person's name is this person's name is or whatever so i will just pass in state.currentuser.username the most important part of the that user id this is the uniquely identified users okay so i will send that message and what actually ends up happening if we go back over to let's see we'll look at the stigma server real quick handle join so what happens over here is all that happens is it just updates your user entry with that name and then you can do this than just sending like the whole list to everyone every single time but for our purposes it works just fine all right so that being said if i sent a message and i'm actually getting a message back i'm getting this message back right now actually uh this message is sent to me as soon as i connect to the signaling server um and all we have to do there is just save and this is just when when i connect the signal server is automatically giving me my user id so i'll just save that because i need that for future so for user dot user id is message dot user id simple enough uh and then updating the user list we'll go ahead and handle that message since that's nice all right so what is that going to look like if i look at this message down here see send updated user list so yeah this is all it's doing it's just giving me an array of all the users and it's just an array of these objects username and user id so nothing nothing too crazy there so what we're going to do is we're going to get message.users and for each of these users let's see here what we want to do is if i don't know about them yet or if this user is me i don't want to do anything so i'll make i'll make sure i filter that out user id um and if i already have the user i'm not going to do anything so make sure state dot peers doesn't have this user yet all right so if both these things check out then what i'll do is i'll just update this object this piers object with the user all right nothing too crazy and lastly so like up until this point this is all the signaling server stuff we're not doing anything webrtc related all right um so lastly what we'll do here is um i have this flag on the state object that says if i'm a new user and if that's true i'll go ahead and set it to false all right and then what will happen is is the the the peer that just joined the call they're going to be the one to initiate the call that's a decision i made there's probably different and potentially better ways of doing this but for simplicity that's just kind of what i reasoned would make sense and it works out well enough so that's what we're gonna do all right so we're gonna call peers so at this point we can stick our video on the screen we can connect to the websocket server and know about all the different users and now we actually want to start the webrtc magic so let's jump into webrtc magic uh before we move on i'll just quick check any questions still good okay if you have a question just just speak up and stop me i'm not watching messages but if you send a message a couple if anyone sends a message or has a question just give me a give me a shout and i'll i'll pause all right so we want to call peers all right so what we'll do is i'll just get uh let's see object dot values i'll get an array of all the peers we have and for each of them i am going to call this function which we need to implement all right now let's see now is when we're going to start to get into the webrtc things so first thing i want to do is i want to add a video element on the screen for them similar to what i did for myself and i'll just give them a label which will be their username and i'll give it a parent id which is going to be a section on the screen already marked up where all the peers are going to go and then this is super important i've got to give it uh the peers user id because this will be needed later to look up or or remove elements from the screen if someone drops all right so we've already seen that uh next is we will get a peer connection for that user and i'll call this function create peer connection uh this is also just a thin wrapper i created over a native api we're not quite to the native apis yet before i fill in all the all the details here let's go and see what this function looks like right it turns out it's empty we have to implement this all right so this is where things start to get interesting um so what we're going to implement this and this is where we actually start to tap into the browser's built-in webrtc capabilities so starting off i'm going to say let peer connection equal to new rtc peer connection and this right here is directly from the browser and this is where all the magic happens uh there's actually not a lot of configuration that goes here um what we'll do is there's some advanced settings but for basic use cases uh you don't need to do anything except for give it ice servers all right so if you recall all these uh servers like you've got to tell the browser hey here's where you can reach these servers so we so we'll do that if uh these are past this we passed and if it's empty it'll just look for connections on the local network and and that works just fine all right so we did that we had a peer connection and then what we'll do is um i need to go ahead and add my media stream that i got and it's also displaying in the video i need to add i need to add that to the connection so they can so the browser can send that to any potential peers so what we'll do is i'll say config dot i'll get that media stream and then we can call a method on that which is get tracks uh which in this case i think will be two tracks one for audio one for video and that comes back as an array so for each of those for each of those tracks i'm going to say peer connection dot add transceiver and then i'll add the track and then the api requires that i pass in the stream from which uh this came what's this one right here i'll be honest i don't know why this is useful but that's what it told me to do so that's what i'm going to do um but there's two ways of doing this um there's a you'll see that actually there's an ad no there used to be an ad stream method that was deprecated so don't use that if you see examples there's also an ad track but based on what i was reading it looked like ad transceiver is what i wanted transceiver is kind of saying that hey um i want to have a bidirectional connection on this peer connection um i think if you just do add track it handles that behind the scenes so there might not even be any difference but uh this is what i that's what i read and seemed to be the safer option so that's what i did and it worked all right so next we have to wire up uh some very important event handlers so the first one is going to be let's see what's the first so the first event that happens uh when this object is created is going to be an event called on negotiation needed okay as we'll see shortly this is when the call starts this is when i send the offer message to my peer with my session description uh over the signaling server all right so we'll assume that we have some event handler passed in up here um and we'll just actually connect all these event handlers and this is just a convention i created but i want all these event handlers to have some uh has some context which let's see peter context i'm going to uh just pass some extra data for all these event handlers and that will be the peer connection and the pier itself all right and we're just going to walk through and do the same thing so i'm just going to copy and paste how many events do we have one two three four five all right and we'll just do the same thing um but we'll we'll talk about what these mean so on track is what happens when uh your peer adds what pretty much when your peer does this the on track event fires and that's when you get their media stream and you can display it on your screen so that's important next is on ice candidate uh that's when we i got a little mixed up on negotiation there we go yeah so on ice candidate is when um i have to pass is when the browser tells me hey i found an ice candidate uh go ahead and tell your peer about this ice candy and then i'll send that message over the signaling server the other two are just kind of maintenance methods they might not always be called but when the ice connection state changes we'll get an event and when the signaling state changes we'll get an event the signaling state changes pretty much the most important thing for the signaling state is um it'll be in a state called stable we'll see that referenced in uh the other code but pretty much if the signaling state is stable that means either i haven't started any negotiation with the peer whatsoever like in like it's just a fresh peer connection i just created or it means that we have um established connection we're connected currently and life is good so we'll use that to key off a little bit of logic and lastly i am just going to return this peer connection so it can be used in other places any questions about this guy here okay no questions all right so we get that peer connection and i just need to pass in all of my uh event handlers pretty much uh so it asks for let's see appear so we'll give it uh just the peer cheat take a shortcut uh and then i'll need to give it my media stream again we're pros at media streams by now and then i'll give it ice servers uh i'm just collecting i servers information from up here right it's pretty much turn server and stun server and uh you have to have a an authentication method or means of authentication for the term server so we'll provide that information if it exists uh and we'll just get the ice servers let me make sure i implemented this i hope i did oh crap i'm just going to copy and paste this because it's not very interesting just getting stuff from the form i will call out for the turn case uh this it's an array of objects and this is what the object looks like for the turn server uh you can give it multiple urls or just one and you've got to tell it what is the credential type there's a few other types uh password is the most common and then you just give it your username and credential nothing crazy going on there all right and then i will give it all of our even handlers uh so we'll start with a negotiation needed and these are all just functions i'm going to pass that we still have to implement so on negotiation needed is create offer and then on track is display peer media and on ice candidate is send i scanned it to appear we just stubbed out functions down here and then let's see on ice connection say change we'll just analyze connections a change could think of any more interesting name and then on signaling state change we'll handle that all right so at this point just everyone's clear we are we're still right here at this point uh we're but we're about to start to get to here actually yeah this is where we're going next sending the offer and the answer all right so as soon as you let's see over here as soon as you add media or as soon as you add a transceiver to the peer connection that causes uh the negotiation needed event to fire all right so we are going to handle that first so all negotiation needed when that happens we want to create an offer and send that to our peer so what we'll do is we have this pure context that that we passed in so we're just going to get the peer connection and peer from the peer context great and then next we're going to uh make a call into the webrtc apis so we're going to get an offer and we want actually i'll start with this we want to call peerconnection.createoffer and what that does is that tells the browser hey uh give me an sdp message stp you call that session description protocol give me an sdp message that i can send to a peer and that's going to return a promise that the information isn't great in javascript but let's return a promise just trust me and i will need to send that over to my peer on the signaling server all right now we want to make sure when that actually yeah okay so we'll do that and then once i get this offer i actually have to set that as my local uh kind of my local settings so what we'll do is i'll say peer connection dot set local description and i have to pass it this offer and this is also going to return a promise i'll just wait i don't care about the output and once that's happened i'm going to go ahead and send this offer to my my peer all right so i'll go ahead and send a signal message and the recipient is going to be peer.peer id and the type is going to be message message types dot offer and i have to send it the the stp message so what i can do is actually i'm not going to send the offer itself um i can actually just say offer.connection.locals local description all right and that's essentially the same thing because uh once i've set the description like this and this are the same thing i might be able to just pass the offer itself i don't know but this works well enough all right and one thing i'll call out here is there's there's a lot of synchronization and potential like air cases uh that could happen because there's so many moving parts right so i'm gonna do some like basic handling of those things but there's definitely some edge cases that admittedly will break uh so one case it will handle is um if the pure connection is not um is not stable then i don't want to do this okay um because if my peer connection is not stable that means that i've probably already received an offer from the peer and i don't want to again send an offer back to them because that's going to create confusion they might not be able to establish a connection so i'll just return in this case okay so now we've successfully built uh the offer handling through the signal server now we will actually let's save all this and just for funsies we'll see all this work out in the browser uh turns out you can just connect with yourself it's not very interesting but it's helpful for for testing purposes so let's see here local this can be bob and i'm gonna go ahead and let's see i said the first one to join the call is going to create sorry the last one to join the call is going to create the offer and start the call so i'll go ahead and join the call over here with bob and then as myself i'll join the call and let's refresh the page make sure i have everything i need in the network tab i'm gonna come over here and see i've already connected to the websocket server and i'm gonna go ahead and join the call and let's see the message hello all right so i got the user list oh you know what i need to be over here sorry let's restart let's restart so i'm going to join the call over here send the offer message to this guy and we'll see it we should see it over let's here sure the message was sent i think it was yeah no i didn't give that message that's okay we'll just keep on writing good and it'll all work out okay but that depends on what once we get to the end it all worked out already so you're not you're not the guinea pigs here [Music] so that's nice and we are sending that let's see what's next uh next we need to ideally we would uh send an answer now the now webrtc the api doesn't know anything about answers because that's handled through the signaling server so we have let's see where are those we have these message handlers right here and so we have to respond to the offer so we need to go ahead and implement this one okay okay uh so what we'll need to do is is it will look kind of similar to creating the offer um first off i'll get that here appears and then message dot see sender okay and then i'll get a peer connection for that user right so at this point um the receiving end of the call and they now have to create their rtc connection object so in case that's already been created i'll keep it in case there's you know some things are timing is kind of odd um but if not i'll go ahead and create that and initialize that peer connection for the peer and and that's what we've already seen with this one so when you're writing this you have to keep in mind that okay we were just writing code for the caller side of the world now you have to think i'm going to kind of think from the receiving mindset so now i'm okay i'm in the same file but imagine yourself as the other peer okay that's what we're handling in this case just there's no confusion um and the rest looks kind of similar to what we just did um we will get the remotes sdp and i think i can use it as is but i'll do this just to make sure it's uh in the right format and whatnot to make the browser happy and then what we'll do is is i'm going to uh says similar to setting the local description which we saw uh last time i'll need to set the remote remote description okay and i'll pass in the remote sdb all right um i'll do that and then after that um i need to create the answer so i'll go ahead and wait a week do the same similar thing set local description and i'll do the same exact thing i did last time where we say okay peer connection uh please create me create local nope create answer that's what it is last time i created the offer now i'm going to create the answer which we're just setting as the local description and then next we are going to uh send that back to the other peter so recipient message dot sender id message type is going to be message types dot answer and again i'll give it the sdp message uh which is going to be peer connection dot local description all good uh there is a little bit of timing handling i'll handle here so once we get to this point um i want to check and see if the signaling state on this connection here signaling state uh if it's not stable that means uh again we're already in the middle of of communication like this would be the case if we'd already gone through this function so if that's that's the case and sometimes uh you might have a little bit of a back and forth with offering message um i want to go ahead and do peer connection that set local description uh i'm going to set kind of a special one here called rollback pretty much what that does is it resets my local description to whatever it was when it was last stable um and then i also need to do peer connection dot set remote description um so pretty much like if i get an offer after for some reason after the offer answer uh coordination has already happened i want to kind of like reset myself and before i set the remote stp again or setting the remote description and i actually need to await both of these no i don't want to do that what i'll do i want to wait both of these but we'll do promise not a little fancy because fancy is fun uh and if that's not the case um [Music] then we can just go ahead and set the remote description uh should be an array all right so i think that looks good so just just review we got the offer session description i went ahead and got that i set that as my local description sorry i have to tell the webrtc api hey this is what my uh remote peer is using okay and then after that set i'll have to uh create my answer create my own local description said that and then i've got to send my description as an answer to the sender so we just built this section here all right go ahead and save that and i'll go ahead and let me try this one more time this should be working if it doesn't work then there's probably a goofy typo or something that we can fix so we'll go back to https localhost [Music] all right i want local settings and hayden will join here and we'll call this one bob go ahead and open these folks all right so i'll go ahead and join the call and join the call again yeah okay we did something goofy ah we had a goofy typo which would be in here yeah servers that should be config.ice servers there we go okay that's what was the problem last time so no i know i'm not crazy all right uh so while we're here we'll go ahead and look at these messages coming back and forth um so let's see bob will join first so that means for the purposes of our code um the second one to join is going to send the offer and then uh so when i click join hayden will send an offer to bob bob will get the offer and then send an answer back to hayden so we will see that happen all right and notice uh we don't see anything here because um yeah we still haven't had no actually getting the remote uh media yet all right got user list response uh i'm still just getting a usualist do i have any errors nope no errors okay that's fine oh well we'll keep going it all worked out in the end okay so we built this porsche any questions so far all good it's a lot of code [Music] might not make sense but if you go and look at it tomorrow it'll probably make more sense all right so the next thing we need to handle is this uh ice back and forth exchange all right and that isn't really too much to handle uh all that's going to happen is let's see um [Music] white all right so we're going to do is let's go back to where we started the peer connection okay so what's gonna happen now is the webrtc layer and the browser's gonna be like oh hey i have a nice candidate you need to send this to your peer so we're going to do that and then in this function we're going to say okay i've got this here let me send that to or i've got this ice candidate let me send that to my peer and then the peer is going to receive that message from the signaling server whatever that is right here and and handle that so that's that's the back and forth flow we're gonna we're gonna fill out now okay so see so we'll start with send ice candidate to peer i have no shame i am i've got i've got a big monitor to my right here and it's got all the code written out so i'm just i'm just copying what i see i mean i wrote the code originally but i don't have to think about it now it's kind of nice all right so when we get this event from the rtc peer connection um if we are given a candidate what we'll do is we will send a signal message so from here like all these event handlers now get pretty simple there's really not a lot going on now it's really just sending messages or doing like a single thing so we'll send a message message types uh dot ice candidate and then um i'll say it's gonna go to let's see this peer user id and then uh lastly i have to give it this candidate that came from the webrtc layer and that's it nothing crazy there okay so then that's going to go through here to my pier and then i've got to be able to handle that on the other end so now on the receiving end i need to find that message handler from a signaling server and i'll need to communicate that back to my rtc connection on the receiving end okay so now what i'll do is i'll get that pure connection [Music] uh with from the user that sent it to me because keep in mind here as we're building this out we're building this out to be able to handle multiple users uh not just uh two users back and forth so it's a little more complicated than what it would be if it's just two users so i will get that peer connection and then i will get that candidate you rtc nice candidate i'll just get that um the message uh and then i will appear connection dot add ice candidate uh this is recall this is the um rtc peer connection that we created and add eyes candidate is just a built-in function on that so this communicates back to the webrtc layer in the browser that hey this is a potential way that we can connect all right this actually returns a promise i'm told and i'll await this i don't know if that's actually useful but i might not need to do that but i'll do it anyways okay so now we've built this back and forth okay and everything else all this right here we don't have to build anything for this because um we've already assuming we have a stand server and turn server these will pretty much take care of themselves and the browser uh will handle all this for us which is pretty nice so we're pretty much done let's see how many more to do's are there there's a few more left to fill out so we'll just fill out these few which are just kind of like air handling um let's see here oops nice connection what do we do there all right so recall this is a event handler that we are going to put on the rtc connection object and then what we'll do is is let's see if let's see peer context dot peer connection dot oh you know what i want okay here's what i'm doing i want to get peer context dot peer connection and i want to look at the ice connection state okay and uh if it's closed failed or disconnected um i'm just gonna just gonna close the call all right those are pretty much air states you can look more into those details later if you want uh let's see i'm gonna cheat a little bit i hate just having multiple comparisons [Music] so if we have closed failed or disconnected then we are just going to call this uh dispose peer connection method okay uh and then let's see handle signaling state change uh we'll go ahead and take care of this one and this is again just kind of like air handling actually i was reading and there's been some change in the apis where i don't think this is actually it anymore but i'm going to again handle it just to be on the safe side i'll call out one thing um if you look at the index file i am grabbing this file right here the webrtc adapter and this is kind of like a a polyfill of sorts that just kind of like smooths out any differences between implementations on different browsers this isn't really super essential these days because support is good across all browsers i think you can even get some semblance of webrtc working on uh internet internet explorer um although i don't know who is actually seriously doing that so you kind of you kind of grab this one to be on the safe side but everything mostly works the same across different browsers these days okay let's see what else do we have to implement we have to implement the closed peer connection [Music] um this is a problem this is an important one okay uh let's see here save stp answer what is that so one thing i found um that was a little confusing when i was building this out is i would often get confused between like handling messages from the signaling server and handling events from the rtcp connection and i think i got myself a little bit confused but that's okay so let's see uh when we get an answer back from let's see up here so offer the answer comes back through the signaling server uh i think we've not seen this description ah okay yeah so here's the problem uh one thing i we didn't do right okay so over here the offer is sent to the peer the peers sends their answer back uh so we handled um everything on this end but we still have to handle saving the response to the answer so we will do that right now and that's actually not too crazy all we're going to do is again i'm on the initially offering the initial calling side so i'll get the peer connection um again from state dot oops dot peers and they'll be the sender id from the message and then now the receiving ends answer i will do let's see rtc session description so i now have the answer sdp message and then i need to tell on the offering end i need to tell the webrtc layer hey this i sent the offer and this is what they sent me back so we will just save that set remote and apparently there's one more oh yeah display peer media that's important we would ideally like to be able to uh see other people on the video call so recall i said that this is what we like this event happens when my rtc connection gets media from my remote peter so we just need to display that and we won't do anything too crazy um if you have multiple streams like for a more advanced use case you might have to handle this differently but all i'm going to do i've just got a method that goes and finds the video element for uh for the pier and then on the event we get an array of streams in my case i only have one stream and we'll just set that media stream as the look at that real quick so yeah i'm just gonna go i'm gonna find that video element and i'm just gonna set the source object to the media stream that i passed in cool all right there's only one other thing we need to implement let's see close peer connection i'm going to copy and paste that one because it's not very interesting it's pretty much a reverse of the setup [Music] we're just turning off all the event handlers and then for any transceivers on that connection in our case they'll just be one we're going to stop the transceivers and then lastly we'll call peerconnection.com and that's all we have to do to clean up important step here don't let your event handlers dangle out in your memory alrighty okay so with that uh the local example should work here we go we'll join local aiden will join here and actually know what i want the network tab for all of these so i'll just refresh so i have the websocket connection from the beginning okay there we go i'll join whoops and i'll join as bob nicole and i will join the call over here and it's not working but that's okay we will go and fix this real quick line 21 let's go six lines basically what has happened is a narcissist will typically talk an extremely positive or truly negative language extremely positive sounds something like i treat you better than ah that's important and i think that might be why this wasn't working the whole time okay but a sense of superiority we will try again over here and join as bob three ways you can spot it assist because as a therapist this is one of the most common i get first is to pay attention to their words a narcissist well um as it would happen the uh live coding exercise did not work um what we'll do is let me all right i'll go back to everything implemented how i had it originally and how you'll find it in github and we will run this and this will work um after this i actually have this running uh on aws so we will all can jump on there and uh we'll see how that works that i did test yesterday successfully so one if it doesn't work now then the demo gods are just against me today join call [Music] and now it's working terrible echoes so i have no idea why it wasn't working when we coded it up um i must have just missed something in an implementation but you kind of you got you got the gist of it so i'm going to mute those because that's that's going to get annoying let's at least look at these messages going back and forth real quick all right yeah that's what we're trying to see the whole time all right so we got the user list um this is these lists after book people joined they become um these okay so here's an awful message so this offer message is going out and um we can actually look and see what is the session description message the sdp message that's going out so if you look in here um there's a couple different things so like like encryption is handled behind the scene which is pretty cool some of that info is handled here excuse me um you see some audio video stuff and it looks like some other gobbledygook that i don't know what it means but that's okay we can uh we can set some time later on our own and research what that means all right the real interesting part is i really like to see the ice messages i think those are pretty cool to see so let's see here's the a little out of order but it still worked the connection still works this was the answer that was sent and then for some reason this guy sent an offer i don't know if that's always supposed to happen or what but it happened but let's look at these ice messages so first thing i want to call out is this one right here so this is saying okay well i realize we can we can try to connect oh uh on when you see this type host that means it's just connecting on the local network and as it turns out uh this is my ip address on my local network and i think the developer yeah uh that's the important number uh that's telling that uh we can connect on and then uh that's gonna be over udp and then it's gonna do pretty much the same thing uh host connection except over tcp so tcp connection over the local network same thing some more of that and yeah it's pretty much all just local connections uh because um we don't have i didn't set up any uh stun servers or turn server for the uh local settings um i do have this one right here right here i could run this uh and see that in action as well um but yeah so these are pretty fun to look at all right uh any questions i have one last demo where we're all going to jump and have a video call on another domain don't don't leave the google meet but we can have a video call while on a video call which is pretty cool but before we do that um that's that's pretty much all i wanted to cover as far as code goes so is there any questions about code how any of this works any doubts you have okay i guess not oh man we only have 11 people now i must have scared everyone away all right so for all of those who waited till the end um we have something fun we can do uh we are all going to go to webrtc braxton.com just to make sure this actually works in the wild and this time i'm going to join with prod settings you know what let me uh let's put this in the messages all right so you all come here don't leave the google meet but but go there and uh and we can all join the call here too and that'll be so much fun so i'm just i'm here waiting y'all just joined just a second cool i also realized the server running all this is in virginia in hindsight i probably should have put this like in india or maybe in europe so it's at least halfway between so that's my mistake uh hey when i wanted to enter for the uh news server uh sorry you're gonna click the uh uh sorry let me refresh the page here okay when you join um you're gonna sell this blank just click the prod button and it's gonna fill out all these settings for you got you yeah i might have muted the google meetup too soon so yesterday when i was testing this um my wife and i were testing back and forth i was at work and she was at home and we had some issues connecting but then let's use right can anyone see each other i see trish and kato joined but i don't see any of y'all so all right let me retry okay [Music] yeah it's probably the feedback with the google meet up oh yeah i guess yeah so it would be nice it would be nice if there's a mute button wouldn't there but this has the mute button um but that's uh an implementation detail for the interested user uh yeah um if someone from hyderabad could join that would be great uh just to make sure that this works uh because if it's only the virginia folks i feel really bad couple can you uh try joining again i i i uh yeah i've joined uh i'm able to see trish okay yeah so like i said there's there's some kinks to work out as far as uh kind of like timing and everything goes um but so it's like i don't know i feel a bit confused here uh it's not exactly like uh following uh i mean it's it's actually flip oh i see what you mean yeah so by default um right because i'm putting up my right hand yeah and i see it on the side of the screen yeah so by default that's um that's what the camera is seeing yeah so so normally what happens is when um when when you see it because you would expect uh like if i put up my right hand you would expect to see it on the right side of the screen so all you have to do with that is um if i'm moving to the left the on in the video i'm moving to the right so that's why i'm getting a bit confused yeah so all you have to do for that is you can uh flip pretty much do a 360 flip of the video element um okay so it'll actually so then then you'll see it as a mirror okay yeah um let me try to join one more time okay a couple i can see you can you see me yeah i can see you yeah okay cool all right so it finally worked look it didn't beat your eyes and i can see trish i can't kill you dang it all right well i think we'll call that a success who can see who can see yeah cool all right so that's that um yeah so my light is not working in my room so okay yeah i'm going to jump off all right so as you can see um webrtc has a lot of moving parts actually let me let me uh go back to presenting yeah so as you can see webrtc has a lot of moving parts um it's definitely not trivial and uh to make this work better the peers and probably the signaling server would need to be able to handle um some of those timing issues a little better um but it worked well enough to kind of get a feel for how webrtc works so we'll go through here for future reference if you want to come down here you can see all of the fun uh all the fun terms we talked about these are some other terms uh dtls rtp and rcp those are kind of implementation details that are handled behind the scenes but you can learn more about those uh if you so desire um yeah so just and here's the sample code if you want to get that and play with it and lastly um i'll share the slides and sample code links probably on the meetup event as well as on the discord server um but here's a lot of really great resources uh that you can look at uh to kind of get a feel for like to get more information on webrtc how it works and implementing different use cases so one thing i'll call out is again these folks at pion they're a pretty active community who are building all this stuff um late one night i was on their slack channel and i had a question about how to get something working and like within like 15 minutes it was like late at night the one of the maintainers like reached out to like help me out which is pretty cool so my initial interactions with these folks has been nothing but positive and there's a lot of work to be contributed in this area um so they actually started this site webrtc curious which is uh super helpful but there's some parts that um are missing so there's like a media section in here somewhere um right so like you know ideally there would be some content here but there's not it's still a great resource but i i point that out to say there's there's opportunity for contribution um both here as well as other projects that pion has going on so if this is something uh that interests you um this would be like a great opportunity like a very good opportunity for a contribution and learning so definitely check them out yep all right so that's all i have i hope um hope you're inspired to go and and tinker with webrtc and uh and build some cool stuff uh does anyone have any questions in closing so see seems like most people have left already all right well uh well thanks everyone for coming and uh couple i'll just pass it back to you in case you have any closing remarks you want to make i just wanted to check uh puja suresh are you guys here still ravi can you hear us yes what was your experience of did you very able to learn something useful yes but it was a bit of confusing for the coding maybe i can catch up when i get the code base and then i can go through again but it was good explanation yeah it was a big information i guess for you yeah yeah like i think honestly like go like watching the code happen yeah it's really not the best way to learn um but yeah like honestly it took me like five times reading through example code to actually like understand how all the pieces work so um yeah i think that's gonna be everyone's experience how can i access this code base yeah it's on github um you can share it on discord puja i'm not sure if you are there in our discord or not but you can go to chat.kodoplex.org and that should uh let you join our discord chat room as well so but i went ahead and just uh sent a link in the in the uh in the messages yeah yeah uh even kapil can you just send discord yeah just a second so that that's the link uh if you follow that link you will be able to join our discord server we have uh many more developers from our community in that server in that chat room so you can ask questions share resources anything and hayden can also share slides and code and stuff there yeah thank you ravi sandhya what was your experience like were you able to learn uh something useful yeah the webmaster was completely new for me so it was too way too hard a bit of complex to understand but i think it will i will need some time to understand and go through the code and from the github i will try that then i think i may be able to understand by deep and all the networks how do it connect yeah sure uh if you have any questions or anything you can like post this session as well you can you can ask them in discord as well okay thank you yeah as you all are going through the code i'm happy that y'all just reach out to me i'm on discord so without any questions uh i'm happy to chat with you guys with without any questions you have sure thank you guys for joining the session uh since most of most people have left there's not much i have to add as well so let's hope like we can plan a few more sessions on this topic uh we might not have any other sessions for the rest of this month uh but we'll probably have a few from january onwards so you can uh just make sure you follow our meetup group and follow us on discord like keep keep track of discard because we keep posting there and you can you can find resources you can find other people to collaborate with learn with as well you you all if you're looking for a job opening or whatever you can you can find job openings there as well so just make sure you join the discord chat room join the meetup group and you will get updates for any future events meetups you organize and hayden thank you for the session it was very uh informative honestly and i've recorded as well so i'll be posting it on youtube and sharing it with all the people who have rsvp'd and everyone else so hopefully that should reach even more people in fact during the session i had a bunch of people reach out to me and ask me if we are recording this because they are not able to watch it right now so yeah so we'll hopefully we'll have even more people uh watching the recording uh on youtube later cool sounds good well i'm going to go and get my saturday started and i hope you all have a good saturday evening thank you aiden thank you everyone for joining thank you thank you

Channel: Coderplex Community

Views: 11,113

Rating: 4.9230771 out of 5

Keywords:

Id: vNX6if33FEk

Length: 119min 26sec (7166 seconds)

Published: Sat Dec 05 2020