WebRTC Crash Course

[@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.

[@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.

[@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]

❤️❤️

[@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.

[@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 !!!!!!!!!!!!!

[@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.

[@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

[@ram_pednekar14]

+1

[@jeyraj3075]

+11111

[@joeporsche1767]

+1111111

[@mdmohiuddin3141]

[phone] don't know why i wrote this

[@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.

[@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!

[@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.

[@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 🙏

[@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

[@Lurco8]

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

[@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!

[@nahdig8yth233]

hhah me to bro

[@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?

[@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！

[@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.

[@mayankkaul3218]

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

[@jatinsaini7790]

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

[@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!

[@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.

[@archidvignesh5368]

This guy is a gem. Needs a million subs

[@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 !!!

[@AnooshCNayak]

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

[@hnasr]

💪💪❤️ thanks!

[@pablojoaquim9285]

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

[@hnasr]

Glad it helped!

[@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.

[@SportsIncorporated]

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

[@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

[@jl329g]

Absolutely one of the best presented lectures! Thank you.

[@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 👍

[@thedevenvironment]

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

[@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.

[@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.

[@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!

[@reesewilson]

Super video! I applauded for $2.00 👏

[@hnasr]

🙏thank you Reese

[@chadzulu4328]

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

[@boembab9056]

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

[@yashgaur9619]

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

[@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

[@richardjoy8925]

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

[@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

[@ajaysingh26581]

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

[@rimo8833]

Hats off to u my man, i made a video calling application with half assed understanding of it, watching ur video gave me full clarity.

[@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!!! :)))

[@anupbiswal4413]

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

[@mrnobody9268]

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

[@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

[@cosmic_realm]

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

[@aamin89]

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

[@usamatahseenulhaque9125]

I have just decided to write a minimal WebRTC stack from scratch all protocols used in WebRTC RTP ICE DTLS STUN TURN all these without using any third party libraries , just came here to rewind few concepts about hole punching and NAT. Thanks again for this amazing content

[@bobby9568]

go play outdoors and enjoy your youth

[@awfultrash888]

All this stuff makes so much sense now, thank you for your work, man!

[@Dylan_Rider]

great video!!! i feel so much more comfortable with this now and i appreciate you for creating that opportunity for me!

[@kamtanath4494]

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

[@ernanibatista1806]

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

[@CarlosSousa-qo4ob]

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

[@pollyolly851]

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

[@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.

[@HarshitPrasad-n8e]

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... 👍

[@usamatahseenulhaque9125]

Most awaited video thank you very much

[@samarths]

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

[@xcdcd214]

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

[@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.

[@sokhuonguon9251]

The best video I even found for WebRTC

[@seydullanarkulyyev2729]

The best explanation of WebRTC I have ever seen

[@jurianbraham3386]

Happy to be here...finally WebRTC!

[@balaganesh3440]

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

[@salmanfarce3995]

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

[@luiscermeno986]

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

[@tube-rp1nb]

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

[@dekcode2824]

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

[@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

[@AndreIasi]

One of the best software channels of all time!

[@marekmaska3643]

Díky!

[@hamedhosseini2155]

WTF! I don't say anything all things were clear. Thank you man for hard-working on this subject.

[@hardikawasthi6210]

The best WebRTC tutorial currently available on KZbin !!!

[@causality5698]

P2P doesnt break with 100 clients, its more data expensive though lets say we have 5 peers A, B, C, D A connects to B, C B connects to A, D C connects to A, B D connects to B This mesh is enough to propagate all the information (and this is how blockchains generally work, you arent connecting to each and every node operator)

[@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.

[@sulimanbabar]

Every youtube tutorial should follow The Net Ninjal style..fast paced..to the point...short... Edit: thanks for your efforts and time...

[@echo-ps9685]

you got me at no magic here, i'm only 3 mins into this video and i know it's gonna be epic.

[@codeunited5905]

🎯 Key Takeaways for quick navigation: 03:53 🌐 *WebRTC was built to transmit audio and video media in a standardized and low-latency way.* 05:33 🔄 *WebRTC enables rich communication between browsers, allowing access to cameras and microphones.* 09:55 🔄 *WebRTC establishes a peer-to-peer connection through a signaling process, using SDP (Session Description Protocol).* 11:16 🌐 *To demystify WebRTC, understanding network address translation (NAT) methods is crucial.* 15:10 🔒 *Four NAT translation methods: One-to-One NAT, Address-Restricted NAT, Port-Restricted NAT, and Symmetric NAT.* 19:05 🔐 *One-to-One NAT (Full Cone NAT) forwards packets to the internal IP and port without exception.* 21:28 🔍 *Address-Restricted NAT allows packets if the source address matches the NAT table, regardless of the port.* 23:33 🔐 *Port-Restricted NAT requires both address and port to match the NAT table for packet forwarding.* 10:36 🎥 *Understanding NAT methods is essential for comprehending the intricacies of WebRTC.* 24:01 🌐 *Symmetric NAT is the most restrictive type; it only allows communication if the exact same four pairs match, providing a high level of security.* 25:55 🚫 *WebRTC doesn't work well with Symmetric NAT because it uses STUN servers to obtain public IP addresses, and Symmetric NAT restricts communication to the specific pair created for the STUN server.* 26:38 🔄 *STUN (Session Traversal Utilities for Network Address Translation) is a lightweight utility that helps discover public IP addresses and ports, facilitating communication in WebRTC.* 27:48 🌐 *STUN servers are cheap to maintain, and Google provides public STUN servers for free use in WebRTC applications.* 30:41 🤖 *ICE (Interactive Connectivity Establishment) gathers and collects various network options, called ICE candidates, which are sent via SDP (Session Description Protocol) to establish WebRTC connections.* 35:09 🔄 *TURN (Traversal Using Relays around NAT) servers are used in WebRTC for scenarios where direct peer-to-peer communication is not possible, especially with Symmetric NAT.* 38:16 🔄 *SDP (Session Description Protocol) is a critical file in WebRTC, describing ICE candidates, networking options, media, and security configurations for establishing communication.* 42:12 🤝 *Signaling in WebRTC involves exchanging SDP files between parties to establish and coordinate communication. WebSocket or HTTP can be used for signaling.* 43:51 🔐 *Understand the entire WebRTC process and avoid relying solely on frameworks to ensure effective troubleshooting and problem-solving in case of issues.* 47:11 🤖 *WebRTC connection establishment involves creating an offer, sending it to the other party, and establishing a channel through remote and local descriptions.* 48:36 🛠️ *To initiate WebRTC communication, create a local connection using `rtcPeerConnection` and set up a data channel for communication.* 51:53 🌐 *Utilize the `createOffer` method to generate an SDP offer and set it as the local session description.* 54:29 📡 *Establishing the receiving end involves creating a remote connection and capturing the data channel when received.* 58:05 💬 *After obtaining the answer, set the remote description and establish a bidirectional communication channel.* 01:00:25 👍 *Pros of WebRTC include peer-to-peer communication, low latency for high bandwidth content, and a standards-based API.* 01:02:14 👎 *Cons involve the potential need for a TURN server, maintaining STUN and TURN servers, and challenges with peer-to-peer in the case of multiple participants.* 01:03:25 🎮 *WebRTC might not be suitable for large-scale multiplayer games due to the challenges of handling numerous connections.* 01:06:28 🔧 *Additional details include handling new ICE candidates with the `addIceCandidate` method and customizing STUN and TURN servers in the configuration.* Made with HARPA AI

[@tripathiabhay1]

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

[@paulsalele3844]

Thank you for taking the time to make this!!

[@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.

[@tech3425]

I love the attitude towards questions

[@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.

[@zhimingkoh1029]

Thanks!

[@abdulazeezthankayathil9383]

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

[@NawfalHaddi]

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

[@sujeewae6599]

This session is liquid gold.

[@RahulYadav-dd7qe]

This is what I call a tutorial. Boi, you did a great job. Thanks! :D

[@yashmathur1389]

Like for Address Restricted, Port Restricted there will be a prior connection made so that the ip and port requests can be mapped. Why the same thing is not possible in Symmetric NAT case. Like prior connection will store the IP and PORT values in the table and when request will be made from the same port and ip peer to peer connection will be established.

[@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.

[@thepotatokitty]

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

[@ryanleemartin7758]

respect to you sir, for pointing out the scourge of ignorance we have beset upon ourselves with our black boxes and freewheeling code slinging!

[@G5STU]

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

[@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.......❤️👍

[@samyaahmed6972]

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

[@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!

[@PaulFidika]

Best WebRTC video I've ever watched.