WebRTC Practical Course. Create Video Chat Application

Course Curriculum

Chapter 1: App presentation and theory

Lecture 1: Course preview

Lecture 2: Technology stack and introduction

Lecture 3: App preview – direct video calls

Lecture 4: App preview – messenger

Lecture 5: App preview – Strangers

Lecture 6: Theory – What is WebRTC ?

Lecture 7: Theory – What is signaling server ?

Lecture 8: Theory – What is STUN server ?

Lecture 9: Theory – What is TURN server ?

Lecture 10: Theory – What is SDP ?

Lecture 11: Theory – What are ICE candidates ?

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

Chapter 2: Prepare environment and create server

Lecture 1: Server initialization

Lecture 2: Adding nodemon to watch the changes

Lecture 3: Connecting our server with Socket.IO

Lecture 4: Connecting to Socket.IO from client side

Lecture 5: Storing array of connected users in our server

Chapter 3: Creating front-end of our application

Lecture 1: Importing files to our project and creating main preview

Lecture 2: Creating personal code container

Lecture 3: Creating input for personal code and connection buttons

Lecture 4: Creating buttons for stranger connection

Lecture 5: Adding checkbox for stranger connections

Lecture 6: Dashboard styling fix and dashboard blocker added

Lecture 7: Creating call container placeholder and remote video

Lecture 8: Adding local video preview

Lecture 9: Creating conversation buttons

Lecture 10: Creating end chat connection button

Lecture 11: Creating recording buttons and panel

Lecture 12: Adding new message input with button

Chapter 4: Preparing logic of the application before WebRTC connection

Lecture 1: State management – adding our custom store

Lecture 2: Updating personal code

Lecture 3: Coping button functionality

Lecture 4: Code preparation to send pre-offer

Lecture 5: Sending pre-offer to server

Lecture 6: Sending pre-offer to callee

Lecture 7: Fixing pre-offer bug

Lecture 8: Handling pre-offer

Lecture 9: Creating incoming call dialog

Lecture 10: Showing calling dialog only when pre offer will come

Lecture 11: Solving problem with no request coming

Lecture 12: Creating calling dialog at caller side

Lecture 13: Sending pre-offer answer to caller

Lecture 14: Handling pre-offer answer

Lecture 15: Showing response dialog if call is not possible

Lecture 16: Showing call elements related with call type

Lecture 17: Setting correct position of remote video element

Chapter 5: WebRTC implementation to establish connection between two users

Lecture 1: Getting an access to camera and microphone and showing that in local preview

Lecture 2: Creating peer connection

Lecture 3: Sending WebRTC offer

Lecture 4: Testing WebRTC offer

Lecture 5: Handling WebRTC offer. Preparing WebRTC answer and handling it at caller side

Lecture 6: Exchanging ICE candidates and adding them to peer connection

Lecture 7: Adding functionality to mute and unmute and turn on/off camera

Lecture 8: Screen sharing functionality

Lecture 9: Switching back to camera

Chapter 6: WebRTC data channels

Lecture 1: Creating data channel and configuring peer connection

Lecture 2: Sending messages using data channel

Lecture 3: Displaying messages

Chapter 7: MediaRecorder API

Lecture 1: Creating recording utils

Lecture 2: Connecting recording utils with buttons

Lecture 3: Pausing and resuming recording

Chapter 8: Finishing app by adding possibility to connect with the strangers and hanging up

Lecture 1: Preparing for hang up possibilty

Lecture 2: Hanging up with connected user

Lecture 3: Finishing chat connection

Lecture 4: Preparing call states

Lecture 5: Finishing call states

Lecture 6: Fixing call state bug

Lecture 7: adding hang up possibility to calling dialog

Lecture 8: Allow connections from strangers checkbox

Lecture 9: Storing list of the users which allow connections from strangers at server

Lecture 10: Getting socket id of random user from server

Lecture 11: Fixing bug when trying to get random socket id from server

Lecture 12: Connecting with Stranger

Lecture 13: Showing UI depends of the stranger call type

Lecture 14: Adding information if no Strangers are available

Chapter 9: App deployment to heroku

Lecture 1: Heroku – deploying app

Chapter 10: Connecting with TURN server and checking connection outside of local network

Lecture 1: Getting TURN server credentials from Twilio

Lecture 2: Fetching TURN server credentials from client side

Lecture 3: Checking if TURN credentials are successfully fetched

Lecture 4: Deploying application connected to TURN server

Lecture 5: Testing connection with user connected to different network

Chapter 11: What's next

Lecture 1: What's next