Booking options
£52.99
£52.99
On-Demand course
3 hours 26 minutes
All levels
In this course, we will learn about the future's technology called WebRTC by building two real-world chat applications. We will learn what is WebRTC, why it is important, how it works, and cover the different protocols used in WebRTC. A basic understanding of HTML, CSS, and JavaScript is required.
WebRTC is one of the most revolutionary technologies of the present. It is widely used in popular applications such as Discord, Zoom, and Google Meet. The use cases of WebRTC go beyond communication as it is also behind gaming consoles such as Google Stadia, and can be used for untapped use cases such as peer-peer file sharing. WebRTC is not just the present, it is also the future as we shift more and more towards cloud infrastructure. The true potential of WebRTC is limited primarily due to the lack of knowledge around the subject. WebRTC is a culmination of the development of Internet technology over the last 20 years. It uses several protocols, which makes it a complex technology to learn. The goal of this course is to smoothen this learning curve while not losing focus on the concepts that make it such a powerful technology. This is a very practical-oriented course. We learn what is WebRTC, why it is important, how it works, and cover the different protocols used in WebRTC. Followed by building two real-world applications: a real-time chat application as well as a video chat application. By the end of this course, you will be able to work with WebRTC and build your own application. The code bundle for this course is available at https://github.com/PacktPublishing/Practical-WebRTC-A-Complete-WebRTC-Bootcamp-for-Beginners
Learn what is WebRTC and why is it important
Understand how WebRTC works
Explore the different protocols used in WebRTC
Build two practical WebRTC applications
Implement Signaling Server to manage the connections
Use WebSockets to build a real-time chat application
This course is for anyone who is interested in making practical applications using WebRTC or looking to learn the concepts and protocols that make up WebRTC. This course will be best for beginners with a basic understanding of the web and HTML, CSS, and JavaScript.
This is a practical course where we will be building two real-world chat applications with WebRTC.
Understand what WebRTC is and how it works * Build two practical WebRTC applications (a real-time chat app and a video chat application) * Use WebSockets and Signaling Server while building the applications
https://github.com/PacktPublishing/Practical-WebRTC-A-Complete-WebRTC-Bootcamp-for-Beginners
Ajay Warrier is the founder of Bananas Academy, an independent game studio that makes educational games. He also teaches programming to more than 38,000 students from all over the world. He is a computer science engineer with a master's degree in marketing. He has industry-level experience in game development (Godot), cross-platform mobile development (Flutter), and distributed applications (Ethereum Blockchain).
1. Introduction
1. Welcome to the World of WebRTC WebRTC enables real-time communication on the web and mobile devices. It is one of the hottest technologies to learn right now. So, what are you waiting for? Let us get started. |
2. Prerequisites for the Course You will need the basics of HTML, CSS, and JavaScript to make the most of this course. If you have that covered, you are all set to be an expert in WebRTC. |
3. Why WebRTC? Knowing the 'why' makes everything easier. In this lecture, we talk about why WebRTC came into existence. |
4. How Does WebRTC Work? A clearer picture of how WebRTC works under the hood. |
2. Project 1: Real-Time Chat Application
1. WebSockets A brief introduction about WebSockets, an important technology that helps us make real-time applications. |
2. Setting Up the Environment In this lecture, we will be setting up our workspace so that we can start working on our first project. |
3. Setting Up the Project In this lecture, we will set up our project and install all the packages we need to get started. |
4. Running Our Express Server In this lecture, we will learn how to start an express server and make it listen to a unique port. |
5. Real-Time Chat Application GitHub In this lecture, I will tell you how to find the codebase of the real-time chat project on GitHub. |
6. Bringing HTML into the Mix In this lecture, we will learn how to configure our express server so that it sends back HTML files on client requests. |
7. Design of Our Chat Application We will design our chat application with a basic UI. |
8. Implementing WebSockets In this lecture, we will connect our server and client with the power of WebSockets. |
9. Finishing Off Our Chat Application In this lecture, we will complete the development of our chat application. |
10. Let Us Celebrate; You Made It Congratulations! You just made a real-time chat application. |
3. Game of Protocols
1. Introduction to WebRTC Protocols In this lecture, we will start our journey through the large collection of protocols that enable WebRTC to function. |
2. SDP Let us talk about our first protocol, Session Description Protocol. |
3. ICE Let us talk about the ICE protocol. |
4. RTP, RTCP Let us talk about the RTP and RTCP protocol. |
5. SCTP Let us talk about the SCTP protocol. |
6. DTLS and SRTP Let us talk about the DTLS and SRTP protocol. |
7. Why Do We Need Turn Server (Story Mode) In this lecture, we will understand why we need turn server. |
8. Protocols in Action In this lecture, we will see how all these protocols come together in a live demo. |
4. Project 2: Video Chat Application
1. Setting Up Our Video Chat Application In this lecture, we will set up our project and install all the packages we need to get started. |
2. Video Chat Application GitHub In this lecture, I will tell you how to find the codebase of the video chat project on GitHub. |
3. Getting User Media In this lecture, we will use user media. |
4. Getting Started with Our Signaling Server In this lecture, we will start implementing our signaling server. |
5. Making a Signaling Server In this lecture, we will learn how to send signals back and forth between our clients using our signaling server. |
6. Setting Up Client-Side Events In this lecture, we will write the logic for the events created, joined, and full on the client-side. |
7. UPDATE: Getting User Media Deprecated Solution The old getUserMedia function was deprecated. So here is how you can use the new one. |
8. RTCPeerConnection and ICE In this lecture, we will use RTCPeerConnection and ICE. |
9. Ontrack Function In this lecture, we will implement another function, which is part of the RTCPeerConnection interface, Ontrack. |
10. Adding Media Tracks In the previous lecture, we learned how to display tracks received from the peer on the other side. In this lecture, we will focus on sending media tracks from our end to the end of the peer. |
11. Creating an Offer In this lecture, we will learn to create an offer at the end of the caller or person who created the room using RTCPeerConnection.createOffer(). |
12. Fixing Our Mistakes We made a small mistake while adding our Stun server; we will fix that and log our offer message to discover its structure. |
13. Offer and Answer In this lecture, we will learn the dynamics between offer and answer along with their importance in making WebRTC work. |
14. Finishing Up Our Video Chat Application The lecture you have been waiting for. In this lecture, we complete the implementation of our video chat application. |
15. EXTRAS: ES5 to ES6 This video explains how to port the code from ES5 to ES6, which is the newer version of JavaScript. |
16. Summing Things Up This video is a quick summary of everything we learned in this section. |
17. EXTRAS: Upgrading the Video Chat Application In this lecture, we will start adding some more additional functionality to the video chat application. |
18. EXTRAS: Implementing Mute and Hide Camera In this lecture, we will be implementing mute and hide camera buttons. |
19. EXTRAS: Implementing the Leave Room Button In this lecture, we will implement the leave room button and then test our new and improved video chat. |
20. EXTRAS: One Final Change and GitHub Repo In this lecture, we will make one minor change to our application code, and I will show you how to find the code for this updated version of the app on GitHub. |
21. BUG FIX: Creating Multiple Rooms This video shows how to fix the bug that stopped the creation of multiple rooms. |
22. EXTRAS: Private Network, Safari, and iOS Support This lecture is about adding Safari, iOS support to our video chat application. |
23. BUG FIX: Fixing Feedback Issue In this lecture, we will fix the feedback issue on our application. |
24. Until We Meet Again Thank you so much for being a part of this course. This is not a full stop; it is a semicolon. |