Build a Google Meet Clone from Scratch: WebRTC & Socket io

Navigate this course by following a step-by-step structure that guides you from setting up your project to deploying a live Google Meet clone, with in-depth WebRTC and socket.io coverage.

Create a solid project setup and folder structure for this section. Design the landing page using HTML and CSS, then implement landing page functionality with JavaScript.

Apply JavaScript to add landing page functionality, redirecting to a home or web conferencing page, capture meeting codes, and generate eight-digit new meeting IDs for navigation.

Design the home page for a Google Meet clone, outlining a two-part layout with top remote video and bottom controls, plus a left info panel and reusable remote-user templates.

learn to set up a conferencing page with JavaScript, extract meeting and user IDs from the URL, load scripts, and initialize a signaling workflow for users in a room.

Set up a client-side socket connection with socket.io, declare a global socket for access across functions, and enable signaling between client and server for the WebRTC flow.

Store user information and broadcast it to others in a room using socket.io and an express server, enabling a group calling system.

Clone user templates to build a dynamic multi-user room, attach per-user video and audio interfaces, and wire WebRTC connection setup through a process function returning a set new connection.

Complete the ontrack function to manage video and audio tracks, set remote streams, and update the remote video player by connection id during the connection setup described.

Explain how the updateMediaSenders function manages rtpsenders and tracks across peer connections, checking states (new, connecting, connected) and adding or replacing video tracks.