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: https://youtu.be/g42yNO_dxWQ
Setting up local for WebRTC: https://youtu.be/NSPwnLDm-z0
Socket.io: https://youtu.be/GdYVTWujYD8
Starter code: https://github.com/robertbunch/webrtc-react-starter
Final code: https://github.com/robertbunch/webrtc-react-final
Scaling WebRTC (more than peer to peer): https://youtu.be/V8dIDXTF5Vo
Full WebRTC Course on Udemy if you need more detail: https://www.udemy.com/course/mastering-webrtc-part-2-real-time-video-and-screen-share/?couponCode=7F716748A8840A182DAB ($13 good till 10-5-24)
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