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

Join premium to watch
Go to premium
# Title Duration
1 Course preview 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

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
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
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
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