Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Build a Serverless Video Chat App with React and WebRTC

Name: Build a Serverless Video Chat App with React and WebRTC
Rating: 5.0 (1 reviews)

Use AWS, React and WebRTC to build a full featured, secure and completely serverless video chat application.

Created byDr. Larry Tenny

Last updated 6/2025

English

English [Auto],

What you'll learn

Build a Serverless Peer-to-peer Video Chat Application
Master WebRTC
Learn about Amazon Web Services (AWS) Cloud
Use React with Tailwind CSS to build a real world application
Write AWS Lambda functions in Python
Learn AWS DynamoDB
Build a WebSockets native application
Build an AWS API Gateway serverless WebSocket endpoint
Learn how to host a secure static website on AWS Cloud with S3 and Cloudfront
Learn how to authenticate with AWS Cognito
Learn the basics of AWS IAM policies and roles
Learn the basics of AWS Route 53 and domain registration

Course content

11 sections • 59 lectures • 12h 24m total length

Welcome1:31
Welcome to this course! I'm so glad you're here. We have tons of great technologies to cover and a fantastic and unique serverless video chat application to build.
Here are some helpful references0:13
This is very much a learn by doing course. Follow along and we will build, step by step, a complete serverless video chat application that uses the latest technologies including webRTC, react and a comprehensive collection of serverless cloud technologies.

Section Overview1:19
In this section we cover some core concepts around webRTC signaling and networking.
Video Chat Architectures8:38
In this video we describe the various video chat architectures.
Network Address Translation6:44
In this video we explain what network address translation is and why we need to use STUN servers to discover our external IP address.
Signaling - The Who and the What4:34
In this video we explain the signaling process for webRTC.
Signal Server5:32
In this video we discuss the role of the signal server in the webRTC signaling process.
Signaling - Offer, Answer and ICE Candidates5:32
In this video we provide an in-depth description of the webRTC signaling process.

Section Overview2:02
In this section we step through everything you'll need to do to setup your development environment for this course.
Setting Up VSCode and Node.js7:23
In this video I show you how to setup VS Code and Node.js
Creating Our Project14:34
In this video I show you how to create our project using vite.
Routes and Some Placeholders11:46
In this video we start to build our application with a few declarative routes and a few placeholders for components we will build in the upcoming lectures.

Section Overiew1:55
In this section we build out the Auth provider as well as the Header and Status components.
Adding in the Header15:43
In this video we build out the Header component.
Completing the Login Component19:07
In this video we build out the Login component and use it in the Header.
The Auth Provider9:30
In this video we build out the AuthProvider context.
Adding in the Status4:25
Add a bottom status bar to the home page, display the current user's email when authenticated, and toggle login state with conditional rendering using Tailwind CSS styles.

Section Overview1:27
In this section we build out our main app state context, the AppStateProvider and create our LocalStream and RemoteStream components.
The AppStateProvider10:38
In this video we build our AppStateProvider.
LocalStream and RemoteStream13:02
In this video we create our LocalStream and RemoteStream components. These components present the video and audio content for the caller and the callee.
Starting the Local Stream14:05
In this video we get the user media and display it in the LocalStream component.
Building the VideoInputSelector and the AudioInputSelector Components24:48
In this video we create two components to select the video source and the audio source.

Section Overview1:39
In this section we provide an overview of Amazon Web Services (AWS) and we create and setup a free tier account.
What is AWS?5:00
In this video we explain what AWS is.
Creating a Free-Tier Account5:40
In this video I show you how to create a free-tier account. With this free-tier account you total bill for the work you do in this course should be less than $5 (US).
Configure Your Account and Set Up a Budget3:25
In this video I show you how to configure your account and, most importantly, how to set up a budget so that you are warned if for some reason your spend exceeds what you expected.
IAM and Setting Up an IAM Account5:36
In this video I explain identity and access management in AWS and I show you how to set up an IAM account.
IAM Policies and Roles5:12
In this video we cover the core concepts around AWS IAM and IAM policies.
API Gateway and Lambda7:26
In this video I describe what the AWS API Gateway is and how we use Lambda functions in AWS.

Section Overview2:48
In this section we start building our our Signal Server in AWS.
Getting Started with the API Gateway28:08
In this video we get started using the AWS API Gateway.
Connecting to the Signal Server17:56
In this video we write the code to connect to our Signal Server.
Setup (Part One)21:58
This is part one of a three part series in which we build out the Setup process. In this video we describe the process and start by building our our DynamoDB table.
Setup (Part Two)16:30
In this second part of the Setup series we build out the code that accesses our Signal Server in a separate class.
Setup (Part Three)19:48
In this final part of the Setup series we complete the setup with the Lambda function for the $connect route.
Teardown30:54
After our video chat has terminated and the user wants to sign out, the final step is to Teardown the connection. We build out the Teardown path in this video.

Section Overview1:35
In this section build out the complete signaling process for the video chat.
Selecting the User28:41
In this video we build the user selection process. This is how the caller selects the callee.
Creating the Peer Connection19:47
In this video we build out the peer connection. The peer connection is the central coordinating point for the webRTC connection.
Sending the Offer32:11
In this video we build out sending the Offer to the callee.
Processing the Offer37:22
In this video we build out the code that the callee uses to process the Offer from the caller.
Responding to the Offer19:13
In this video we continue working on the callee's perspective. Here the callee responds to the caller's Offer with and Answer.
Responding to the Answer38:04
In this video we build out how the caller handles the Answer received from the callee.
Connecting the Chat35:52
In this video we complete the code need to connect the video chat. This includes the final step: exchanging the ICE Candidates.
The Decline Path16:05
In this video we build out the Decline path. The callee uses this path to decline the Offer from the caller.
The HangUp Path28:47
In this video we build out the HangUp path. This path is used by either the caller or the callee to terminate the video chat.

Section Overview2:00
In this section we replace our temporary authentication process with a secure process using AWS Cognito.
What is AWS Cognito?15:08
In this video we describe what AWS Cognito is.
Creating the user pool and the app6:13
In this video we configure a user pool in AWS Cognito and create a Cognito app.
Refactoring to use Cognito (Part One)18:55
This video is part of a two part series in which we refactor our app to use Cognito. In this part, we refactor our declarative routing to so that we can handle the redirects during the signin and signout processes.
Refactoring to use Cognito (Part Two)17:33
In this second part we complete the refactoring of our code. Here we handle the redirects from the signin and signout processes.
Protecting our SignalServer23:36
In this video we secure our Signal Server by verifying the identity token we received from Cognito. We verify this token on the $connect route.

Section Overview1:08
In this section we build our code for deployment and configure AWS to host our static site.
AWS S38:46
In this video I explain what AWS S3 is and how it is used. We create a bucket and apply an IAM policy that allows us to use this bucket as an origin for a CloudFront distribution.
AWS Route 536:11
In this video I explain what AWS Route 53 is and I show you how to register your own domain.
AWS Certificate Manager6:57
In this video I explain what AWS Certificate Manager is and I show you how to create your own certificate for your domain.
AWS CloudFront12:35
In this video I explain what AWS CloudFront is and we create a distribution from our S3 origin and secure the site with the certificate we created.
Putting it all together9:36
In this video we complete the process by building our app for deployment and deploying it to our S3 origin.

Requirements

Programming experience and some knowlege of AWS is helpful, but not required. I'll show you everything step-by-step.

Description

Ever wanted to build a video chat application or perhaps just a video chat component in a larger web application but didn't want the potential high cost and hassle of managing servers? Ever want to learn how to build a real world React application? Curious about how AWS Cloud serverless works? Well this is the course for you! We cover all this and much more.

Our course project is a secure, completely serverless peer-to-peer video chat application you can use as a portfolio project, a part of a larger application you are building or even extend it and provide it as a service.

Along the way we cover a lot of diverse topics and technologies. Just like any real world application, it takes much more than just knowing one or two technologies to build a meaningful application. I'll show you step-by-step how to use each of these cutting-edge technologies to build a real-world serverless application.

Here is just some of what we cover:

- Core React development with Tailwind CSS using VS Code and vite.

- Amazon Web Services (AWS) cloud serverless offerings including: Lambda Functions, API Gateway, DynamoDB, Cognito, S3 and CloudFront

- Javascript development with React

- Python development for AWS Lambda Functions

- Clean project design

Who this course is for:

Anyone interested in building a serverless video chat application and anyone passionate about web development.
Anyone interested in building a real-world serverless application on the AWS Cloud.

Build a Serverless Video Chat App with React and WebRTC

What you'll learn

Explore related topics

Course content

Welcome, welcome, welcome!2 lectures • 2min

A Bit of Theory Before We Start6 lectures • 32min

Starting the Project4 lectures • 36min

Auth Provider, Header and Status5 lectures • 51min

AppState Provider and Streams5 lectures • 1hr 4min

AWS7 lectures • 34min

Signal Server in AWS7 lectures • 2hr 18min

The Video Chat10 lectures • 4hr 18min

Authenticating with AWS Cognito6 lectures • 1hr 23min

Serverless Hosting of Our Site6 lectures • 45min

Requirements

Description

Who this course is for: