What you'll learn

Understand the main components of Webrtc
Webrtc Signaling process
Understand the Ice mechanism
Create 2 Real Time Applications with WebRTC and Canvas

Course content

3 sections • 15 lectures • 1h 59m total length

Welcome to the Class! - Course Overview1:37
Setup Nodejs Server with Socket.io10:05
Set up a Node.js server using express and socket.io, configure nodemon for automatic restarts, serve static files from a public folder, and establish client-server socket connections.
deploy to Heroku using Github7:41
Deploy an app to Heroku via GitHub by linking a GitHub repo, configuring automatic deployments, and testing the socket ID for peer connections.

Introduction : What will build and learn0:36
Build real-time video communication between two participants, handling local and remote video streams. Implement features like mute and stop tracks during calls.
MediaStream Interface11:10
Learn how the media stream object acts as a container for video and audio tracks, create streams with media devices and constraints, add tracks, and clone streams.
Display stream on video element3:51
Mute, Unmute and Stop Tracks6:53
Understand the RTCPeerConnection and Signaling process6:47
Explore the RTC connection and signaling process for peer-to-peer communication, including offers and answers, ICE candidates, STUN and TURN servers, and signaling via WebSockets.
Handle Offer11:03
Establish WebRTC peer connection, obtain local media, and create an offer with a local description. Send the offer via a signaling server and set the remote description after receipt.
Handle Answer7:06
Create an answer for a web rtc peer connection by mirroring the offer flow, sending the answer via the server socket, and setting the remote description to start streaming.
Exchange Ice Candidates12:52
Learn how ice candidates are collected and exchanged to enable peer-to-peer communication, using host, reflexive, and relay candidates through a signaling server to connect two peers.

Introduction : What will build and learn0:25
Explore real-time canvas interactions by drawing on the canvas, sending the canvas context and light video through robotic setups, and using the mouse for interactions.
Display Video on Canvas9:31
Stream canvas context with Webrtc8:02
Draw on Canvas21:38
Draw on canvas with live video from a media source, track mouse movements to draw line segments between points, convert to canvas coordinates, and erase with a button.

Requirements

Basic understanding of JavaScript and HTML
PC or MAC

Description

This course is a mixte of theory and practice.

This course is designed for beginners and intermediate Webrtc developers and also all who want to know how to use Webrtc with Canvas.

We will build projects step by step to understand all the basics of Webrtc

You will find easy explanations of questions like, what is a MediaStream? how to get this object? what is an RTCPeerConnection object and what are all step of a signaling process.

Also you will understand what is Ice Candidate, why we need STUN and TURN servers and what is ICE mechanism to collect and select the right network candidates to have a peer to peer communication even through NAT Network

In this course we have 3 sections:

- In First section we will create a nodejs server with Socket io (for signaling process) and will show you how to deploy to Heroku using Github

- In section 2, we create the first project, a realtime video communication using Webrtc

- in section 3 : we build our second projects, is a realtime video communication but using canvas, a User will draw with a mousse on a live video and send the contexte of the canvas using Webrtc instead of sending directly the live video from media source

Who this course is for:

Anyone wanting to learn or build Webrtc applications.

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 19min

Project 1: Realtime Video Communication with Webrtc8 lectures • 1hr

Project 2: Video Communication using Webrtc and Canvas4 lectures • 40min

Requirements

Description

Who this course is for: