Mastering webRTC - make a video chat app! from Udemy

TL;DR - you'll learn WebRTC in this course - how to get a video feed and setup a video chat between browsers with just JavaScript. The first section and a few later projects are front-end only, the connection section and later projects require Node.js and Socketio.

It's 2024. Whether because of the pandemic, chat bots, or cost savings, working remote is a thing. Telemedicine is a thing. Talking to people 6 time zones away is a thing. You can abstract your users from your app to Zoom because it always works, but you lose all control and tracking of the interaction.

Enter webRTC.

WebRTC is one of the browsers must mind blowing apis. It allows access to the mic, camera, even the screen AND to share them across a network socket No server (mostly) or other middleman to add bandwidth, bugs, and chaos.

Along with websockets, webRTC presents the video-side of browser real-time communication, bridging one of the last gaps in both human and web-based communication. There's a good chance if you're reading this, you've heard about webRTC. Maybe even done a tutorial on it. But how far did you get? In my experience, the vast majority of the material on the web goes no farther than a quick-start, zoom clone. You don't learn how anything works, never look at the docs, and are stuck at the end wondering what to do now. Is that all webRTC can do? The remaining shred of material is waaaaay over everyone's head. The fact that the webRTC was released about the same time as the websocket API and most developers still don't know how to use it is evidence of the gap.

This course is the first step to alleviate that. It is not a quick start guide to webRTC. There are loads of those all over the Internet. You should definitely look elsewhere if you are wanting a 10 minute intro to the 3-4 things you need to know to make a basic zoom clone. On the other hand, if you are looking to really learn one of the most awesome JavaScript APIs that no one seems to know, you should stick around. Like Express and other JavaScript/Node pieces, it's getting passed over in the wave to learn just enough to get to the term "full-stack developer." My main goal is to help you figure out how to go from being a good developer to a great developer. Understanding... not just knowing a few methods... WebRTC is part of that.

I first used webRTC in 2015 for a startup similar to telemedicine. I've been following since and have been frustrated that it hasn't gotten more mainstream notice due to Apple's reluctant support, but mostly because devs don't know it. It opens the way for so many improvements to existing applications and obvious groundwork for new ones. Let's change that :) Prepare to for a detailed look at webRTC and start going in-app real-time video/screen chat.

What we cover:

Front-end only portion

getUserMedia() - getting access to the mic and camera in the browser
playing the feed in a <video />
MediaStream and MediaStreamTrack - what makes up a video feed
Constraints - getSupportedConstraints() and getCapabilities() - seeing what this browser can do
applyConstraints - changing the feed on the fly
Recording video/audio and playing it back
Capturing the Screen for screen share and recording it
Changing input/output devices in your feed

Back-End required (node, socketio)

RTCPeerConnection - the heart of webRTC
Creating an offer and an answer
Setting RTCSessionDescription
The Signaling Process
Build a signaling server with socketio
Gathering ICE Candidates
Building a React app w/redux that uses webRTC

What's inside

Learning objectives

Connect two or more computers audio/video streams
Set up a signaling server to act as a middle man to negotiate the connection
How to integrate webrtc into a react app w/redux

Code organization to minimize confusion as your app grows
Manage 4 (yes 4) different async sources to create an incredible web app

Connect two or more computers audio/video streams
Set up a signaling server to act as a middle man to negotiate the connection
How to integrate webrtc into a react app w/redux
Code organization to minimize confusion as your app grows
Manage 4 (yes 4) different async sources to create an incredible web app

Syllabus

Introduction to webRTC

What is WebRTC and what does it do?

All my code (github link)

Getting the codebase for a specific video

git checkout Set-Local-Description

git checkout Add-Local-Description

git checkout Add-Socketio

git checkout Emit-Offer

git checkout Load-Existing-Offers

git checkout Create-Answer

git checkout Signal-Error-Handling

git checkout Emitting-Answer

git checkout On-Answer-Response

git checkout Add-Ice

git checkout Apply-Ice

git checkout Add-Tracks

git checkout Create-JWT

git checkout Add-React-Router

git checkout Join-Video

git checkout Starting-Components

git checkout Wire-Up-Redux

git checkout Add-Action-Buttons

git checkout GUM-Store-Stream

git checkout Create-Peer-Connection

git checkout Thinking-Functions

git checkout Abstract-Video-Audio-Buttons

git checkout Add-Video-Feed

git checkout Enable-Disable-Video

git checkout Display-Local-Video-Inputs

git checkout Set-New-Video-Device

git checkout Replace-Tracks

git checkout Abstract-DropDown

git checkout Setup-Audio-Button

git checkout Switch-Audio-Devices

git checkout Start-Mute-Audio

git checkout Organize-Offers

git checkout Create-Offer-Tele

git checkout Add-Dashboard

git checkout Auth-Pro

git checkout Socket-Refactor

git checkout Reorg-Appt-Data

git checkout Pull-Appt-Data

git checkout Listen-Offers-Tele

git checkout Join-Video-Route

git checkout Call-Info-Pro

git checkout Create-Answer-Tele

git checkout Emit-Answer-Server

git checkout Listen-For-Answer

git checkout Emit-Ice-Candidates-Server

git checkout Ice-To-Clients

git checkout Add-Ice-PC

git checkout Add-Tracks-Victory

git checkout Tele-Bug-Fix-1

git checkout HangUp-Button

git checkout Replace-Tracks-Tele

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Explores WebRTC, which enables real-time audio and video communication directly in the browser without plugins, opening doors for innovative web applications

Covers front-end aspects like accessing the camera and microphone, manipulating video feeds, and screen sharing, providing a comprehensive understanding of media handling in the browser

Requires Node.js and Socket.io for the connection section and later projects, so learners should have some familiarity with these technologies to fully benefit

Delves into back-end aspects using Node.js and Socket.io to build a signaling server, which is essential for establishing peer-to-peer connections in WebRTC applications

Includes a project that integrates WebRTC into a React application with Redux, offering practical experience in building modern, stateful video chat applications

Features a section on deploying the application to AWS, which is valuable for learners looking to bring their WebRTC projects to a production environment

Reviews summary

Deep dive into webrtc development

According to learners, this course offers a positive and in-depth exploration of WebRTC, moving beyond basic tutorials to explain the underlying mechanisms. Many appreciate the instructor's clear explanations and the practical, hands-on projects, particularly the TeleLegal React app which helps solidify concepts. Students find the coverage of the signaling process and RTCPeerConnection especially valuable. However, some reviews note challenges, including setup difficulties, potentially outdated dependencies, and the need for a solid foundation in JavaScript, Node.js, and React. The final section on AWS deployment is highlighted as complex and potentially outside the core WebRTC focus for some.

Complex and maybe outside core course focus.

"The AWS deployment part felt a bit rushed and beyond the scope of a WebRTC course."

"Deploying the app to AWS was the most challenging part for me, and it wasn't directly WebRTC."

"While useful for completeness, the AWS section could be its own separate module or course."

"It was helpful to see deployment, but it definitely increased the course's difficulty ceiling."

Instructor is knowledgeable and easy to follow.

"The instructor has a great teaching style and makes complex topics easy to understand."

"I found the explanations on signaling particularly clear and concise."

"You can tell the instructor has real-world experience with WebRTC."

"He breaks down the intimidating WebRTC API into manageable pieces."

Hands-on coding and a significant React project.

"The hands-on coding and projects are the strongest part of the course for me."

"Building the TeleLegal React app was a great way to see how WebRTC integrates into a real application."

"I found the practical exercises after each section very helpful for reinforcing what I learned."

"The project structure provided gives a good example of organizing a larger WebRTC application."

Goes beyond basics, explaining core concepts.

"This course really helped me understand the nuts and bolts of WebRTC, not just copy-pasting a quick start example."

"The instructor explains the 'why' behind the code, which is invaluable for mastering complex APIs like WebRTC."

"I appreciate the deep dive into RTCPeerConnection and the signaling process... finally makes sense now."

"Unlike other tutorials, this one doesn't just build a zoom clone, it explains the underlying API interactions."

Initial setup and dependencies can be difficult.

"Getting the initial project setup and dependencies working took longer than expected."

"Some of the library versions seem slightly outdated, causing minor compatibility issues."

"Encountered a few errors during the setup phase that required some debugging."

"Make sure you follow the Git checkout instructions carefully, but still be prepared for potential setup snags."

Assumes strong background in JS, Node, React.

"Be warned: you need a solid grasp of modern JavaScript, Node.js, and React before taking this."

"The pace in some sections assumes you are already comfortable with React/Redux."

"Not for beginners. If you're not strong in backend JavaScript, you might struggle."

"I had to pause often to brush up on Node and Socket.IO concepts."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Mastering webRTC - make a video chat app! with these activities:

Review Networking Fundamentals

Show steps

Reviewing networking fundamentals will provide a solid foundation for understanding how WebRTC establishes connections and transmits data.

Browse courses on Networking

Show steps

Review the OSI model and key networking protocols.
Study the basics of TCP/IP and UDP.
Understand the concepts of sockets and ports.

Study 'Real-Time Communication with WebRTC'

Show steps

Studying a book dedicated to real-time communication with WebRTC will deepen your understanding of the underlying technologies and best practices.

View Real-Time Communication with WebRTC: Peer-to... on Amazon

Show steps

Read the chapters on NAT traversal and ICE framework.
Study the examples provided in the book.
Experiment with the code snippets to reinforce learning.

Read 'WebRTC API: The Complete Guide'

Show steps

Reading a comprehensive guide on WebRTC will provide a deeper understanding of the API and its capabilities.

View Putting Knowledge to Work on Amazon

Show steps

Read the chapters on signaling and ICE.
Study the examples provided in the book.
Experiment with the code snippets to reinforce learning.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Create a Presentation on WebRTC Use Cases

Show steps

Creating a presentation on WebRTC use cases will help you explore the diverse applications of WebRTC and improve your presentation skills.

Show steps

Research different WebRTC use cases (e.g., video conferencing, telemedicine, gaming).
Create a visually appealing presentation with clear and concise slides.
Practice your presentation skills.
Present your findings to a group of peers or colleagues.

Build a Simple Peer-to-Peer Video Chat Application

Show steps

Building a simple video chat application will allow you to apply the concepts learned in the course and gain practical experience with WebRTC.

Show steps

Set up a basic HTML page with video elements.
Implement the getUserMedia() function to access the camera and microphone.
Establish a peer-to-peer connection using RTCPeerConnection.
Implement signaling using a simple server (e.g., Socket.IO).

Write a Blog Post on WebRTC Security Considerations

Show steps

Writing a blog post on WebRTC security will help you solidify your understanding of the security aspects of WebRTC and share your knowledge with others.

Show steps

Research common WebRTC security vulnerabilities.
Outline the key security considerations for WebRTC applications.
Write a clear and concise blog post explaining these considerations.
Publish the blog post on a platform like Medium or your personal website.

Contribute to an Open-Source WebRTC Project

Show steps

Contributing to an open-source WebRTC project will provide valuable experience working with a real-world codebase and collaborating with other developers.

Show steps

Find an open-source WebRTC project on GitHub or GitLab.
Identify a bug or feature that you can contribute to.
Submit a pull request with your changes.
Respond to feedback from the project maintainers.

Career center

Learners who complete Mastering webRTC - make a video chat app! will develop knowledge and skills that may be useful to these careers:

Real Time Communications Engineer

A Real Time Communications Engineer designs, develops, and maintains real-time communication systems. This may involve video conferencing, live streaming, or other applications requiring low-latency data transfer. If you are interested in becoming a Real Time Communications Engineer, then this course will help you learn how to implement webRTC, which is a browser API for real-time communication. The course covers features such as getting access to the mic and camera in the browser, playing the feed in video, and using MediaStream and MediaStreamTrack. The course content includes the use of socketio and node, which are also essential tools for this occupation.

See salaries and explore the career path for Real Time Communications Engineer

Video Conferencing Software Developer

A Video Conferencing Software Developer focuses on creating and improving video conferencing applications. This includes designing user interfaces, implementing video and audio processing algorithms, and ensuring seamless connectivity between users. This course is excellent preparation, as the course teaches how to build a video chat application using webRTC. You'll learn how to access the camera and microphone, share them across the network, and set up the signaling process. The course also helps build a React application with Redux that uses webRTC. As a Video Conferencing Software Developer, you will be expected to know how to implement these features.

See salaries and explore the career path for Video Conferencing Software Developer

Web Application Developer

A Web Application Developer designs, codes, and tests web applications. They work on both the front-end and back-end, ensuring that applications are responsive, efficient, and user-friendly. This course will be useful by introducing you to webRTC, a powerful JavaScript API for real-time communication. It covers essential aspects like getting microphone and camera access, managing media streams, and setting up peer-to-peer video connections. The course also integrates webRTC with React and Redux, which are tools frequently used by Web Application Developers to build complex web applications.

See salaries and explore the career path for Web Application Developer

Telemedicine Software Engineer

A Telemedicine Software Engineer develops software solutions for remote healthcare, including video consultations, remote monitoring, and data transmission. This course directly aligns with the needs of a Telemedicine Software Engineer, discussing webRTC implementation, which is ideal for building telemedicine applications. The syllabus includes setting up audio/video streams between computers, managing asynchronous sources, and how to integrate webRTC into a React application. The course's React project that resembles a telemedicine site will be critical. As a Telemedicine Software Engineer, this course will grant a unique perspecitve.

See salaries and explore the career path for Telemedicine Software Engineer

Front-End Engineer

A Front End Engineer specializes in developing the user interface and user experience of websites and web applications. This course is relevant since it covers the front-end aspects of webRTC, like accessing the camera and microphone using getUserMedia(), playing the feed in a video element, and using MediaStream and MediaStreamTrack. The course also shows how to capture the screen for screen sharing and how to record it. Using knowledge gained the Front End Engineer can help build interactive experiences.

See salaries and explore the career path for Front-End Engineer

Full-Stack Developer

A Full Stack Developer works on both the front-end and back-end of web applications. They should be comfortable with both client-side and server-side technologies. This course can be useful for a Full Stack Developer because it covers both the front-end, with components such as getUserMedia to access the mic and camera, and back-end aspects of webRTC, specifically using Node.js and Socket.IO to manage connections. The course's React app with Redux integration and backend setup are relevant. As a Full Stack Developer, understanding webRTC provides a comprehensive skillset.

See salaries and explore the career path for Full-Stack Developer

Unified Communications Engineer

A Unified Communications Engineer designs and implements integrated communication systems, blending voice, video, and data solutions. This course is excellent preparation, helping you learn how to set up real-time audio and video communication using webRTC, which is essential for unified communications. You will be able to set up signaling servers, manage media streams, and build applications that integrate video chat. The course's integration of webRTC into React apps with Redux will also come in handy. Unified Communications Engineers need to be familiar with tools like these.

See salaries and explore the career path for Unified Communications Engineer

Software Engineer

A Software Engineer designs, develops, and tests software applications. They need to be proficient in various programming languages and development methodologies. This course may be useful by exposing you to webRTC, a powerful API for real-time communication. It may also help you understand how to access media devices, handle streams, and establish peer-to-peer connections. The course's integration of webRTC with React and Redux may be useful, providing insights into modern web application development.

See salaries and explore the career path for Software Engineer

Network Engineer

A Network Engineer designs, implements, and manages computer networks. They ensure that networks are secure, reliable, and efficient. This course may be useful as it may allow you to understand how webRTC establishes peer-to-peer connections, which can impact network traffic. It might also help you understand how signaling servers facilitate communication. This knowledge could provide Network Engineers with a better understanding of how real-time communication affects network performance.

See salaries and explore the career path for Network Engineer

DevOps Engineer

A DevOps Engineer automates and streamlines software development and deployment processes. The goal is to ensure continuous integration and continuous delivery. While this course's primary focus is not DevOps, the course shows how to deploy the application to Amazon Web Services. This can be useful to a DevOps Engineer. The course is more focused on the core skills associated with webRTC development.

See salaries and explore the career path for DevOps Engineer

Technical Support Engineer

A Technical Support Engineer provides technical assistance to customers, troubleshooting software and hardware issues. While this course is primarily focused on development, the course's focus on webRTC, a cutting-edge technology, can be beneficial for a Technical Support Engineer. This is due to the increasing use of real-time communication in various applications. Knowing how webRTC works can help diagnose and resolve related issues more effectively.

See salaries and explore the career path for Technical Support Engineer

Quality Assurance Engineer

A Quality Assurance Engineer tests software to ensure it meets quality standards and user requirements. While this course is focused on building applications with webRTC, understanding the underlying technology can be beneficial for ensuring the quality of applications that use real-time communication. Knowing how webRTC works can help create more effective test cases. The course is more focused on the core skills associated with webRTC development.

See salaries and explore the career path for Quality Assurance Engineer

Technical Writer

A Technical Writer creates documentation for software and hardware products. While this course is focused on development, understanding the technical aspects of webRTC can provide valuable insights for creating accurate and informative documentation. The course is more focused on the core skills associated with webRTC development and implementation, but it can provide a Technical Writer with a solid foundation.

See salaries and explore the career path for Technical Writer

Project Manager

A Project Manager plans, executes, and closes projects, ensuring they are completed on time and within budget. While this course is focused on development, an understanding of webRTC and real-time communication technologies can be valuable for managing projects that involve these technologies. The course is more focused on the core skills associated with webRTC development.

See salaries and explore the career path for Project Manager

Business Analyst

A Business Analyst analyzes business needs and translates them into technical requirements. While this course is focused on technical implementation, understanding the capabilities and limitations of webRTC can inform business decisions related to real-time communication solutions. The course is more focused on the core skills associated with webRTC development.

See salaries and explore the career path for Business Analyst

Mastering webRTC - make a video chat app!

What's inside

Learning objectives

Syllabus

Traffic lights

Save this course

Reviews summary

Deep dive into webrtc development

Activities

Career center

Reading list

Share

Similar courses