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

Access the course source code to practice, compare your written code with the provided version, learn how to upload it to the lib server, and start coding in section three.

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.

Create the root folder structure with public, assets, and image and JavaScript subfolders, then copy source assets. Install node.js, initialize npm, and install two dependencies, preparing server.js.

Design a responsive landing page for a Google Meet clone, building the navbar, logo, and a custom stylesheet. Add call-to-action buttons to start or join meetings.

Design a Google Meet clone landing page with a white jumbotron, an image, an input to join, and actions to start or join a meeting using Bootstrap and Material Icons.

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.

Design the home page layout for a Google Meet clone, featuring a top area with 75/25 split, three video panels, participant and chat sections, and bottom controls with material icons.

Apply css to the home page to style backgrounds, layout, and interactive elements, including absolute positioning, borders, hover effects, rotated icons, and material icons, paving the way for javascript integration.

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.

Explore how to initiate WebRTC connections by sending offers, handling negotiation and ICE candidates, and wiring peer connections with socket.io for a Google Meet clone.

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.

Implement the sdp process function to handle offers, answers, and candidate exchanges, and update the peer connection with local and remote descriptions to establish the WebRTC link.

Emit a custom event to inform me about other users when they join, sending data for each participant and updating the interface by adding each user.

Learn to implement local audio and video streams in a Google Meet clone using WebRTC and socket.io, including muting, video on/off, and screen sharing with state management.

Master the video process in a Google Meet clone by switching between camera input and display media, configuring video properties (1920x1080), and syncing streams with the local video element.

Test and debug a Google Meet clone by starting the server, creating meetings, and ensuring local and remote video streams render with track updates.

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

Remove video stream and process audio in a Google Meet clone built with WebRTC. Learn to mute audio, toggle video, and fix video streaming between users.

Create a screen sharing system using display media to capture and broadcast your screen, window, or browser tab with start, stop, and source-switch controls.

Implement a disconnect handling system for a Google Meet clone, closing the user's socket, updating the meeting's participant list, informing others, and stopping audio and video streams.

Design a responsive meeting interface with a header, participant details, and a chat panel, including a chat input and send button, using html and css layouts and icons.

Develop a meeting messaging system by writing JavaScript to capture input, send messages on click, and broadcast them via socket.io to render real-time chat messages.

Develop a messaging system inside a WebRTC and socket.io based Google Meet clone. The lecture covers signaling events and chat updates across meetings.

Create a participant details panel with a toggleable chat area in a Google Meet clone. Update real-time participant count using user connections and WebRTC with socket io.

Update the participant list and counts in real time for a Google Meet clone built with WebRTC and socket.io, including participant details and disconnect handling.

Develop leave meeting functionality by building a live meeting dialog, toggling the top box display, and closing the dialog on outside clicks or cancel actions.

Create a meeting details panel for a Google Meet clone with a details area and an attachment section, enabling file sharing and a copy joining link feature using material icons.

Implement a double-click full-screen feature for a video by handling the double-click event and invoking the requestFullscreen method on the video element, enabling and exiting fullscreen for clear viewing.

Implement a two-tab interface to switch meeting details and attachments, including a file upload form with a custom input. Enhance interactivity with padding, min-height, slide up/down, and outside-click hide behaviors.