🎥 Meet Clone - WebRTC Video Conferencing App

A full-featured video conferencing application built with React, Node.js, Socket.IO, and WebRTC. Inspired by Google Meet, this project provides real-time video calls, screen sharing, chat, and meeting management.

🧪 Try It Out - Demo Accounts

Want to test the application? Use these pre-configured demo accounts:

Guest Account 1:

• Email: [email protected]
• Password: Password@123

Guest Account 2:

• Email: [email protected]
• Password: Password@123

✨ Features

🎯 Core Features

• Real-time Video Conferencing - P2P mesh WebRTC connections
• Audio/Video Controls - Mute/unmute, camera on/off
• Screen Sharing - Share your entire screen with participants
• Live Chat - In-meeting text messaging
• Participants Panel - See who's in the meeting
• Room Management - Create, join, and manage meeting rooms

🛡️ Security & Auth

• JWT Authentication - Secure user sessions
• Email Verification - Account verification system
• Password Reset - Secure password recovery
• Protected Routes - Authentication-based access control

📱 User Experience

• Responsive Design - Works on desktop, tablet, and mobile
• Google Meet UI - Familiar and intuitive interface
• Meeting History - View and manage your past meetings
• Room Validation - Verify room existence before joining
• Error Handling - Graceful error states and recovery

⚡ Performance

• Socket-based Signaling - Fast WebRTC negotiation
• Room Grace Period - Automatic cleanup of empty rooms
• Optimized Layouts - Adaptive video grid for different participant counts
• Memory Management - Efficient resource cleanup

🏗️ Architecture

Frontend (React)

📁 client/
├── 📁 src/
│   ├── 📁 components/     # Reusable UI components
│   │   ├── 📁 room/       # Video conferencing components
│   │   └── 📁 ui/         # shadcn/ui components
│   ├── 📁 pages/          # Route components
│   ├── 📁 hooks/          # Custom React hooks
│   ├── 📁 context/        # React Context providers
│   ├── 📁 api/            # API service functions
│   └── 📁 services/       # Socket.IO client

Backend (Node.js)

📁 server/
├── 📁 src/
│   ├── 📁 controllers/    # Route handlers
│   ├── 📁 models/         # MongoDB schemas
│   ├── 📁 routes/         # Express routes
│   ├── 📁 sockets/        # Socket.IO server logic
│   ├── 📁 middlewares/    # Express middlewares
│   ├── 📁 services/       # External services (email, cloud)
│   └── 📁 utils/          # Helper functions

Tech Stack

• Frontend: React 19, Vite, TailwindCSS, shadcn/ui, React Router
• Backend: Node.js, Express.js, Socket.IO, MongoDB, Mongoose
• WebRTC: RTCPeerConnection, getUserMedia, getDisplayMedia
• Authentication: JWT, bcrypt, nodemailer
• Cloud: Cloudinary (file uploads)
• Validation: Zod schemas

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• MongoDB 5.0+
• Modern browser with WebRTC support

1. Clone Repository

git clone <repository-url>
cd vido-conferencing

2. Install Dependencies

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

3. Environment Setup

Server Environment (.env)

# Database
MONGODB_URI=mongodb://localhost:27017/video-conferencing

# JWT
JWT_SECRET=your-super-secret-jwt-key-here
JWT_EXPIRES_IN=7d

# CORS
ALLOWED_ORIGINS=http://localhost:5173

# Email Service (nodemailer)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=[email protected]
EMAIL_PASS=your-app-password

# Cloudinary (optional - for file uploads)
CLOUDINARY_CLOUD_NAME=your-cloudinary-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

# Server
PORT=5000
NODE_ENV=development

Client Environment (.env)

VITE_API_BASE_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

4. Run Development Servers

# Terminal 1 - Start backend server
cd server
npm run dev

# Terminal 2 - Start frontend dev server
cd client
npm run dev

5. Access Application

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000/api
• Socket.IO: http://localhost:5000

📋 Usage Guide

Creating a Meeting

1. Sign up/Sign in to your account
2. Click "New Meeting" button
3. Share the generated room ID with participants
4. Participants join using the room ID

Joining a Meeting

1. Navigate to /room/{roomId} or use join form
2. Allow camera/microphone permissions
3. Wait for other participants to connect

Meeting Controls

• 🎤 Microphone: Toggle audio on/off
• 📹 Camera: Toggle video on/off
• 🖥️ Screen Share: Share your screen
• 💬 Chat: Send text messages
• 👥 Participants: View attendee list
• 📞 Leave: Exit the meeting

Meeting Management

• My Meetings: View meeting history at /my-meetings
• Active Status: See which meetings are currently active
• Participant Count: View live participant counts
• Room Cleanup: Inactive rooms auto-delete after 5 minutes

Connection Flow & Socket Events

WebRTC Flow

sequenceDiagram
    participant A as User A
    participant S as Socket Server
    participant B as User B
    
    A->>S: join-room
    S->>A: existing-participants
    S->>B: user-joined
    A->>S: offer
    S->>B: offer
    B->>S: answer
    S->>A: answer
    A<->B: ICE candidates via server
    A<->B: Direct P2P connection established

Loading

Socket Events

• join-room - Join a meeting room
• verify-room - Validate room existence
• offer/answer - WebRTC negotiation
• ice-candidate - ICE candidate exchange
• toggle-audio/video - Media state changes
• start/stop-screen-share - Screen sharing
• send-message - Chat messages