WebRTC 2022 Practical Course. Create Video Chat Application
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.
More
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 WebRTC 2022 Practical Course. Create Video Chat Application
| # | 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 |
Similar courses to WebRTC 2022 Practical Course. Create Video Chat Application
Higher-level WebRTC Protocols
Just Express (with a bunch of node and http). In detail.
