Mastering Webrtc Part 2 - Real-Time Video And Screen-Share

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 JavaScript 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 JavaScript APIs that no one seems to know, you should stick around. Like Express and other JavaScript/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 JavaScript 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)!