Mastering webRTC - make a video chat app!

Name: Mastering webRTC - make a video chat app!
Rating: 4.5 (314 reviews)

Working w/MediaStreams, the mic, camera, & screen. Connecting the browsers - PeerConnection & Signaling, w/React

Created byRobert Bunch

Last updated 7/2024

English

English [Auto],Turkish [Auto],

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

Course content

7 sections • 95 lectures • 14h 0m total length

What is WebRTC and what does it do?7:29
All my code (github link)
Getting the codebase for a specific video4:03
Use git tags to align your local code with a specific video, clone the class repo, and checkout the tag to match the instructor’s changes without downloading zips.
How I code3:57
See how I code with JavaScript, Node.js, and Socket.io while teaching practical coding approaches. Learn my VS Code workflow, terminal, and git habits, plus shortcuts and MDN references.
But it's 2023: Why would I use webRTC over an SDK (Zoom)?5:52
Learn why WebRTC offers faster, peer-to-peer video and audio directly in the browser, with stability, control, flexibility, price advantage, and cross-platform benefits over SDKs like Zoom.

Project file setup2:50
Set up the project structure for a WebRTC video chat app by copying starter HTML and CSS files, integrating bootstrap, and outlining the DOM and script.js essentials.
getUserMedia - where everything starts12:52
Learn how to request audio and video with getUserMedia, using navigator.mediaDevices, set constraints, handle permission prompts, and obtain a media stream for a WebRTC app.
Play the feed, getTracks(), and MediaStreamTracks7:16
A few UI updates8:50
Constraints overview - getSupportedConstraints() and getCapabilities()10:05
Changing resolution, framerate, aspect ratio - applyConstraints()8:14
Recording a feed - MediaRecorder and webRTC12:38
Learn to use the media recorder API with getUserMedia to capture a media stream, record it, and play back as a blob in a WebRTC context.
Update buttons4:31
Update buttons explain managing start, stop, and share screen in a WebRTC video chat app, with color state changes and checks for a valid stream, recorder, and recordings.
Capturing the screen9:38
Getting available input/outputs with enumerateDevices()9:24
Discover how to enumerate media devices with navigator.mediaDevices.enumerateDevices in WebRTC, identify audio input, audio output, and video input, and troubleshoot permissions and secure contexts using a localhost server.
Loading up input/output options10:32
Enumerate devices and populate audio input, audio output, and video input options for a WebRTC video chat app, then update the feed when the user selects a new device.

Section Demo & Overview5:57
Demonstrates building a peer-to-peer video chat with WebRTC, guiding you through setting up a signaling server, Socket.IO, and multi-browser rigs to exchange media securely.
rtcPeerConnection and signaling7:21
Signaling Part 1 - SDP2:58
Signaling Part 2 - ICE (and STUN)6:56
Explore how WebRTC signaling uses ICE, STUN, and TURN to traverse NAT and firewalls, exchanging SDP and ICE candidates via a signaling service like socket.io.
File Structure7:26
local RTC13:39
Explore how signaling enables two clients to find each other, exchange ice candidates and SDP, and set up a peer connection with ice servers and getUserMedia.
setLocalDescription()4:07
git checkout Set-Local-Description
Socket.io and HTTPS setup9:26
git checkout Add-Local-Description
Connection TaskList5:45
git checkout Add-Socketio
Connection TaskList - part 212:29
Build a signaling-based WebRTC video chat by exchanging offers and answers, handling ICE candidates, and wiring get user media, peer connections, and tracks with a Socket.IO server.
emit newOffer9:05
git checkout Emit-Offer
Emit iceCandidates8:18
Learn how to send and handle ICE candidates in a WebRTC signaling flow by emitting candidates to the signaling server, tracking whether you offered, and updating offers with ICE candidates.
Load existing and new offers on all clients9:08
git checkout Load-Existing-Offers
Create answer8:52
git checkout Create-Answer
Error handling the signaling process7:51
git checkout Signal-Error-Handling
Emitting answer7:17
git checkout Emitting-Answer
Listening for answer and setRemoteDescription(answer)6:28
git checkout On-Answer-Response
Apply ICE candidates - Part 18:06
git checkout Add-Ice
Apply ICE candidates - Part 25:16
git checkout Apply-Ice
Add tracks from remote peer - MAGIC!!5:34
git checkout Add-Tracks
Loading on another device on the same network4:37
Learn to load a remote WebRTC feed on another device on the same network by using a local IP and HTTPS, and replacing localhost in code.

Project Demo5:30
Project Structure and Front-end Setup5:33
Set up a two-folder WebRTC project with a front end created by Create React App and a back end using express and socket.io, plus a certs folder for local https.
Chrome and localhost certs0:20
Back-end Setup7:53
Set up a secure back-end with server.js using express, https, and socket.io on port 9000, including a test route and a socket connection.
Creating a JWT & link to simulate scheduling10:43
git checkout Create-JWT
Add React-Router for our front-end5:26
git checkout Add-React-Router
Setup Join-Video route and get the decoded data in React8:11
git checkout Join-Video
Add starting components9:32
git checkout Starting-Components
Wire up redux and make callStatus reducer7:37
git checkout Wire-Up-Redux
Add action buttons, bootstrap, and fontawesome7:27
git checkout Add-Action-Buttons
getUserMedia() and store the stream in redux9:20
git checkout GUM-Store-Stream
Create peerConnection and store it in redux6:44
git checkout Create-Peer-Connection
Thinking through where our functions belong (& a few bug fixes)6:14
git checkout Thinking-Functions
Abstracting the Video and Audio buttons7:36
git checkout Abstract-Video-Audio-Buttons
Adding the local video feed9:37
git checkout Add-Video-Feed
Add our tracks to the peerConnection7:58
Attach local video tracks to non-local streams by iterating streams, updating each peer connection, and dispatching Redux call-status updates to reflect the video state.
Enable and disable (mute) the local video feed6:23
git checkout Enable-Disable-Video
Display local video inputs (camera options)11:20
git checkout Display-Local-Video-Inputs
Set new video device on select6:53
git checkout Set-New-Video-Device
replaceTracks()8:18
git checkout Replace-Tracks
Abstract DropDown component3:07
git checkout Abstract-DropDown
Set up AudioButton component10:57
git checkout Setup-Audio-Button
Switch Audio Input and Output Devices10:53
git checkout Switch-Audio-Devices
Start, mute, unmute audio9:53
git checkout Start-Mute-Audio
Organize offers on backEnd and add uuid7:47
git checkout Organize-Offers
createOffer() once the tracks are shared13:08
git checkout Create-Offer-Tele
Add Dashboard markup for professional4:48
git checkout Add-Dashboard
Optional - Overview of markup1:52
Navigate bootstrap markup with containers, rows, and columns. Inspect the purple header and left rail, plus a two-row layout featuring dashboard, clients, appointments, files, analytics, and image placeholders.
Authenticate professional9:44
git checkout Auth-Pro
socket refactoring9:08
git checkout Socket-Refactor
Reorganize Appointment Data3:14
git checkout Reorg-Appt-Data
Pull Appointment Data9:24
git checkout Pull-Appt-Data
Listen for offers on the client10:59
git checkout Listen-Offers-Tele
Create join video route for professional5:36
git checkout Join-Video-Route
Add Call Info to Professional Video Page3:44
git checkout Call-Info-Pro
Create Answer and set Descriptions10:12
git checkout Create-Answer-Tele
Review Task List and Cheer for Our Progress6:32
Master the end-to-end WebRTC video chat flow by wiring get user media, creating peer connections with ICE and STUN, exchanging offers and answers via a signaling server.
Emit Answer Up To Server7:57
git checkout Emit-Answer-Server
Listen for New Answer On the Client11:49
git checkout Listen-For-Answer
Emit Ice Candidates To Server9:17
git checkout Emit-Ice-Candidates-Server
Send Ice Candidates to clients12:38
git checkout Ice-To-Clients
Add Ice Candidates to Peer Connection11:36
git checkout Add-Ice-PC
AddTracks and... VICTORY!!! (test app)5:34
git checkout Add-Tracks-Victory
Fix 2 small bugs2:19
git checkout Tele-Bug-Fix-1
Make the HangupButton do something!5:24
git checkout HangUp-Button
ReplaceTracks on change device7:53
git checkout Replace-Tracks-Tele

Drawing Out And Explaining The Process15:24
Warning... this section is deploying, not WebRTC and might be hard :)0:16
Setting up a (hopefully) free AWS server to run our app on35:57
Learn to spin up a free tier AWS EC2 Ubuntu server, configure SSH access with a key pair, and open HTTP/HTTPS ports to host your WebRTC video chat app.
Getting a Domain &Setting It To Point At Our Server & Install Apache17:23
Register a domain, point it to your AWS server with A records for root and www, then install Apache and configure it to serve content over http (ssl ready later).
Pulling files onto our server from github and building React19:34
Pull code from GitHub to your server, install node with PM2 and nodemon, and build a production React front end behind Apache with proper http/https domains.
htaccess file and vhost for next lecture0:12
Vhost - Telling Apache Where Our Sites Are12:16
Reverse Proxy Vhost - For the backend0:08
HTTPS and Reverse Proxy Vhost23:27
Learn how to set up an Apache reverse proxy with virtual hosts for api and frontend, enable https with certbot/letsencrypt, and secure websocket traffic between port 80 and 9000.

Requirements

Need to be familiar with getUserMedia() or have taken part 1
Experience with JavaScript and Node (not a ninja, but decent exposure)
We use socketio to build our signaling server. You must know it, or be able to follow me
For later sections: Access to a Linux machine (like AWS, Azure, DigitalOcean, etc)

Description

TL;DR - you'll learn WebRTC in this course - how to pull a video feed and then setup a video chat between browsers with just JavaScript. The first section and a few later projects are front-end only, the connection section and later projects require Node.js and Socketio.

It's 2024. 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:

Front-end only portion

getUserMedia() - getting access to the mic and camera in the browser
playing the feed in a <video />
MediaStream and MediaStreamTrack - what makes up a video feed
Constraints - getSupportedConstraints() and getCapabilities() - seeing what this browser can do
applyConstraints - changing the feed on the fly
Recording video/audio and playing it back
Capturing the Screen for screen share and recording it
Changing input/output devices in your feed

Back-End required (node, socketio)

RTCPeerConnection - the heart of webRTC
Creating an offer and an answer
Setting RTCSessionDescription
The Signaling Process
Build a signaling server with socketio
Gathering ICE Candidates
Building a React app w/redux that uses webRTC

Who this course is for:

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)!

Mastering webRTC - make a video chat app!

What you'll learn

Explore related topics

Course content

Introduction to webRTC5 lectures • 21min

Project - getUserMedia playground - (lame) project that teaches you the basics11 lectures • 1hr 37min

rtcPeerConnection - Stream video, peer to peer21 lectures • 2hr 37min

WebRTC Process Review - Now that you've seen it, review it!2 lectures • 1hr 14min

webrtc and React - a TeleLegal site46 lectures • 5hr 54min

Deploying Our App To AWS9 lectures • 2hr 5min

Scaling WebRTC - Beyond the mesh1 lecture • 13min

Requirements

Description

Who this course is for: