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)
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 !!!!!!!!!!!!!
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 !
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.
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.
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
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?
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.
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!
@@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.
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)
@@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.
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.
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.
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)
I tried pasting the codes in two browsers as given in your github repository and I received this error when tried sending the message (after setting peerA remote description) *Uncaught DOMException: Failed to execute 'send' on 'RTCDataChannel': RTCDataChannel.readyState is not 'open'* Could you please help me ... apart from this the video and the explanation was great, thanks
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.
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
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!
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
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！
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
Ok I have questions. You mention P2P was simpler back when everyone had a public IP address. Does WebRTC change if it involves IPv6? Would that simplify the communication because we wouldn't have to do NAT for public/private IPv4s? Or is that a security problem?
If we figure out ipv6 and configure it correctly such that every device is indeed routable and public than yes its easier , security is always a concern of course of applications are exposed.
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
I saw this earlier today, but I didn't have the time to watch it all yet. A great refresher for me. 32:49 I assume a connection from the other side would work. 55:52 well, technically this isn't client/server anymore, this is: peer 2 peer. :-) What I'm missing in your description is that the SDP also includes a public key to establish the encrypted TLS connection. Just like TLS connection for HTTPS where the public key is part of the certificate. Although the information is kind of private it doesn't have to remain secret. But if you want to prevent a man-in-the-middle you really do want to sent it over TLS for example websocket on your HTTPS site, then you have a real secure connection between 2 browsers. Because WebRTC is a peer2peer connection which means you can use it for anything you like. Have you for example seen WebTorrent ?
I always enjoy your comments keep them up! Yes SDP contains the TLS parameters thats what I meant by security info. I need to make a video on torrent and peer to peer technology I haven’t heard about web torrents any good resources you can share?
@@hnasryeah, most of it are topics I already know a bunch about. Sometimes it's interesting to see how other people explain it. just the main website: webtorrent-dot-io, it's bittorent and WebRTC combined. :-)
Here's a project built on WebRTC www.meshcommander.com/home. It has tons of information and a github repo to look at the source code.github.com/Ylianst/MeshCentral. This guy has done a great implementing this for Remote Desktop access. Great video BTW. Keep up the good work.
In my opinion You can leverage existing tools as long as you know what the tool does and whether it fits your use case or not. Discord wrote everything from scratch on top of the WebRTC raw API for example
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!
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
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.
Hello Hussein, I have followed all the steps and I got the following error: new-tab-page/: Uncaught (in promise) InvalidStateError: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable
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 👍
Thanks for the detailed video Sir. Always appreciate your content. Just wanted to check if @31.22 it should have been "Hey 7.7.7.7:4444......" instead of "Hey 7.7.7.7:3333"
Awesome just what I need, seriously Bro you totally demystified WebRtc thank you so much for this. Please 🙏 can you also do a video demystifying SFU and how many to many actually works?
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.
Hey, thank you, it was really a great explanation. I got the p2p concepts but one question still haunts me, how to add more than one remote connection for direct p2p, like I want 3 users to connect to each other via p2p. Please answer this question as I believe others must also be asking it in their minds.
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 !!!
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 !!!
🎯 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
This is a fantastic video. Thanks for doing it. I do have a Q. In the slide 'STUN when it doesn't!', how does the client with internal IP, 10.0.0.2, and public address, 5.5.5.5:3333, know the public address, 7.7.7.7:4444, of the router for client with internal IP, 192.168.1.2?
🔥 It is done through an off the network exchange like I explained in the beginning. This is part of the SDP which will be sent over whatsapp, career pigeon, email.. anything
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.
Congratulations on the video. I have a question. I have a video on vmix and copying the url of the video on the browser works and in Inspect I have a Json object called vMixCall in which the answer is present. vMixCall: {"type": "answer", "sdp": "v = 0 \ r \ no = IceLink ......."} how can i show this video of vMix on my webpage in localhost: 3000?
in my case the call to lc.setRemoteDescription(answer); on client 1 doesnt initiate the connection as in ur case. the returned promise has a result of undefined. moreover, if i chain a .then() call after this promise i get an error in my console DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable could my NAT be an issue? 🤔
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.
What would be best way to build live streaming app then since WebRTC is impractical (for example 100 people * 100 connections mean 10000). Going through AWS in traditional way is too expensive (around 65 dollar an hour for live streaming session with 1000 viewers)
China Moblie (one of the three ISP in China) doesn't not give you public IP. I wonder how the ISP mapped many people within a subnet(LAN). How many ports should the router have to make this possible? The other two ISP. On some chinese forum, I find some instruction to get public IP by changing the modem to bridge mode and use your own router to dial-up. First, get into the admin account of the router and note down the Vlan_id and Logic_id of your broadband. Then change the modem to bridge mode using the logic_id with putty's telnet hacking. Then every time you dial-up you get a public ip. Is it common wordwide that the ISP simply don't give you public ip? I think many people in China do not know what is a "public ip".
if we use whatsapp for example for signaling: the local should send sdp to remote via whatsapp, then the remote should send another one to local via again whatsapp, is that true, because i feel confused when i simulate it to google meet
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)
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 !!!!!!!!!!!!!
"Know how things work, cause you are an engineer. Do not rely on magical black boxes."
Spoken like the JavaScript Gandhi
Who said that? you quoted, so...
I'm curious
Powerful stuff, especially knowing that very few will take this path.
39:48 if anyone wondering
I write all of my code in sumerian, to be as extra and black box as humanly possible.
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 !
Who came from Neeraj Vai (ezSnippet) ❤❤
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
thanks u man !!
Thank you very much
Thanks for all your work :)
Thanks mate! I really appreciate the details you exposed here.
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.
Who come from web development cohort❤ by harkirat
What , does harkirat suggested to watch it?
Broooo, came from ezSnippet ❤
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.
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
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?
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.
Are we sending the STUN server addresses or the addresses obtained by the STUN servers in the SDP?
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!
❤️❤️
Best teacher ever!!! So detailed and the example........, wow just loved it!!!😍
This is the most concrete WebRTC explanation I've ever got. Now I need a 3 hours Udemy course! I WANT IT!
+1
+1
+11111
+1111111
+11111111
don't know why i wrote this
Your video is very informative but the way you talk and try to be engaging is quite annoying. Consider a more leveled presentation style.
This video is the most clear I've found. Thank you very much for creating this great content!
Glad it helped!
One of the most naked videos I've seen about this technology. Learned a lot. Thanks!!
Absolutely one of the best presented lectures! Thank you.
Absolutely incredible video. I love your "vanilla-first" approach, as I dislike using libraries without knowing exactly what's being abstracted.
@@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.
@@GoldenBeholdeni have some questions can you help me.
@@bilalshaikh6603 Sure.
This video is so good, I was looking into webRTC and this helped so much!
Has anyone tried the demo in Firefox? I found it works in Chrome but not in Firefox. Why?
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.
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!
this is by far the best WebRTC guide out there. I find myself coming back here and there to confirm details, it's great
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)
@@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.
This guy is a gem. Needs a million subs
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.
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.
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)
I tried pasting the codes in two browsers as given in your github repository and I received this error when tried sending the message (after setting peerA remote description)
*Uncaught DOMException: Failed to execute 'send' on 'RTCDataChannel': RTCDataChannel.readyState is not 'open'*
Could you please help me ... apart from this the video and the explanation was great, thanks
Now, tried this on firefox and it gave this error:
WebRTC: ICE failed, add a STUN server and see about:webrtc for more details
Hey Robin , did you copy the offer object to the other browser as I did ? That error happens usually if you don’t wait for the SDP to complete
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.
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.
Thank you 🙏
IP spoofing can't be used for symmetric NAT,wherein client can use stun server IP address:port for which the port is opened at NAT router?
Man aside your video is so good, I'd say excellent(your content is very well explained and easy to understand) you'd made my day 40:13 😂😂🤣 KEEP IT UP!
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
I was thinking the exact same thing and I couldn't find an answer. Thanks
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!
Wow, the best video on the topic I've seen! No "stupid" question left unanswered, I really like this approach, thank you!
Most awaited video thank you very much
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
best video on webRTC
"Don't use the technology which you don't understand" - Great Line by Hussein Nasser
so dont use Windows !
All these things are just for talk, he probably uses a mic and doesnt know how it works at electron level.
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！
Every youtube tutorial should follow The Net Ninjal style..fast paced..to the point...short...
Edit: thanks for your efforts and time...
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
Can we like one video 1000000 times in youtube?🤔
This is the cleanest and complete video i have seen on YT w.r.t WebRTC. Thanks a lot
💪💪❤️ thanks!
I've been listening/watching many many WebRTC videos on RUclips. You did a great job.
Ok I have questions. You mention P2P was simpler back when everyone had a public IP address. Does WebRTC change if it involves IPv6? Would that simplify the communication because we wouldn't have to do NAT for public/private IPv4s? Or is that a security problem?
If we figure out ipv6 and configure it correctly such that every device is indeed routable and public than yes its easier , security is always a concern of course of applications are exposed.
Can you make a video on your research and video creation processes?
Interesting! I usually document my research in RUclips stories but this might be good as vidro
I learned a lot. Now I know what I need for WebRtc based apps. Subscribed!
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
go play outdoors and enjoy your youth
sdp sdp sdp imp 😎
I saw this earlier today, but I didn't have the time to watch it all yet. A great refresher for me.
32:49 I assume a connection from the other side would work.
55:52 well, technically this isn't client/server anymore, this is: peer 2 peer. :-)
What I'm missing in your description is that the SDP also includes a public key to establish the encrypted TLS connection.
Just like TLS connection for HTTPS where the public key is part of the certificate. Although the information is kind of private it doesn't have to remain secret.
But if you want to prevent a man-in-the-middle you really do want to sent it over TLS for example websocket on your HTTPS site, then you have a real secure connection between 2 browsers.
Because WebRTC is a peer2peer connection which means you can use it for anything you like. Have you for example seen WebTorrent ?
I always enjoy your comments keep them up!
Yes SDP contains the TLS parameters thats what I meant by security info.
I need to make a video on torrent and peer to peer technology I haven’t heard about web torrents any good resources you can share?
@@hnasryeah, most of it are topics I already know a bunch about. Sometimes it's interesting to see how other people explain it.
just the main website: webtorrent-dot-io, it's bittorent and WebRTC combined. :-)
Here's a project built on WebRTC www.meshcommander.com/home. It has tons of information and a github repo to look at the source code.github.com/Ylianst/MeshCentral. This guy has done a great implementing this for Remote Desktop access.
Great video BTW.
Keep up the good work.
Wow really great stuff Hussein ! Thank you !!
You can add your own junk in this if you want to.😂
hello sir, i like your videos, help a lot. can you take about arangoDb database. please.
i'm behind a CGnat what should i do Nasser ?? by the way i really like your videos , keep this motivation
Wow! Been looking forward to this, I need a quick advice, is it right to build from scratch or leverage the ones already built
In my opinion You can leverage existing tools as long as you know what the tool does and whether it fits your use case or not. Discord wrote everything from scratch on top of the WebRTC raw API for example
@@hnasr thanks alot Boss
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!
Pretty neat example. You make it this confusing WebRTC thing simple.
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
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.
Hello Hussein, I have followed all the steps and I got the following error: new-tab-page/: Uncaught (in promise) InvalidStateError: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable
So I am here after ezsnippet❤
Great work man!
I like your voice, Have you ever tried to be a radio storyteller?
Fantastic voice, you are talented.
Nice of you to say! I may consider it :)
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 👍
Thanks for the detailed video Sir. Always appreciate your content. Just wanted to check if @31.22 it should have been "Hey 7.7.7.7:4444......" instead of "Hey 7.7.7.7:3333"
I see you fixed it at 32.59 for a different case but i just posted my comment while watching the video.
My bad! good catch.. yes that was a mistake
Awesome just what I need, seriously Bro you totally demystified WebRtc thank you so much for this. Please 🙏 can you also do a video demystifying SFU and how many to many actually works?
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.
40:00 for shame
For shame, lmfsao brilliant videos man.
Man this is awesome content . Very well explained . Thanks alot
Hey, thank you, it was really a great explanation. I got the p2p concepts but one question still haunts me, how to add more than one remote connection for direct p2p, like I want 3 users to connect to each other via p2p. Please answer this question as I believe others must also be asking it in their minds.
Happy to be here...finally WebRTC!
Absolutely amazing video. I never knew about NAT and this opened my eyes to a total new area. Thank you, amazing.
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 !!!
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 !!!
you are the best. i like your pace!
Thank you for this amazing video!! For native applications is it basically the same thing or I have to consider something else too?
🎯 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
Thank you! I just managed to implement a webrtc-based conference demo app, and it all began when this video cleared my biggest confusions!
Amazing explanation, thank you for demystifying webRTC from scratch !! Big respect
Thanks! I have one question left: Does Webrtc optimize video quality based on user's internet connection bandwidth?
Yes, WebRTC code will automatically determine the available bandwidth and scale down the video resolution accordingly
Hi Hussein. Great video. Do you have a video that would explain how to handle multiple people (more than 2) connecting to the same session?
This is a fantastic video. Thanks for doing it. I do have a Q. In the slide 'STUN when it doesn't!', how does the client with internal IP, 10.0.0.2, and public address, 5.5.5.5:3333, know the public address, 7.7.7.7:4444, of the router for client with internal IP, 192.168.1.2?
🔥
It is done through an off the network exchange like I explained in the beginning. This is part of the SDP which will be sent over whatsapp, career pigeon, email.. anything
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.
This is the best explanation of WebRTC I have ever seen. And the demo - just awesome 😎
14:23 I love the way you explain it, you also sound like Naked Snake from Metal Gear Solid.
Your explanation was THE MOST SIMPLISTIC one. I was going all over until i saw your explanations. Keep doing what you do👍👍
Congratulations on the video. I have a question. I have a video on vmix and copying the url of the video on the browser works and in Inspect I have a Json object called vMixCall in which the answer is present. vMixCall: {"type": "answer", "sdp": "v = 0 \ r \ no = IceLink ......."}
how can i show this video of vMix on my webpage in localhost: 3000?
you are just... amazing.
Hi Hussein, Can You explain HLS Please , Between WebRTC & HLS Which one is better for Live Stream?
I don't remember the last time I was this happy learning stuff. God's work.
After setting local description and remote description on both firefox windows, ICE Keeps failing with angular 17
in my case the call to
lc.setRemoteDescription(answer);
on client 1 doesnt initiate the connection as in ur case. the returned promise has a result of undefined.
moreover, if i chain a .then() call after this promise i get an error in my console
DOMException: Failed to execute 'setRemoteDescription' on 'RTCPeerConnection': Failed to set remote answer sdp: Called in wrong state: stable
could my NAT be an issue?
🤔
Dramatic, for sure ! :D
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.
What would be best way to build live streaming app then since WebRTC is impractical (for example 100 people * 100 connections mean 10000). Going through AWS in traditional way is too expensive (around 65 dollar an hour for live streaming session with 1000 viewers)
Dayumn!! that's such a comprehensive video. Thank you for making it.
genius explanation !
What about multiparty webrtc, using media servers. can you explain more on SFU
If you haven't found them already, there is:
ruclips.net/video/DvlyzDZDEq4/видео.html
ruclips.net/video/QJMM758oCYk/видео.html
Amazingly explained! Thanks for your work, Hussein.
Glad it helped! as a Member you get access to the slides as well :) check out the member only section
China Moblie (one of the three ISP in China) doesn't not give you public IP. I wonder how the ISP mapped many people within a subnet(LAN). How many ports should the router have to make this possible?
The other two ISP. On some chinese forum, I find some instruction to get public IP by changing the modem to bridge mode and use your own router to dial-up. First, get into the admin account of the router and note down the Vlan_id and Logic_id of your broadband. Then change the modem to bridge mode using the logic_id with putty's telnet hacking. Then every time you dial-up you get a public ip.
Is it common wordwide that the ISP simply don't give you public ip? I think many people in China do not know what is a "public ip".
if we use whatsapp for example for signaling: the local should send sdp to remote via whatsapp, then the remote should send another one to local via again whatsapp,
is that true,
because i feel confused when i simulate it to google meet