WebRTC - Create Zoom Clone Video Group Call Application

Create Group Video Chat with WebRTC Mesh Architecture, React and Websockets Like Google Meet and Zoom.

3.75 (191 reviews)
Udemy
platform
English
language
Other
category
2,001
students
9.5 hours
content
Apr 2022
last update
$74.99
regular price

What you will learn

WebRTC

Working with media streams

Creating multiple peer connections

Create Mesh Architecture

Create SocketIO Server

Real-Time communication

React

WebRTC implementation

WebRTC data channels

Create Group Call App

Description

Learn WebRTC Mesh architecture by creating project with React, WebRTC and SocketIO.  We will go through all of the steps to create application with group calls where you can establish connection between multiple users in one room. We will write WebRTC implementation with suport of simple-peer library to show how you can develop WebRTC application with group calls.   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 know the process how to establish connection between multiple peers with Mesh architecture.

We will cover all signaling process to exchange necessary data between all connected users to Room. We will also cover deployment and TURN Server credentials.

In our application we will use:

  • WebRTC

  • JavaScript

  • SocketIO

  • Express.js

  • Node.js

  • React

  • Simple-peer

We will create necessary UI and we will proceed with all logic related with SocketIO and WebRTC.

App creating proccess:

  • Prepare environment

  • Build frontend of our application with React

  • Connect with SocketIO and creating necessary logic

  • WebRTC implementation for group calls

  • Add WebRTC data channels for chat functionality

  • Add functionality to connect only with audio

  • Get TURN server credentials

  • Deploy application

I hope you will enjoy the course and after finishing it you will feel confident to create amazing applications using technologies which you will learn through the course.

Content

Introduction

App Functionalities
Mesh Architecture Introduction
Theory - What is WebRTC ?
What is signaling server ?
What is STUN server ?
What is TURN server ?
What is SDP ?
What are ICE candidates ?
How to establish direct connection between two peers ?

Preparing environment

Node.js installation
Creating Server and Installing Dependencies
Preparing our basic server logic
Initialization of React Application
Preparing React project
Store configuration with Redux

Creating front-end of Application in React

Stylesheets and Icons
Preparing Pages Components before adding routing to our Application
Adding Routing in React
Creating Introduction Page without Buttons
Creating Introduction Page Buttons
Creating Join Room Page
Dispatching first action in Redux - isRoomHost
Displaying different title depends on the props
Rendering Join Room Page Inputs
Fixing bug with wrong content
Creating audio only checkbox
Saving information about connection type in Redux Store
Create Component responsible for displaying error message
Creating Join Room Page buttons
Checking if room exists on server
Handling response from server about information if room exists
Logic separation of Joining / Creating room
Testing our HTTP request
Saving Indentity (username) in Store

Creating Room Page UI with React

Preparing basic structure of Room Page
Creating Room Label
Passing correct room id to the Label Component
Creating Participants Sections
Displaying Single Participant
Creating Room Buttons Structure
Creating Mic Button
Creating Camera Button
Creating Leave Room Button
Creating Screen Share Button

Creating server logic with Socket.IO

Preparing for Room Connection
Getting Local Stream
Creating Loading Overlay
Creating connection with Socket.IO Server
Connecting to Socket.IO Server from Client Side
Emitting an Event to Server to Create New Room
Testing Event responsible for Creating New Room
Creating Create New Room Handler
Getting Room Id from Server
Showing Real Users Connected To Room In Participants List
Fixing bug with User List
Creating Join Room Handler
Testing Joining Room
Leaving Room
Closing Room if None users left

Creating WebRTC logic

Architecture introduction
Prepare for connection
Handle connection prepare Event
Starting with simple-peer
Handling on stream Event
Handling on signal Event
Passing signaling data to connected Users
Emitting Event - connection init
Displaying Local Preview
Displaying incoming Streams
Testing WebRTC Connection
Constraints
Zoom In possibility
Leaving Room Functionality
Code explanation

Connecting logic to Room Buttons

Mute Functionality
Disable Video Functionality
Testing Buttons
Screen Sharing - Preview
Fixing Bug with disabling Screen Share
Switching Track which we are sending in Peer connection

Creating Chat Functionality

Creating Chat UI
Creating Messages Container
Creating New Message Input
Preparing Store for Messages
Exchanging Messages with other Users

Connection only with Audio

Connecting only with Audio
Creating Only Audio Label
Fixing Bug with Audio Only Label
Small improvments

Connection with TURN Server

Fetching TURN Server Credentials from Twilio
Adding TURN servers to Peer Connection

Fixes and deployment

Fixing Zoom In Bug
Deployment and Direct Chat Messages (Chat Box)

Screenshots

WebRTC - Create Zoom Clone Video Group Call Application - Screenshot_01WebRTC - Create Zoom Clone Video Group Call Application - Screenshot_02WebRTC - Create Zoom Clone Video Group Call Application - Screenshot_03WebRTC - Create Zoom Clone Video Group Call Application - Screenshot_04

Reviews

Muhmmad
August 10, 2023
My experience with this course was far from ideal. The tutor's poor teaching skills, outdated course content, and lack of instructor responsiveness all contributed to a frustrating and unsatisfactory learning experience.
Yasir
April 16, 2022
This is an amazing course. The instructor has depth knowledge on the subject and has very right capability to explain the topic, both of these two aspects made this course really great and helpful.
Bhavesh
April 16, 2022
As a university student, I am really happy to learn these technologies concurrently with my outdated syllabus still stuck on php.
Happy
January 24, 2022
Many people get stuck at section 92, and the code has bugs. I hope this will be solved, and i will come to change my score once it has been solved.
Abhinav
January 18, 2022
Just reading and reading. Neither understands anything nor makes us understand either. Only blabbering a poem continuously.
Branko
December 30, 2021
Either place this course in "advanced course" or explain all the concepts with greater details... When a beginner pay for some course just give him your best... Check my other courses for more explanation is not the best way to explain how things work...

Coupons

DateDiscountStatus
10/3/202193% OFF
expired

Charts

Price

WebRTC - Create Zoom Clone Video Group Call Application - Price chart

Rating

WebRTC - Create Zoom Clone Video Group Call Application - Ratings chart

Enrollment distribution

WebRTC - Create Zoom Clone Video Group Call Application - Distribution chart
4238056
udemy ID
8/12/2021
course created date
8/16/2021
course indexed date
Bot
course submited by