How Does WebRTC Work? | Crash Course

WebRTC introduction and complete project based tutorial. Build a small peer to peer video chat application with signaling.

Slide show images are provided in the source code.

Timestamps

00:00 - Intro
00:35 - WebRTC Intro Slides
12:05 - Project Files Setup
19:40 - Display Camera to Page
23:28 - Peer Connection (SDP Offer & Answer)
46:00 - Signaling with Agora

[hibob]

This was excellent. I really, really appreciate that you start *truly* from scratch (an empty folder!) and stick to vanilla HTML, CSS, JS. I can reason about these things and so can my browser. I have attempted to follow several WebRTC tutorials that start with 500 Node packages, Vite, AutoMagic.js, this that and the other thing–all to build a "simple demo" showing a technology that the browser natively supports! I invariably run into a string of issues getting all that crap to install and work, and it didn't even need to be in the project. I know that basically represents what front-end development has become, but as a relative outsider (iOS developer, primarily), I think it's absolute madness–especially in the context of a tutorial! All of my mentors taught me to treat every dependency as a liability and use as few as reasonably possible. Anyway..."kids these days"...I know. I'll get off my soapbox. Excellent content, earned my subscription. Thanks!

[FirstnameLastname-clop]

This is the perfect tutorial on the whole internet, I have searched everywhere for a clear understanding of this topics for 2 months but never found anything clear or relevant, thanks dennis

[teturd]

only good and full course on WebRTC i could find thank you very much. all the other courses are just copy and paste bins that arnt explaining anything. Hope the algo starts recommending this so people dont waste hours with crap

[kalyanboro]

Wow! God level tutorial. You are the best WebRTC tutor on the internet I've stumbled upon so far. Thank you for this awesome video.

[ragemudhar]

Awesome tutorial, this is the only tutorial which helped me understand the peer connection code.

[RyanEls]

Excellent video. Everything was well explained and easy to understand. I now have a clear understanding of the signaling process and how ICE works.

[ivanlukomskiy]

Saying that webrtc uses UDP and UDP is not reliable protocol is correct, but a bit misleading.

It actually uses SCTP on top of UDP and it has several reliability options. Any webrtc data channel might be set to "reliable" in which case it will take care of not losing any important data (just like tcp does).

Overall great tutorial, thank you!

[tadaspetra]

Awesome video, the way you visualized it in the slides really helped me understand what's going on

[m.shahzaibafzal]

Thank you so much Dennis. I am currently working on Django project in which Django channel will use. How do you know I need this video 😂😂

[gabbe]

omg I was just getting so confused over this new subject that i stumbled upon. Wanted to learn more and found this fantastic video. Thank you sir

[euhansarkar]

what a tutorial. thank you so much man.

[spotifytrial]

You are life saver, you just saved my project ❤️❤️❤️❤️❤️❤️

[leonuneza]

Very well explained. Just have suggestion to create other branch in repository for the connection that is done manually.

[MohamedElsayed-nckc]

thanks, Dennis.❤❤❤
waiting for real time chat project

[rupeshkumaryadav]

Hi i have one confusion about ice handling.we have to add ice candidate on both remote as well as local

[rajankoko]

Waiting for that django real time chat 😍

[sdfsfsfd]

¡Muy buen vídeo! ¡Muchas gracias! 💯👏👍💙 Thanks a lot for this great video!

[ABC_Rumble]

the first project does not work for me when I try to use video chatting, but it only work for audio while we have both video and audio constrains set to true !
probably it work on the same device and the same video feed! but not in separate devices !

[dhanunjayreddy]

hi @Dennis ivy bro its working when both peers are connected to same wifi other wise its not workig can u please help me out

[dokgu]

Can you also make a tutorial for a livestreaming app without the use of Agora? I'm trying to adapt your tutorial where only the streamer is sending their media and the viewers are only watching the video but I can't get it to work.