WebRTC - Create Zoom Clone Video Group Call Application

Install node.js from nodejs.org, verify node and npm versions, and set up a simple backend to power a zoom-like video group call app, before building a React frontend.

Set up a WebRTC server by creating a server folder, initializing npm, and installing express, socket.io, twilio, and uuid, then prepare a React frontend to enable signaling for video calls.

Set up a basic WebRTC server using express and socket.io to manage signaling, rooms, and connections with UUID v4 IDs for a zoom-like video group call.

Define and wire a Redux store by creating actions and a reducer, initialize identity state, handle actions with a switch, and export the reducer into store.js.

Set up the React project, install dependencies, remove app.css, and create introduction and room pages with basic components. Prepare routing to test navigation between pages.

Add routing to a React app using react-router-dom, create join room and room pages, and configure routes in App.js to render components based on the URL.

Create an introduction page for a WebRTC group call app, wiring a logo and containers, import CSS, and set up the panel to present join and future create room actions.

Build reusable connecting button components for join and host actions, wire navigation with react router dom and history, and integrate into the introduction page.

Create a join room page for a Zoom clone app by reading host parameters from the URL with React Router DOM, using useLocation and useEffect, and updating the Redux store.

Create the first Redux action to mark a user as the room host, dispatch to update the store, and connect via map state to props and Redux DevTools.

Display a dynamic title in the join room page by using a title component that reads the is room host prop and shows host meeting or join meeting.

Render join room inputs for room ID and user name, using useState and props from the store, with a reusable input component on the join room page.

Create an only with audio checkbox component in the join room page to allow users to join a room without a camera, wiring state changes and importing the check image.

Define a Redux property connect only with audio, create actions and reducer handling, and map state to props to toggle the audio-only connection in the join room UI.

Create a join room buttons component for the WebRTC zoom clone, enabling host or join actions with a custom button and navigating to the introduction page.

Learn to verify room existence on the server by sending an http get request with axios, and handle responses with a dedicated get room exists route in the backend.

Handle server responses to check if a room exists in a WebRTC zoom-clone app, returning room exists and full status with appropriate client messages.

Learn to separate joining and creating rooms in a WebRTC zoom clone, manage host and user flows, navigate to rooms with React Router history, and save meeting ID in redux.

Test HTTP requests to validate meeting existence, handle join and host flows with async/await, and verify server responses while saving user identity for future steps.

This lecture explains saving identity and the meeting room id in the Redux store before joining a room, by creating set identity and set room id actions and dispatching them.

Create a room label component for the WebRTC zoom-clone app, passing the room id and displaying it at the top of the room page. Align chat, participants, and video sections.

Connect the room page to the Redux store to pass the correct room ID to the room label, and display the meeting ID saved from the server.

Create a participants label and a participants list for the room, using dummy data now and preparing to fetch real connected users in the zoom clone video call app.

Create a video buttons structure for a WebRTC zoom clone by building a video buttons component with mic, camera, leave room, and screen sharing buttons in the video section.

Create a mic button for the WebRTC zoom clone app by importing mic icons, storing isMicMuted (initially false), and toggling icons with on click while rendering inside a button container.

Create a camera button in the WebRTC zoom-clone app by implementing handle camera button pressed function that uses useState to toggle local video and swap camera button images from resources/images.

Create a leave room button that refreshes the page and redirects to introduction page using window.location.origin, with a click listener for the disconnection handler and a forthcoming screen sharing button.

Create a screen sharing button for a WebRTC zoom-clone app by importing the switch icon, using useState to track sharing state, and toggling it on click.

Prepare the room connection by obtaining the media stream with getUserMedia, show the local video preview, and enable hosting or joining a room for a zoom clone video group call.

Wire get local preview and init room connection in a use effect, using redux room id and host identity to start the local stream and prepare the socket.io room.

Implement a loading overlay with a center spinner while awaiting access to the local media stream, using a store flag show overlay that toggles via actions and a reducer.

Connect a socket.io client to a local server at localhost:5002 by importing io, defining connectWithSocketIOServer, and logging the successful connection and socket ID to enable hosting a room.

Connect to a socket.io server from the client side by wiring a one-time useEffect hook in App.js to call connectWithSocketIoServer from utils/ws, ensuring a live socket ID for each user.

Learn to emit events to the server to create or join a room in a WebRTC app, sending identity and room data via socket.io and handling server events.

Restart the server and test hosting a meeting on localhost:3001, enter a name to create a new room, validate the local stream, and confirm the server receives the host identity.

Create a server-side room handler to generate a unique room ID, store the user in connected users and the room in rooms, and emit updates via socket.io.

host creates room on the server, server emits a room id, client listens and updates the store, and the label shows the room id for others to join.

Emits room updates and shows real connected users in the participants list for a WebRTC zoom-clone room, wiring client listeners, actions, and reducers to sync server data.

Testing joining the same room with the same meeting ID using localhost 3000, hosting and joining as multiple users, verifying real-time room visibility and planning socket.io room cleanup on disconnect.

Implement room lifecycle in server.js by closing a room when its connected users drop to zero, emitting room update events and filtering out empty rooms.

Emit signaling data when a new user joins to prompt existing room members to prepare for the WebRTC connection, sharing the new socket ID via Socket.IO.

Emit signaling data from the peer connection to other users via con signal, exchanging SDP information and ICE candidates, with server and client signaling handlers.

After a user joins, prepare the WebRTC peer connection and signaling data, then emit con init with the joined user's socket ID to initialize the incoming connection.

Display the local video preview by creating a video element with the local stream, setting autoplay and muted, and attaching it to the videos portal in the app.

Display incoming streams by creating video containers with unique ids from socket ids, attaching remote streams to video elements, and handling dynamic room changes to show or remove participants.

Test the WebRTC connection by restarting the server, hosting a meeting, sharing the meeting ID, and joining with multiple users to confirm peer connections and video feed.

Adjust video constraints for performance in a WebRTC zoom-clone app by using a 480x360 getUserMedia setting for in-room testing and enabling full-screen previews.

Enable a click-to-zoom full-screen toggle on video elements by adding or removing the full screen class for incoming streams in a WebRTC room, demonstrated with two users.

Implement leaving room functionality by removing the disconnected user's video element and peer connection, updating the room state, and notifying remaining users in real time.

Implement a toggle mic function in the web rtc handler to mute and unmute the local audio track from navigator.getUserMedia, updating the UI state.

Implement a disable video feature in the WebRTC handler by toggling the local video track and camera button, coordinating with mic controls and the local stream.

Learn to implement screen sharing in a WebRTC app by wiring a screen sharing button, using get display media, switching the video track, and rendering a local preview.

Fixes a bug that prevented turning off screen sharing by correcting the toggle logic and using getTracks on the screen sharing stream for WebRTC peer connections.

Toggle screen sharing to switch the video track between the local camera and the screen sharing stream. Apply replaceTrack across all active peer connections in the WebRTC handler.

Create the chat UI for a WebRTC-based zoom clone by building a chat label, message container, and input in a React chat section, wired to data channels for exchanging messages.

Build a messages container and a message component to render chat messages, align by sender, hide repeated names, and prepare integration with a Redux store for future real-time WebRTC chats.

Create the new message input component for the chat section, implementing use state for typing, text change handling, enter to send, and a send button to dispatch messages.

Master real-time chat in a WebRTC zoom-clone by creating data channels, parsing and sending JSON messages, and appending them to the chat store across peers.

Implement an only audio label in a WebRTC Zoom clone app by passing the only audio flag through room join/create handlers, updating Redux state, and displaying the label above video.

Restart the server to fix the audio-only label, then render audio-only participants with their identities in video boxes, ensuring the host can see who joins with audio.

Guard the room page with a conditional use effect to prevent server crashes when there is no host or room id, and hide video controls for audio-only connections.

Fetch Twilio turn server credentials on the server via api/get-turn-credentials and securely store account id and token in dot env to support WebRTC peer connections.

Fetch turn server credentials from the server and integrate them into the WebRTC peer connection, enabling turn servers with a stun fallback for reliable zoom-like video group calls.