WebRTC Practical Course. Build Video Chat With React

WebRTC Practical Course. Build Video Chat With React, available at $64.99, has an average rating of 3.8, with 75 lectures, based on 183 reviews, and has 1634 subscribers.

You will learn about Create own WebRTC implementation for video calls Add WebRTC data channels to exchange data Create video chat app in React How to switch to screen sharing in ongoing call How to create group call video chat How to create group call app with PeerJS This course is ideal for individuals who are Programmers and students which wants to learn WebRTC and how it can be connected with React It is particularly useful for Programmers and students which wants to learn WebRTC and how it can be connected with React.

Enroll now: WebRTC Practical Course. Build Video Chat With React

Summary

Title: WebRTC Practical Course. Build Video Chat With React

Price: $64.99

Average Rating: 3.8

Number of Lectures: 75

Number of Published Lectures: 75

Number of Curriculum Items: 75

Number of Published Curriculum Objects: 75

Original Price: z?499.99

Quality Status: approved

Status: Live

What You Will Learn

Create own WebRTC implementation for video calls

Add WebRTC data channels to exchange data

Create video chat app in React

How to switch to screen sharing in ongoing call

How to create group call video chat

How to create group call app with PeerJS

Who Should Attend

Programmers and students which wants to learn WebRTC and how it can be connected with React

Target Audiences

Programmers and students which wants to learn WebRTC and how it can be connected with React

Learn WebRTC by creating project with React. We will go through all of the steps to create application with direct and group calls. We will write own WebRTC implementation for direct calls and we will use PeerJs for group calls to show how easily you can develop webRTC application. Only basic knowledge of React and Javascript is required. We will use also SocketIO as our signaling server for our application. After this course you will be able to create own application which will be using WebRTC. It does not matter if that will be the realtime communication game or video chat. You will now the process how to establish connection between two peers and more.

In our application we will use:

WebRTC

JavaScript

SocketIO

Express.js

Node.js

React

Redux

We will keep React application simple and we will focus on things related with webRTC. Also you will get an knowledge how you can use SocketIO as your webSocket server.

App creating proccess:

Prepare environment

Build frontend of our application in React

Connect with SocketIO

Add our own WebRTC implementation for direct calls

Create group calls with Peer.js (library to make WebRTC implementation easier in small apps)

Add chat functionality to show how WebRTC data channels work

I hope you will enjoy the course and after finishing it you will feel confident to start preparing and adjusting your own WebRTC implementation.

Course Curriculum

Chapter 1: Introduction to WebRTC

Lecture 1: Course introduction

Lecture 2: Theory about WebRTC and how to establish peer-to-peer connection

Lecture 3: Course requirements and details

Lecture 4: Theory – What is WebRTC ?

Lecture 5: Theory – What is signaling server ?

Lecture 6: Theory – What is STUN server ?

Lecture 7: Theory – What is TURN server ?

Lecture 8: Theory – What is SDP ?

Lecture 9: Theory – What are ICE candidates ?

Lecture 10: Theory – How to establish direct connection between peers

Lecture 11: Preparing environment – Server

Lecture 12: Preparing environment – React

Lecture 13: React Router – Do not skip before next lecture !

Lecture 14: Adding routing to React application

Lecture 15: Adding Redux for state management

Lecture 16: Redux – why is so useful

Chapter 2: Creating VideoTalker dashboard

Lecture 1: Creating login page

Lecture 2: Creating dashboard layout

Lecture 3: Preparing active users list

Lecture 4: Storing our active users in server

Lecture 5: Sending active users list to all clients

Lecture 6: Removing users from the server at disconnection

Lecture 7: Getting local stream

Lecture 8: Local stream – getDisplayMedia

Lecture 9: Creating local stream preview

Lecture 10: Adding call states for managing our components

Lecture 11: Creating dialogs related with direct calls

Chapter 3: WebRTC implementation for direct calls

Lecture 1: Pre-offer – getting information if callee will agree for direct call

Lecture 2: Handle pre-offer and prepare pre-offer answer

Lecture 3: Handle pre-offer answer

Lecture 4: Call rejected – show rejected dialog

Lecture 5: Call rejected – test

Lecture 6: Creating Peer connection

Lecture 7: Peer connection

Lecture 8: Creating webRTC offer

Lecture 9: WebRTC offer

Lecture 10: Handling webRTC offer and creating webRTC answer

Lecture 11: WebRTC answer

Lecture 12: Handle webRTC answer

Lecture 13: Exchanging ICE candidates

Lecture 14: ICE candidates

Lecture 15: Checking peer connection state

Lecture 16: Displaying remote stream

Lecture 17: Creating conversation buttons

Lecture 18: Enabling/Disabling camera or microphone in active peer connection

Lecture 19: Screen sharing – add possibility to replace streams

Lecture 20: Add hang up possibility

Lecture 21: Direct calls minor changes

Lecture 22: Dashboard information

Chapter 4: Group Calls with PeerJs

Lecture 1: Group calls introduction

Lecture 2: Connecting with peerJs server

Lecture 3: Creating rooms list

Lecture 4: Adding create room button

Lecture 5: Store created rooms in server

Lecture 6: Sending active rooms to all clients

Lecture 7: Adding create room functionality

Lecture 8: Joining group call

Lecture 9: Calling to new user in group call

Lecture 10: Preparing logic to display incoming streams

Lecture 11: Displaying incoming streams

Lecture 12: Leaving group call

Lecture 13: Closing group call as room creator

Lecture 14: Group calls minor changes

Chapter 5: WebRTC data channels

Lecture 1: Introduction to WebRTC data channels

Lecture 2: Adding chat logic

Lecture 3: Creating small messenger

Chapter 6: Connecting to TURN server and deployment of our application

Lecture 1: Preparing project for deployment

Lecture 2: Fetching TURN server credentials from Twilio

Lecture 3: Fetching TURN server credentials from our backend

Lecture 4: Deploying backend of our application

Lecture 5: Deploying frontend of our application

Lecture 6: Fixing bug with parsing TURN and STUN servers

Lecture 7: Testing connection with user connected to different network

Lecture 8: VideoTalker complete code

Chapter 7: Whats next

Lecture 1: Whats next

Instructors

Marek Gryszkiewicz
Web Developer

Rating Distribution

1 stars: 6 votes

2 stars: 5 votes

3 stars: 18 votes

4 stars: 50 votes

5 stars: 104 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!