Description

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

What You Will Learn

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

Audience

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.

Approach

This is a practical course where we will be building two real-world chat applications with WebRTC.

Key Features

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

Github Repo

https://github.com/PacktPublishing/Practical-WebRTC-A-Complete-WebRTC-Bootcamp-for-Beginners

About the Author

Ajay R. Warrier

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

Course Outline

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.

Course Images

Practical WebRTC: A Complete WebRTC Bootcamp for Beginners

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews