Want to make a video chat app with React? Watch this video for WebRTC!

Do you have a grasp of WebRTC but are confused how to get it to play nicely inside of React? Learn how to make a live streaming app W/REACT from scratch in just over an hour! Join Rob, as he breaks down the entire process and provides you with all the tools and knowledge you need for this insanely confusing task. Whether you're a beginner or have some experience, this tutorial will tackle a couple of approaches to organizing your app and getting you ready to make your dream video chat app with React.
If you are still trying to get the base concepts and process down of WebRTC, (getUserMedia, RTCPeerConnection, STUN servers and ICE candidates, the signaling process, and offer/answer/SDP negotiation) please watch the first video in the links below. Subscribe now and let's get started!
Before anyone points it out ... I realize there is no "Chinese" language. There's Mandarin and Cantonese and a guy who has a hard time writing, talking, and thinking at the same time ;)
WebRTC explained video: • Want to make a video c...
Setting up local for WebRTC: • Setting up a local wit...
Socket.io: • Want to make a chat ap...
Starter code: github.com/robertbunch/webrtc...
Final code: github.com/robertbunch/webrtc...
Scaling WebRTC (more than peer to peer): • How to Scale WebRTC Ap...
Full WebRTC Course on Udemy if you need more detail (playlist isn't done here yet) (costs $10-$13): www.udemy.com/course/masterin...
0:00 Whiteboard Project
3:02 - Issues when putting these 2 together
8:13 - Demo
10:04 - Project setup & resources
13:27 - Backend overview and test connection
17:32 - Handling potential errors (IMPORTANT!)
19:21 - Front-end code overview
24:22 - socketConnection and socket events
28:02 - Call and offer
54:14 - Enable and disable video
70:26 - Answer
81:30 - Hangup button

[@KingTMK]

I love how you're covering WebRTC in such depth considering how little this topic is covered on CZcams. God bless!

[@robertbunch-dev]

Thank you for the encouragement and compliment! It is shocking how rare this topic is on the whole Internet, but certainly missing quality depth. SFU's and recordings are next!

[@user-fm7df4dl7w]

I was struggling to use webRTC with react for a long time and this video cam in, it kind of like someone survived me from hell. Thank you so much for the video 😇

[@robertbunch-dev]

ANYONE who has used them together knows exactly how you feel 😁
I'm glad for the timely arrival and I hope it gets you there!

[@rushikeshbelkunde9533]

What if we refresh how can we handle reconnection

[@chetankumar9463]

I have implemented video calling in my chat app using simple-peer(webrtc library) in react js. It was quite annoying journey. I got successful to some extent but one problem is still there, i.e when remote peer disconect the call then browser tab on remote side automatically disables the camera but browser tab on other side is still using camera and mic. For switching off the camera, i have to manually refresh the page.

[@SMOKE3104]

Hey Rob!! It's Nadario, You may not remember me, but I'm from the syntel thing. Great Video!! Didn't know you were on YT. More content to watch!!

[@robertbunch-dev]

I remember nearly all the students I ever had :) No Java on this channel, at least yet, and a big welcome :) I started back in November and it's going OK... these WebRTC videos are the big hit so far. My schedule is Algorithm Monday, JavaScript Tuesday, and Computer Science Thursday and these tutorials come whenever I can find time to do them!
Are you making a WebRTC app or did YT just randomly suggest it?

[@SMOKE3104]

@@robertbunch-dev CZcams recommended it. I've been using Next.js and was using trpc until the app router update. I still learned so much, though!

[@SMOKE3104]

@@robertbunch-devHAHAHA Well, I don't feel any indifferent about Java. YT recommended it. I have used trpc with Next.js until the server component update, but not webrpc. I will dependently be there.