==========

webRTC, Part 2 - connecting the browsers - PeerConnection & Signaling, w/Reach
What you'll learn
Connect two or more computers audio/video streams
Set up a signaling server to act as a middle man to negotiate the connection
How to integrate webRTC into a React App w/redux
Code organization to minimize confusion as your app grows
Manage 4 (yes 4) different async sources to create an incredible web app
Requirements
Need to be familiar with getUserMedia() or have taken part 1
Experience with jаvascript and Node (not a ninja, but decent exposure)
Socketio is used to a lesser degree in second 1, and very heavily in second 2
For later sections: Access to a Linux machine (like AWS, Azure, DigitalOcean, etc)
Description
This course is part 2 covering the second part of the webRTC api: connecting to another browser and everything that goes into it (namely signaling!). I won't assume you know a single thing about RTCPeerConnection of signaling.It's 2023. Whether because of the pandemic, chat bots, or cost savings, working remote is a thing. Telemedicine is a thing. Talking to people 6 time zones away is a thing. You can abstract your users from your app to Zoom because it always works, but you lose all control and tracking of the interaction. Enter webRTC.WebRTC is one of the browsers must mind blowing apis. It allows access to the mic, camera, even the screen AND to share them across a network socket DIRECTLY to another browser. No server (mostly) or other middleman to add bandwidth, bugs, and chaos. Along with websockets, webRTC presents the video-side of browser real-time communication, bridging one of the last gaps in both human and web-based communication. There's a good chance if you're reading this, you've heard about webRTC. Maybe even done a tutorial on it. But how far did you get? In my experience, the vast majority of the material on the web goes no farther than a quick-start, zoom clone. You don't learn how anything works, never look at the docs, and are stuck at the end wondering what to do now. Is that all webRTC can do? The remaining shred of material is waaaaay over everyone's head. The fact that the webRTC was released about the same time as the websocket API and most developers still don't know how to use it is evidence of the gap.This course is the first step to alleviate that! It is not a quick start guide to webRTC. There are loads of those all over the Internet. You should definitely look elsewhere if you are wanting a 10 minute intro to the 3-4 things you need to know to make a basic zoom clone. On the other hand, if you are looking to really learn one of the most awesome jаvascript APIs that no one seems to know, you should stick around. Like Express and other jаvascript/Node pieces, it's getting passed over in the wave to learn just enough to get to the term "full-stack developer." My main goal is to help you figure out how to go from being a good developer to a great developer. Understanding... not just knowing a few methods... WebRTC is part of that! I first used webRTC in 2015 for a startup similar to telemedicine. I've been following since and have been frustrated that it hasn't gotten more mainstream notice due to Apple's reluctant support, but mostly because devs don't know it. It opens the way for so many improvements to existing applications and obvious groundwork for new ones. Let's change that :) Prepare to for a detailed look at webRTC and start going in-app real-time video/screen chat.What we cover:RTCPeerConnection - the heart of webRTCCreating an offer and an answerSetting RTCSessionDescriptionThe Signaling ProcessBuild a signaling server with socketioGathering ICE CandidatesBuilding a React app w/redux that uses webRTC
Overview
Section 1: Introduction
Lecture 1 Introduction
Lecture 2 All my code (github link)
Lecture 3 How I code
Section 2: rtcPeerConnection - Stream video, peer to peer
Lecture 4 Section Demo & Overview
Lecture 5 rtcPeerConnection and signaling
Lecture 6 Signaling Part 1 - SDP
Lecture 7 Signaling Part 2 - ICE (and STUN)
Lecture 8 File Structure
Lecture 9 local RTC
Lecture 10 setLocalDescription()
Lecture 11 Socket.io and HTTPS setup
Lecture 12 Connection TaskList
Lecture 13 Connection TaskList - part 2
Lecture 14 emit newOffer
Lecture 15 Emit iceCandidates
Lecture 16 Load existing and new offers on all clients
Lecture 17 Create answer
Lecture 18 Error handling the signaling process
Lecture 19 Emitting answer
Lecture 20 Listening for answer and setRemoteDescription(answer)
Lecture 21 Apply ICE candidates - Part 1
Lecture 22 Apply ICE candidates - Part 2
Lecture 23 Add tracks from remote peer - MAGIC!!
Lecture 24 Loading on another device on the same network
Section 3: webrtc and React - a TeleLegal site
Lecture 25 Project Demo
Lecture 26 Project Structure and Front-end Setup
Lecture 27 Back-end Setup
Lecture 28 Creating a JWT & link to simulate scheduling
Lecture 29 Add React-Router for our front-end
Lecture 30 Setup Join-Video route and get the decoded data in React
Lecture 31 Add starting components
Lecture 32 Wire up redux and make callStatus reducer
Lecture 33 Add action buttons, bootstrap, and fontawesome
Lecture 34 getUserMedia() and store the stream in redux
Lecture 35 Create peerConnection and store it in redux
Lecture 36 Thinking through where our functions belong (& a few bug fixes)
Lecture 37 Abstracting the Video and Audio buttons
Lecture 38 Adding the local video feed
Lecture 39 Add our tracks to the peerConnection
Lecture 40 Enable and disable (mute) the local video feed
Lecture 41 Display local video inputs (camera options)
Lecture 42 Set new video device on select
Lecture 43 replaceTracks()
Lecture 44 Abstract DropDown component
Lecture 45 Set up AudioButton component
Lecture 46 Switch Audio Input and Output Devices
Lecture 47 Start, mute, unmute audio
Lecture 48 Organize offers on backEnd and add uuid
Lecture 49 createOffer() once the tracks are shared
Lecture 50 Add Dashboard markup for professional
Lecture 51 Optional - Overview of markup
Lecture 52 Authenticate professional
Lecture 53 socket refactoring
Lecture 54 Reorganize Appointment Data
Lecture 55 Pull Appointment Data
Lecture 56 Listen for offers
Lecture 57 Create join video route for professional
Lecture 58 Add Call Info to Professional Video Page
Lecture 59 Create Answer and set Descriptions
Lecture 60 Review Task List and Cheer for Our Progress
Lecture 61 Emit Answer Up To Server
Lecture 62 Listen for New Answer
Lecture 63 Emit Ice Candidates
Lecture 64 Send Ice Candidates to clients
Lecture 65 Add Ice Candidates to Peer Connection
Lecture 66 AddTracks and... VICTORY!!! (test app)
Lecture 67 Fix 2 small bugs
Lecture 68 Make the HangupButton do something!
Lecture 69 ReplaceTracks on change device
Anyone familiar with jаvascript and node who is new to webRTC!,Anyone familiar with the browser webRTC api, but can't seem to get the browsers to connect,Anyone who wants to put video conferencing in their web app for free (no 3rd party required)!
Screenshots