WebRTC 2022 Practical Course. Create Video Chat Application

8h 44m 29s
English
Paid

Course description

Learn WebRTC by creating project with vanilla JavaScript. Only basic JavaScript knowledge is required.  We will go through all of the steps to create application with direct calls where you can establish connection between two users by passing his personal code or you can just connect with the stranger like in omegle or talkwithstranger web apps. We will write own WebRTC implementation to show how easily you can develop WebRTC application.

Read more about the course

We will not use any framework  for our front-end so you do not need to have any experience with frameworks(React, Vue.js, Angular). We will use also Socket.IO 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 two peers.

In our application we will use:

  • WebRTC

  • JavaScript

  • Socket.IO

  • Express.js

  • Node.js

  • Vanilla JavaScript to create front-end of our application

We will focus on things related with WebRTC. Also you will get a knowledge how you can use Socket.IO as your websocket server.

App creating proccess:

  • Prepare environment

  • Build frontend of our application with vanilla JavaScript

  • Connect with Socket.IO

  • Add our own WebRTC implementation for calls

  • Add WebRTC data channels for chat functionality

  • Add recording possibility

  • Add possibility to connect with the strangers

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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 82 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online WebRTC 2022 Practical Course. Create Video Chat Application

0:00
/
#1: Course preview

All Course Lessons (82)

#Lesson TitleDurationAccess
1
Course preview Demo
00:53
2
Technology stack and introduction
01:56
3
App preview - direct video calls
02:32
4
App preview - messenger
01:33
5
App preview - Strangers
04:54
6
Theory - What is WebRTC ?
01:39
7
Theory - What is signaling server ?
01:17
8
Theory - What is STUN server ?
01:11
9
Theory - What is TURN server ?
02:07
10
Theory - What is SDP ?
01:37
11
Theory - What are ICE candidates ?
01:44
12
Theory - How to establish direct connection between peers
03:12
13
Server initialization
12:16
14
Adding nodemon to watch the changes
03:42
15
Connecting our server with Socket.IO
02:03
16
Connecting to Socket.IO from client side
07:00
17
Storing array of connected users in our server
05:34
18
Importing files to our project and creating main preview
06:04
19
Creating personal code container
07:16
20
Creating input for personal code and connection buttons
04:56
21
Creating buttons for stranger connection
03:18
22
Adding checkbox for stranger connections
03:28
23
Dashboard styling fix and dashboard blocker added
03:16
24
Creating call container placeholder and remote video
02:36
25
Adding local video preview
01:17
26
Creating conversation buttons
07:22
27
Creating end chat connection button
02:17
28
Creating recording buttons and panel
04:21
29
Adding new message input with button
05:25
30
State management - adding our custom store
12:34
31
Updating personal code
08:22
32
Coping button functionality
04:44
33
Code preparation to send pre-offer
15:42
34
Sending pre-offer to server
06:23
35
Sending pre-offer to callee
13:43
36
Fixing pre-offer bug
01:45
37
Handling pre-offer
11:52
38
Creating incoming call dialog
17:03
39
Showing calling dialog only when pre offer will come
07:36
40
Solving problem with no request coming
02:23
41
Creating calling dialog at caller side
09:03
42
Sending pre-offer answer to caller
07:41
43
Handling pre-offer answer
10:34
44
Showing response dialog if call is not possible
12:41
45
Showing call elements related with call type
11:15
46
Setting correct position of remote video element
01:32
47
Getting an access to camera and microphone and showing that in local preview
06:13
48
Creating peer connection
09:39
49
Sending WebRTC offer
11:54
50
Testing WebRTC offer
03:42
51
Handling WebRTC offer. Preparing WebRTC answer and handling it at caller side
06:28
52
Exchanging ICE candidates and adding them to peer connection
08:00
53
Adding functionality to mute and unmute and turn on/off camera
11:44
54
Screen sharing functionality
10:05
55
Switching back to camera
06:22
56
Creating data channel and configuring peer connection
04:58
57
Sending messages using data channel
08:14
58
Displaying messages
10:29
59
Creating recording utils
10:29
60
Connecting recording utils with buttons
09:14
61
Pausing and resuming recording
05:41
62
Preparing for hang up possibilty
09:18
63
Hanging up with connected user
13:46
64
Finishing chat connection
01:47
65
Preparing call states
07:44
66
Finishing call states
11:29
67
Fixing call state bug
06:32
68
adding hang up possibility to calling dialog
03:26
69
Allow connections from strangers checkbox
09:39
70
Storing list of the users which allow connections from strangers at server
07:26
71
Getting socket id of random user from server
10:29
72
Fixing bug when trying to get random socket id from server
01:23
73
Connecting with Stranger
06:23
74
Showing UI depends of the stranger call type
02:33
75
Adding information if no Strangers are available
03:12
76
Heroku - deploying app
15:00
77
Getting TURN server credentials from Twilio
09:06
78
Fetching TURN server credentials from client side
09:11
79
Checking if TURN credentials are successfully fetched
01:54
80
Deploying application connected to TURN server
05:34
81
Testing connection with user connected to different network
01:53
82
What's next
01:53

Unlock unlimited learning

Get instant access to all 81 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React and WebRTC 2023 & Sharing Location App with Video Chat

React and WebRTC 2023 & Sharing Location App with Video Chat

Sources: udemy
Learn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''. In this practical course we will jump str
8 hours 11 minutes 54 seconds
Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Sources: udemy
Learn how to connect MERN Stack with WebRTC and SocketIO. We will go through all of the steps to create application with group call functionality. We will crea
19 hours 29 minutes 29 seconds
Just Express (with a bunch of node and http). In detail.

Just Express (with a bunch of node and http). In detail.

Sources: udemy
You have some notion of what Node, Express, and http are or you wouldn't be here. Node and back-end JavaScript have taken the world by storm, [SOME BIG COMPANY] moved to node an...
12 hours 33 minutes 3 seconds
Low-level WebRTC Protocols

Low-level WebRTC Protocols

Sources: Tsahi Levent-Levi
The Low-level WebRTC Protocols training course is focused on getting you up to a level of understand of the WebRTC protocols that will enable you to debug challenging network sc...
5 hours 30 minutes 41 seconds
Higher-level WebRTC Protocols

Higher-level WebRTC Protocols

Sources: Tsahi Levent-Levi
The Higher-level WebRTC Protocols training course is meant to go deeper into how WebRTC works. In a way, it is a continuation of our Low-level WebRTC Protocols course and is des...
5 hours 36 minutes 28 seconds