Mastering webRTC – make a video chat app!

Mastering webRTC – make a video chat app!, available at $84.99, has an average rating of 4.78, with 100 lectures, based on 135 reviews, and has 1685 subscribers.

You will learn about 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 This course is ideal for individuals who are Anyone familiar with JavaScript and node who is new to webRTC! or Anyone familiar with the browser webRTC api, but can't seem to get the browsers to connect or Anyone who wants to put video conferencing in their web app for free (no 3rd party required)! It is particularly useful for Anyone familiar with JavaScript and node who is new to webRTC! or Anyone familiar with the browser webRTC api, but can't seem to get the browsers to connect or Anyone who wants to put video conferencing in their web app for free (no 3rd party required)!.

Enroll now: Mastering webRTC – make a video chat app!

Summary

Title: Mastering webRTC – make a video chat app!

Price: $84.99

Average Rating: 4.78

Number of Lectures: 100

Number of Published Lectures: 95

Number of Curriculum Items: 100

Number of Published Curriculum Objects: 95

Original Price: $49.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

TL;DR– you’ll learn WebRTC in this course – how to get a video feed and 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

Course Curriculum

Chapter 1: Introduction to webRTC

Lecture 1: What is WebRTC and what does it do?

Lecture 2: All my code (github link)

Lecture 3: Getting the codebase for a specific video

Lecture 4: How I code

Lecture 5: But it's 2023: Why would I use webRTC over an SDK (Zoom)?

Chapter 2: Project – getUserMedia playground – (lame) project that teaches you the basics

Lecture 1: Project file setup

Lecture 2: getUserMedia – where everything starts

Lecture 3: Play the feed, getTracks(), and MediaStreamTracks

Lecture 4: A few UI updates

Lecture 5: Constraints overview – getSupportedConstraints() and getCapabilities()

Lecture 6: Changing resolution, framerate, aspect ratio – applyConstraints()

Lecture 7: Recording a feed – MediaRecorder and webRTC

Lecture 8: Update buttons

Lecture 9: Capturing the screen

Lecture 10: Getting available input/outputs with enumerateDevices()

Lecture 11: Loading up input/output options

Chapter 3: rtcPeerConnection – Stream video, peer to peer

Lecture 1: Section Demo & Overview

Lecture 2: rtcPeerConnection and signaling

Lecture 3: Signaling Part 1 – SDP

Lecture 4: Signaling Part 2 – ICE (and STUN)

Lecture 5: File Structure

Lecture 6: local RTC

Lecture 7: setLocalDescription()

Lecture 8: Socket.io and HTTPS setup

Lecture 9: Connection TaskList

Lecture 10: Connection TaskList – part 2

Lecture 11: emit newOffer

Lecture 12: Emit iceCandidates

Lecture 13: Load existing and new offers on all clients

Lecture 14: Create answer

Lecture 15: Error handling the signaling process

Lecture 16: Emitting answer

Lecture 17: Listening for answer and setRemoteDescription(answer)

Lecture 18: Apply ICE candidates – Part 1

Lecture 19: Apply ICE candidates – Part 2

Lecture 20: Add tracks from remote peer – MAGIC!!

Lecture 21: Loading on another device on the same network

Chapter 4: WebRTC Process Review – Now that you've seen it, review it!

Lecture 1: The Process (on the board)

Lecture 2: Code Review

Chapter 5: webrtc and React – a TeleLegal site

Lecture 1: Project Demo

Lecture 2: Project Structure and Front-end Setup

Lecture 3: Chrome and localhost certs

Lecture 4: Back-end Setup

Lecture 5: Creating a JWT & link to simulate scheduling

Lecture 6: Add React-Router for our front-end

Lecture 7: Setup Join-Video route and get the decoded data in React

Lecture 8: Add starting components

Lecture 9: Wire up redux and make callStatus reducer

Lecture 10: Add action buttons, bootstrap, and fontawesome

Lecture 11: getUserMedia() and store the stream in redux

Lecture 12: Create peerConnection and store it in redux

Lecture 13: Thinking through where our functions belong (& a few bug fixes)

Lecture 14: Abstracting the Video and Audio buttons

Lecture 15: Adding the local video feed

Lecture 16: Add our tracks to the peerConnection

Lecture 17: Enable and disable (mute) the local video feed

Lecture 18: Display local video inputs (camera options)

Lecture 19: Set new video device on select

Lecture 20: replaceTracks()

Lecture 21: Abstract DropDown component

Lecture 22: Set up AudioButton component

Lecture 23: Switch Audio Input and Output Devices

Lecture 24: Start, mute, unmute audio

Lecture 25: Organize offers on backEnd and add uuid

Lecture 26: createOffer() once the tracks are shared

Lecture 27: Add Dashboard markup for professional

Lecture 28: Optional – Overview of markup

Lecture 29: Authenticate professional

Lecture 30: socket refactoring

Lecture 31: Reorganize Appointment Data

Lecture 32: Pull Appointment Data

Lecture 33: Listen for offers on the client

Lecture 34: Create join video route for professional

Lecture 35: Add Call Info to Professional Video Page

Lecture 36: Create Answer and set Descriptions

Lecture 37: Review Task List and Cheer for Our Progress

Lecture 38: Emit Answer Up To Server

Lecture 39: Listen for New Answer On the Client

Lecture 40: Emit Ice Candidates To Server

Lecture 41: Send Ice Candidates to clients

Lecture 42: Add Ice Candidates to Peer Connection

Lecture 43: AddTracks and… VICTORY!!! (test app)

Lecture 44: Fix 2 small bugs

Lecture 45: Make the HangupButton do something!

Lecture 46: ReplaceTracks on change device

Chapter 6: Deploying Our App To AWS

Lecture 1: Drawing Out And Explaining The Process

Lecture 2: Warning… this section is deploying, not WebRTC and might be hard 🙂

Lecture 3: Setting up a (hopefully) free AWS server to run our app on

Lecture 4: Getting a Domain &Setting It To Point At Our Server & Install Apache

Lecture 5: Pulling files onto our server from github and building React

Lecture 6: htaccess file and vhost for next lecture

Lecture 7: Vhost – Telling Apache Where Our Sites Are

Lecture 8: Reverse Proxy Vhost – For the backend

Lecture 9: HTTPS and Reverse Proxy Vhost

Instructors

Robert Bunch
Code school instructor, software architect and engineer

Rating Distribution

1 stars: 0 votes
2 stars: 1 votes
3 stars: 3 votes
4 stars: 29 votes
5 stars: 102 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu