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.
WebRTC 2022 Practical Course. Create Video Chat Application
8h 44m 29s
English
Paid
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.
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 82 lessons
0:00
/ #1: Course preview
All Course Lessons (82)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionRelated courses
-
Updated 2y agoReact and WebRTC 2023 & Sharing Location App with Video Chat
By: UdemyLearn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''. In this practical course we will jump str8h 11m -
Updated 5mo agoAdvanced WebRTC Architecture
By: Tsahi Levent-LeviLearn how to build and optimize applications on WebRTC from the basics to architectural solutions. For engineers and product managers.20h 8m -
Updated 2y agoDiscord Clone - Learn MERN Stack with WebRTC and SocketIO
By: UdemyLearn 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 crea19h 29m
Frequently asked questions
What prerequisites are necessary for this course?
The course requires only a basic knowledge of JavaScript. It is designed for individuals who are familiar with core JavaScript concepts but does not necessitate any prior experience with WebRTC or advanced JavaScript frameworks.
What will I build during this course?
Participants will create a video chat application using WebRTC and vanilla JavaScript. The application will support direct calls and stranger connections, similar to web apps like Omegle or Talkwithstranger. The project includes features like video streaming, chat messaging, and screen sharing.
Who is the target audience for this course?
This course is intended for developers with basic JavaScript knowledge who want to learn about real-time communication technologies. It is suitable for students, hobbyists, or professionals interested in building video chat applications or expanding their understanding of WebRTC.
What specific tools or platforms will I use?
The course uses vanilla JavaScript for development and Socket.IO for server-client communication. Participants will also learn to work with signaling servers, STUN and TURN servers, and will configure peer connections and data channels within the WebRTC framework.
What topics are not covered in this course?
The course does not cover advanced JavaScript frameworks or libraries such as React, Angular, or Vue.js. It focuses solely on vanilla JavaScript and WebRTC technologies, without delving into third-party video conferencing APIs or enterprise-level deployment strategies.
How much time should I expect to commit to this course?
The course consists of 82 lessons. While the total runtime is not specified, students should allocate sufficient time for both watching the lessons and implementing the project, which can vary depending on individual learning pace.
How can the skills learned in this course be applied to other courses or careers?
Skills acquired in this course, such as understanding WebRTC protocols, peer-to-peer connections, and real-time communication, are valuable in the growing field of web-based communication technologies. These skills can be applied to further studies in web development, networking, and multimedia applications, as well as careers in software development and telecommunications.