WebRTC Crash Course

WebRTC (Web Real-Time Communication) is a free, open-source project that provides web browsers and mobile applications with real-time communication (RTC) via simple application programming interfaces (APIs).
In this video I go through WebRTC and discuss all the concepts of WebRTC in detail. We will learn about NAT, STUN, TURN, ICE, SDP, Signaling and we will show a demo too! Finally, we will talk about the pros & cons
0:00 Intro
3:44 WebRTC Overview
11:17 NAT
16:54 NAT Translation Methods
26:20 STUN
33:30 TURN
35:00 ICE
38:00 SDP
40:52 Signaling
43:30 WebRTC Demo
1:00:00 WebRTC Pros & Cons
1:04:00 Bonus WebRTC Content !
Resources
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
developer.mozilla.org/en-US/d...
tools.ietf.org/html/draft-iet...
support.frozenmountain.com/hc...
webrtcforthecurious.com/
getvoip.com/blog/2013/02/27/s...
www.onsip.com/voip-resources/...
io13webrtc.appspot.com/#52
Source Code
github.com/hnasr/javascript_p...
Digital Downloads Slides for this course (members get this free)
payhip.com/b/rD5Q
Support my work on PayPal
bit.ly/33ENps4
Become a Member on KZbin
/ @hnasr
🧑‍🏫 Courses I Teach
husseinnasser.com/courses
🏭 Backend Engineering Videos in Order
backend.husseinnasser.com
💾 Database Engineering Videos
• Database Engineering
🎙️Listen to the Backend Engineering Podcast
husseinnasser.com/podcast
Gears and tools used on the Channel (affiliates)
🖼️ Slides and Thumbnail Design
Canva
partner.canva.com/c/2766475/6...
🎙️ Mic Gear
Shure SM7B Cardioid Dynamic Microphone
amzn.to/3o1NiBi
Cloudlifter
amzn.to/2RAeyLo
XLR cables
amzn.to/3tvMJRu
Focusrite Audio Interface
amzn.to/3f2vjGY
📷 Camera Gear
Canon M50 Mark II
amzn.to/3o2ed0c
Micro HDMI to HDMI
amzn.to/3uwCxK3
Video capture card
amzn.to/3f34pyD
AC Wall for constant power
amzn.to/3eueoxP
Stay Awesome,
Hussein

[@hnasr]

Get my Fundamentals of Networking for Effective Backends udemy course Head to network.husseinnasser.com for a discount coupon (link redirects to udemy with coupon applied)

[@hnasr]

Yes! It is finally here! The WebRTC video and I manage to shrink it to 1 hour 10 minutes too enjoy guys timestamps for your convience guys! 0:00 Intro 3:44 WebRTC Overview (10:24 WebRTC Demystified) 11:17 NAT 16:54 NAT Translation Methods 18:12 Full-Cone NAT 21:00 Address-Restricted NAT 23:18 Port-Restricted NAT 24:11 Symmetric NAT 26:20 STUN 33:30 TURN 35:00 ICE 38:00 SDP 40:52 Signaling 43:30 WebRTC Steps 46:40 WebRTC Demo 1:00:00 WebRTC Pros & Cons 1:04:00 More WebRTC ! 1:04:30 getUserMedia 1:05:30 addIceCandidate 1:07:20 Custom TURN & STUN Server 1:08:30 COTURN spin up your TURN/STUN Server 1:08:40 Public STUN servers

[@alaadq8130]

thanks u man !!

[@DushyantDeshwal]

Thank you very much

[@arunmurugan2060]

Thanks for all your work :)

[@AlejandroGuerrero]

Thanks mate! I really appreciate the details you exposed here.

[@parvati877]

This Video deserves way more views than now. Thanks a'lot @Hussein Nasser. Will make sure your work goes unnoticed. Wish me luck I have an interview tomorrow.

[@abhinavsrivastava2824]

"Know how things work, cause you are an engineer. Do not rely on magical black boxes."

[@AlecArmbruster]

Spoken like the JavaScript Gandhi

[@dadmau5_338]

Who said that? you quoted, so... I'm curious

[@IgorRoztr]

Powerful stuff, especially knowing that very few will take this path.

[@khushalkhunt1095]

39:48 if anyone wondering

[@enkidu9298]

I write all of my code in sumerian, to be as extra and black box as humanly possible.

[@Algoritmik]

This is the most concrete WebRTC explanation I've ever got. Now I need a 3 hours Udemy course! I WANT IT!

[@ABHISHEK0058]

+1

[@littbytes]

+1

[@jeyraj3075]

+11111

[@joeporsche1767]

+1111111

[@mdmohiuddin3141]

[phone] don't know why i wrote this

[@johnyepthomi892]

Wow, man. This is such a gem. The way you take you time to explain each layer/concept is awesome. More importantly, you give a proper background for each topic, which is so important and most don’t do a good job at it. Hope you keep making such content. It’s very helpful.. This is a master class quality.

[@jatinsaini7790]

Best teacher ever!!! So detailed and the example........, wow just loved it!!!😍

[@JeffCaldwell-nemo_omen]

I love your style! I've been searching for good explanations of these concepts and most of them have fallen short in one way or another. Your video is great in that you not only go into enough detail to help watchers understand the underlying protocols, but you also communicate your own enjoyment of the subject. Great work!

[@hnasr]

❤️❤️

[@Epistemer]

not a single front end channel have made such a video, kudos to sir, the only youtuber that actually understands what he's doing deeeeeeep respect !!!!!!!!!!!!!

[@newmagicfilms]

I never saw a teacher talked like this. In the first minute I thought you are just joking.... after 1 hour I've understood your style, you don't let students to get bored. Awesome Crash Course . Thank you so much

[@pbeekharry]

This is by far the best WebRTC tutorial video out there, Nasser does a great job simplying the concept and oing thru it step by step.

[@mayankkaul3218]

One of the most naked videos I've seen about this technology. Learned a lot. Thanks!!

[@klinger2709]

This is by far the best explanation i found on WebRTC. Finally someone that understands WebRTC good enough to be able to explain it in an easy way and to give a demonstration people can work with! Thank you! You made at least one more person understand this topic!

[@AstonishedByTheLackOfCake]

This is one of the more informative videos I've seen regarding any development related topic just in general, and probably the best WebRTC resource available out there Your explanation just helped me throw out any unnecessary overhead for streaming live client data directly back to the local webserver I needed to have that data in the first place, thank you and kudos for your amazing work

[@SportsIncorporated]

I've been listening/watching many many WebRTC videos on KZbin. You did a great job.

[@ghostinplainsight4803]

When I figured out WebRTC after banging my head for a week because I didn't realize the answer and offer need to be synchronously set I wrote almost exactly the same messages between my new connections. Excellent tutorial, WebRTC was one of the harder technologies I have learned due to the lack of simple documentation and information on the subject. I didn't know about NAT I didn't think It mattered but you made it useful and interesting.

[@thedevenvironment]

The amount of effort it must have taken to make this so simple and straightforward is amazing! thank you for making this!

[@chenxin4741]

Dear Hussein Nasser, I'm new to your channel and I'm loving it. I have the exact philosophy as you do: I don't like black boxes. The only limitation is my time and energy. Your tutorials just fasten the revealing of the black boxes. Thanks a lot！

[@dvdmrn]

this is by far the best WebRTC guide out there. I find myself coming back here and there to confirm details, it's great

[@RahulPal-mz4oj]

Am I correct If I say that STUN and TURN servers are used only for signaling and once they have shared the meta-data , they communicate directly peer to peer without any third party involvement(without TURN and STUN)

[@dvdmrn]

@@RahulPal-mz4oj signaling is just sharing information about how to communicate between clients. STUN and TURN servers aren't used for signaling, signaling may have information _about_ those servers though. You can exchange that information any way you want, but often people will make a distinct signaling server. STUN servers are used in p2p connections whereas TURN servers are used to directly relay content similar to using a central server. This is useful when p2p connections cannot be established, which in my exp is pretty often.

[@amandwivedi6867]

I am from RTC world and I think the toughest two tasks are the hole punching in your router and writing SDP. You did a fantastic job mate.

[@hnasr]

Thank you 🙏

[@Primarycore]

This was a superb tutorial, entertaining to listen to and to the point throughout. No broken code and all the background information was both interesting and useful. Commendable indeed.

[@cosmic_realm]

This one hour lecture was so helpful and informative, thanks a lot Hussein for your time and the great work.

[@jl329g]

Absolutely one of the best presented lectures! Thank you.

[@boembab9056]

This video is so good, I was looking into webRTC and this helped so much!

[@serhiimamedov]

Man this is such a gem. I've tried to understand this technology. Read a lot of docs, asked chatGPT, watched videos but all explanations were really messy. They've confused me even more. This video is the best explanation of this topic there is. Thank you for your work!

[@hououinkyouma5372]

Thank you! I just managed to implement a webrtc-based conference demo app, and it all began when this video cleared my biggest confusions!

[@kamtanath4494]

Best videos on webRTC so far, very concise and still contextual covering all terminology.

[@GoldenBeholden]

Absolutely incredible video. I love your "vanilla-first" approach, as I dislike using libraries without knowing exactly what's being abstracted.

[@GoldenBeholden]

@@RahulPal-mz4oj Yes, though the STUN server isn't actually the signalling server; it only provides you with the necessary context to construct your SDP packets. The actual handshake is done via whichever method is convenient to the programmer. Let me know if you run into any trouble; I'll try to answer any questions you may have.

[@bilalshaikh6603]

@@GoldenBeholdeni have some questions can you help me.

[@GoldenBeholden]

@@bilalshaikh6603 Sure.

[@archidvignesh5368]

This guy is a gem. Needs a million subs

[@mattstephens3680]

WebRTC was very unclear to me until I watched this. You are so right that understanding NAT, STUN, TURN, ICE, and SDP is super important to fully understand the WebRTC protocol. Then the demo you shared just fell together like butter. Thanks so much Hussein :D You earned a sub.

[@aamin89]

This is the best explanation of WebRTC I have ever seen. And the demo - just awesome 😎

[@anupbiswal4413]

This is really beautiful. One of the most crispiest explanation I have heard till date about webRTC. Thank you!

[@dekcode2824]

Man, you really break the bone into pieces and look at it individually. Thank you!

[@dongler4589]

I've been racking my brain on how to get this even working. I have to create a system to test webRTC, this video helped a ton. Instant sub!

[@Lurco8]

Wow, the best video on the topic I've seen! No "stupid" question left unanswered, I really like this approach, thank you!

[@usamatahseenulhaque9125]

i am working as a webrtc Developer, but I still come back to this video time to time for refreshing my knowledge. Thanks you very much for this awesome content

[@pablojoaquim9285]

This video is the most clear I've found. Thank you very much for creating this great content!

[@hnasr]

Glad it helped!

[@jurianbraham3386]

Happy to be here...finally WebRTC!

[@hnasr]

Some of you asked how clients behind Address/port restricted can connect to each other? The trick is they will try to communicate both with a dummy packet which will be blocked by each recipient (because no ip/port mapping ) exist but the second packet will pass because each device will see that they attempted to connect to the other one so packets will be allowed This is hole punching From wiki In a somewhat more elaborate approach both hosts will start sending to each other, using multiple attempts. On a Restricted Cone NAT, the first packet from the other host will be blocked. After that the NAT device has a record of having sent a packet to the other machine, and will let any packets coming from this IP address and port number through. en.wikipedia.org/wiki/UDP_hole_punching

[@khayryazzez]

How i can deploy webRtc using microservise( load balancer) for example ( client create a room on server (tcp)=>( using roundrobin) and another user want to connect to that room ) how it work?

[@brod515]

why can't symmetric NAT use this technique as well? each client just sends a packet to the other IP on a specific port and then they have now tried to communicate with each other the next packet should be allowed because then everything should match, no? Edit: I think I understand the symmetric NAT know. the External Port is changed on each request.

[@RahulPal-mz4oj]

Are we sending the STUN server addresses or the addresses obtained by the STUN servers in the SDP?

[@punto-y-coma7890]

Thank you sr, you really nailed it down to the basics. I really liked the Demo and I have to say one of the best demos that I've ever seen: basic, simple and direct to the point :)... congrats! Keep it up.

[@nickelpence]

Found this video just two days ago, and was able to get a user script working in Firefox In basically no time (if I don't count a few typos I spent hours debugging...); now I have to try and solve the problems chrome I giving me by keeping the data connection object in "connecting" state. Overall, this video is awesome and easy to understand! Furthermore, the calm, clear and soft voice is a pleasure to the ears.

[@zhaowang7340]

Great video !!!! That's exactly what I need to know for WebRTC from what needs to be solved to how it works. Great logic makes clear explanations!

[@chadzulu4328]

I love listening to Hussein talk, learning WebRTC is icing on the cake. This tutorial is amazing, thanks so much!

[@pujyakothapalli448]

U taught me something that would take me at least 3 days to learn it all by myself in just an hour!!! Thank you so much dude!!! :)))

[@ajaysingh26581]

Your explanation was THE MOST SIMPLISTIC one. I was going all over until i saw your explanations. Keep doing what you do👍👍

[@hamadadel1947]

After watching your awesome videos for a short time I realize that in order to be a professional backend engineer you must be at first be a good networking engineer.

[@mrnobody9268]

Absolutely amazing video. I never knew about NAT and this opened my eyes to a total new area. Thank you, amazing.

[@samarths]

Dayumn!! that's such a comprehensive video. Thank you for making it.

[@thepotatokitty]

Finally! Been waiting for this since some time now :D

[@miger-lk]

"Don't use the technology which you don't understand" - Great Line by Hussein Nasser

[@abdurhmanalsobhi4564]

so dont use Windows !

[@ahmedazeez9253]

All these things are just for talk, he probably uses a mic and doesnt know how it works at electron level.

[@sanmeetsingh4]

Just saw your other video .... You were looking too frustrated about webRTC and how it's not simple to understand .... But now I see where did that research went ! (1 year exploring WEBRTC).. Just Awesome 👍

[@maskman4821]

Thank you for this terrific tutorial, now I finally understand how webrtc works and am able to figure out the documents on webrtc official website and plenty of source codes out there, It took me really long time to eventually figure it out, so long... I love the demo part particularly, you explain the flow step by step and walk us through, as long as we comprehend the flow and the usage of the web api, then it is not difficulty at all, thanks again for this awesome tutorial !!! Basically we can divide the flow into four parts: 1. caller set local description by creating an offer; 2. callee set 'offer' as remote description; 3 callee set local description by creating an answer; 4. caller set 'answer' as remote description. and that's all, that's how we create connection between 2 peers !!!

[@maskman4821]

I just realized simplepeer and peerjs make life way so much easier, I think I will go with wrapper library, no need to spend too much time battling with low level api !!!

[@balaganesh3440]

One of the best and in-depth explanation of WebRTC!

[@yashgaur9619]

I don't remember the last time I was this happy learning stuff. God's work.

[@activemediasystems]

Salaam Hussein, you totally nailed this, love the reduce the problem to the basics style. Best explanation ever. btw I've raised a code issue in git to fix Peerb.js

[@richardjoy8925]

Fansastic explanaton. I have been circling around the internet to understand these concepts. Love your work!!

[@AnooshCNayak]

This is the cleanest and complete video i have seen on YT w.r.t WebRTC. Thanks a lot

[@hnasr]

💪💪❤️ thanks!

[@paulsalele3844]

Thank you for taking the time to make this!!

[@navalrox]

I had some confusion although I had already created a project using it, but now I understand it through and through. Thanks a lot great explanation.

[@luiscermeno986]

Dude you are a genius! Your demo was fantastic!!

[@samyaahmed6972]

That was a FUN tutorial, great explanation. Thank you. Webrtc is amazing.

[@CarlosSousa-qo4ob]

Great!!! I enjoyed the video, mainly the DEMO with each line description. Thank you for your time.

[@jay290489]

brilliant.. this is how one must teach something. You have set a benchmark of "how to teach".. Thank You very much for this effort.

[@AdarshMenon]

Wow really great stuff Hussein ! Thank you !!

[@tech3425]

I love the attitude towards questions

[@vadivelkumar9718]

"we dont do magic here"

[@user-hg9qy6ny2p]

Thanks a lot for this video. I have been trying to build a video calling application, but simply copy pasting the coding didn't seem fair so tried to at least know the basic of how web rtc works, this video was a perfect for that. Again thanks for providing 1 hour of pure gold... 👍

[@virendrabhati6685]

I love your way of decode technical concept. WebRTC was too completed to understand but this video made it simple. Block by block things explain.......❤️👍

[@sujeewae6599]

This session is liquid gold.

[@gustonalwanga5353]

The voice and mode of delivery is soothing in some way, convinces me that webRTC is not really hard to understand 😝.. very unique, love it

[@rankostevanovich2496]

Amazingly explained! Thanks for your work, Hussein.

[@hnasr]

Glad it helped! as a Member you get access to the slides as well :) check out the member only section

[@MrThryler444]

This is a great video! I really enjoyed it. Maybe you can dive deeper and make a follow up with the different architectures mesh, SFU and MCU and when you need a STUN/TURN and how you make the signaling in those scenarios.

[@usamatahseenulhaque9125]

Most awaited video thank you very much

[@salmanfarce3995]

you are an life saver for me hussain.. this is what my project is about ...thank you so so much

[@G5STU]

Just watched this all the way, love your style :)

[@karyanaukar5803]

Great job ! Nice presentation 👍👍 Thank you for putting your efforts in this video .. I really learned a lot from it ! I really admire the detail you're giving ! Top notch !

[@tripathiabhay1]

You have done a great job, definitely we don't do magic here but a whole lot of dedication and hard work

[@blankslate6393]

Brilliant and amusing. It's hard to explain a web technology and not be boring. And you have this art. That's why I can not have enough of your educational content. Please also make one explaining Torrent protocol. There are very few material out there for general public.

[@joelwembo]

Nasser , this is the best of web rtc have seen so far, thanks a lot

[@abdulazeezthankayathil9383]

Dear Hussein, Excellent explanation on basic concept of WebRTC. It is really appreciated.

[@carljustinemosquida9614]

Yes! an exact course at the right time. Thank you

[@user-pw7vt8st8d]

Amazing explanation, thank you for demystifying webRTC from scratch !! Big respect

[@sdeske]

Loved this. You unscrambled my brain.

[@WiseGuyFTW]

Thank You! Really good explanation, using the browser to demo was the best part.

[@laurentdhont8667]

This is exactly what I needed! Thank you

[@pollyolly851]

I learned a lot. Now I know what I need for WebRtc based apps. Subscribed!

[@ernanibatista1806]

Best Video that explain whar is WEBRTC on internet, if yu re here don't change.

[@sokhuonguon9251]

The best video I even found for WebRTC

[@BlackM3sh]

Thank you so much for making this!

[@seydullanarkulyyev2729]

The best explanation of WebRTC I have ever seen

[@tube-rp1nb]

i think this is the only concrete and organized information about webrtc. thank you

[@eytanmanor]

I went through the course very thoroughly. I think you forgot to mention a very important fact about Symmetric NAT configuration (or at least you didn't emphasize it enough) - it actually maps the internal IP and port to a different set of external IP and port, respectively to the destination IP and port, which will prevent us from establishing an initial connection. This is NOT the case with full cone and restricted cone. From what you show on the video, one might think that port restricted cone is the same as symmetric config, you even highlighted exactly the same entries on the table. I enjoyed your course overall, I'm definitely gonna use some of your info

[@jaysonaccount6388]

I was thinking the exact same thing and I couldn't find an answer. Thanks

[@rubendelgado5627]

Awesome explanation and really fun to follow, nice crash course!

[@PaulFidika]

Best WebRTC video I've ever watched.

[@nidakhan_8]

By far the most amazing video. I got to know mistake in my code through this video. Thank you so much... 😊

[@a_k__]

Absolutely great content man. Keep up the good work!

[@hnasr]

Glad you enjoy it Ali! thanks for being a long time sub

[@lucas_badico]

Hussein, you are one of the best, loved the whole explanaition, really, I would love more deep dive in the tradeoffs of having a webrtc with multiple participants as in discord.

[@BR-lx7py]

This is gold!

[@lachezarraychev1391]

This was just awesome to watch. Thank you!

[@AntonSamokat]

This was incredible. Thanks for presentation!

[@elbeenny]

Huge thanks for this crash course. You are a very good explainer!