WebRTC Practical Course. Build Video Chat With React

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: What's next

Lecture 1: What's next