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
Free
WebRTC 2022 Practical Course. Create Video Chat Application is a 82-lesson 8 hours 44 minutes self-paced course by Udemy. Learn WebRTC by creating project with vanilla JavaScript.
Course facts
- Lessons
- 82
- Duration
- 8 hours 44 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Udemy
- Price
- Free
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.
Who teaches WebRTC 2022 Practical Course. Create Video Chat Application? 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.
What lessons are included in WebRTC 2022 Practical Course. Create Video Chat Application?
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
0:00 0:00
| # | Lesson 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 |
What courses are similar to WebRTC 2022 Practical Course. Create Video Chat Application?
-
Updated 2y agoHigher-level WebRTC Protocols
By: Tsahi Levent-LeviThe Higher-level WebRTC Protocols training course is meant to go deeper into how WebRTC works.5h 36m -
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 -
Updated 2y agoLow-level WebRTC Protocols
By: Tsahi Levent-LeviThe 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.5h 30m -
Updated 3y agoJust Express (with a bunch of node and http). In detail.
By: UdemyYou have some notion of what Node, Express, and http are or you wouldn't be here.12h 33m5/5 -
Updated 7mo 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 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
More courses by Udemy
-
NewReact - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.47h 42m5/5 -
Updated 3y agoComplete C# Unity Game Developer 3D
This is the long-awaited sequel to the Complete Unity Developer - one of the most popular e-learning courses on the internet!30h 34m -
Updated 3y agoNest.js Microservices: Build & Deploy a Scaleable Backend
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul5h 39m5/5 -
Updated 3y agoThe HTML & CSS Bootcamp 2023 Edition
Brand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!37h 18m5/5 -
Updated 3y agoMicroservices with Node JS and React
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!54h 13m5/5 -
FreeClassic100 Days of Code - The Complete Python Pro Bootcamp for 2023
Watch the 100 Days of Code Python Pro Bootcamp free: 100 daily projects covering Python basics, web scraping, data science, automation and GUI apps.58h 35m5/5
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.