WebRTC Crash Course

Подписаться 406 тыс.

Просмотров 218 тыс.

50% 1

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 RU-vid
/ @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

Наука

Опубликовано:

9 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 483

@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 3 года назад

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 3 года назад

thanks u man !!

@DushyantDeshwal 3 года назад

Thank you very much

@arunmurugan2060 3 года назад

Thanks for all your work :)

@AlejandroGuerrero 3 года назад

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

@parvati877 3 года назад

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 3 года назад

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

@AlecArmbruster 3 года назад

Spoken like the JavaScript Gandhi

@dadmau5_338 2 года назад

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

@IgorRoztr 2 года назад

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

@khushalkhunt1095 2 года назад

39:48 if anyone wondering

@enkidu9298 Год назад

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

@JeffCaldwell-nemo_omen 3 года назад

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 3 года назад

❤️❤️

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

@pbeekharry 2 года назад

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.

@usamatahseenulhaque9125 13 часов назад

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

@Epistemer 3 года назад

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 3 года назад

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 2 года назад

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 2 года назад

@@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 3 года назад

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

@ABHISHEK0058 3 года назад

@littbytes 3 года назад

@jeyraj3075 3 года назад

+11111

@joeporsche1767 3 года назад

+1111111

@mdmohiuddin3141 3 года назад

+11111111 don't know why i wrote this

@klinger2709 3 года назад

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!

@jatinsaini7790 3 года назад

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

@AstonishedByTheLackOfCake 2 года назад

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

@chenxin4741 3 года назад

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！

@mayankkaul3218 3 года назад

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

@serhiimamedov 3 месяца назад

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!

@ghostinplainsight4803 3 года назад

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.

@GoldenBeholden 3 года назад

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

@GoldenBeholden 2 года назад

@@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 7 месяцев назад

@@GoldenBeholdeni have some questions can you help me.

@GoldenBeholden 7 месяцев назад

@@bilalshaikh6603 Sure.

@thedevenvironment 9 месяцев назад

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

@SportsIncorporated 3 года назад

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

@Primarycore 2 года назад

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.

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

@dongler4589 3 года назад

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!

@jl329g Год назад

Absolutely one of the best presented lectures! Thank you.

@Lurco8 8 месяцев назад

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

@newmagicfilms 8 месяцев назад

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

@hououinkyouma5372 2 года назад

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

@cosmic_realm 2 года назад

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

@boembab9056 3 года назад

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

@anupbiswal4413 3 года назад

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

@pablojoaquim9285 3 года назад

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

@hnasr 3 года назад

Glad it helped!

@amandwivedi6867 3 года назад

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 3 года назад

Thank you 🙏

@richardjoy8925 3 месяца назад

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

@kamtanath4494 Год назад

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

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

@hnasr 3 года назад

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 3 года назад

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 3 года назад

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 2 года назад

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

@aamin89 3 года назад

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

@archidvignesh5368 3 года назад

This guy is a gem. Needs a million subs

@chadzulu4328 Год назад

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

@dekcode2824 2 года назад

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

@mrnobody9268 9 месяцев назад

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

@AnooshCNayak 3 года назад

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

@hnasr 3 года назад

💪💪❤️ thanks!

@ajaysingh26581 3 года назад

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

@vadivelkumar9718 3 года назад

"we dont do magic here"

@pujyakothapalli448 3 года назад

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

@samarths 3 года назад

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

@usamatahseenulhaque9125 2 года назад

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

@nickelpence 2 года назад

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.

@joelwembo Год назад

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

@CarlosSousa-qo4ob Год назад

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

@maskman4821 3 года назад

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 3 года назад

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

@sanmeetsingh4 2 года назад

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 👍

@salmanfarce3995 Год назад

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

@user-pw7vt8st8d 3 месяца назад

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

@jurianbraham3386 3 года назад

Happy to be here...finally WebRTC!

@activemediasystems 3 года назад

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

@navalrox 6 месяцев назад

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.

@tech3425 Год назад

I love the attitude towards questions

@zhaowang7340 3 года назад

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!

@thepotatokitty 3 года назад

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

@yashgaur9619 2 года назад

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

@tube-rp1nb 2 года назад

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

@hamadadel1947 3 года назад

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.

@balaganesh3440 Год назад

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

@pollyolly851 3 года назад

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

@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

@user-hg9qy6ny2p 9 месяцев назад

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

@seydullanarkulyyev2729 2 года назад

The best explanation of WebRTC I have ever seen

@paulsalele3844 3 года назад

Thank you for taking the time to make this!!

@jay290489 2 года назад

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

@luiscermeno986 3 года назад

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

@usamatahseenulhaque9125 3 года назад

Most awaited video thank you very much

@elbeenny 5 месяцев назад

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

@samyaahmed6972 3 года назад

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

@sdeske 11 дней назад

Loved this. You unscrambled my brain.

@MrThryler444 3 года назад

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.

@ernanibatista1806 Год назад

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

@RahulYadav-dd7qe Месяц назад

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

@rankostevanovich2496 3 года назад

Amazingly explained! Thanks for your work, Hussein.

@hnasr 3 года назад

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

@AdarshMenon 3 года назад

Wow really great stuff Hussein ! Thank you !!

@PaulFidika 2 года назад

Best WebRTC video I've ever watched.

@WiseGuyFTW 3 года назад

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

@G5STU 2 года назад

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

@virendrabhati6685 3 года назад

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

@tripathiabhay1 3 года назад

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

@sokhuonguon9251 3 года назад

The best video I even found for WebRTC

@laurentdhont8667 3 года назад

This is exactly what I needed! Thank you

@karyanaukar5803 2 года назад

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 !

@abdulazeezthankayathil9383 2 года назад

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

@nidakhan_8 2 года назад

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

@sujeewae6599 Год назад

This session is liquid gold.

@blankslate6393 2 года назад

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.

@AntonSamokat 2 года назад

This was incredible. Thanks for presentation!

@meirivry3744 Год назад

WOW, amazingly simple. Thanks!

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