ApnaVideo - Real-time Video Conferencing Platform

Connect with anyone, anywhere, anytime

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Architecture
• API Routes
• WebSocket Events
• Installation & Setup
• Usage
• Environment Variables
• Contributors
• License

Overview

ApnaVideo is a modern video conferencing solution built on the MERN (MongoDB, Express, React, Node.js) stack with real-time capabilities powered by Socket.io and WebRTC. The platform enables high-quality peer-to-peer video and audio communication, real-time messaging, and meeting history tracking, all within an intuitive and responsive interface.

Features

• Peer-to-Peer Video & Audio: Direct WebRTC connections for high-quality, low-latency communication
• Screen Sharing: Share your screen during meetings
• Live Chat Messaging: Exchange text messages in real-time during meetings
• Secure Authentication: Traditional username/password and Google OAuth integration
• Meeting History: Track and easily rejoin past meetings
• Meeting Rooms: Create or join meetings with unique meeting codes
• Custom User Identifiers: Display names for easy participant recognition
• Device Control: Toggle camera and microphone during calls
• Responsive Design: Optimized for both desktop and mobile devices
• Room Persistence: Meeting data maintained until all participants leave

Tech Stack

Backend

Frontend

Visual Overview

Node.js Runtime powering the backend	Express Minimal, fast API framework	MongoDB Document DB for users & meetings	Socket.io Real-time signaling & chat	JWT Token-based auth & sessions	bcrypt Secure password hashing
React Dynamic UI components	Vite Fast dev server & bundler	WebRTC Peer-to-peer media streams	Firebase Auth Google OAuth login	TailwindCSS Utility-first styling	MUI UI components & theming
Axios HTTP client for APIs	Sonner Toast notifications	React Router Client-side navigation	Radix UI Accessible primitives	Socket.io Client Real-time events in UI	Context API Global state management

Architecture

The application follows a modern client-server architecture with WebRTC peer-to-peer connections:

              ┌───────────────┐
              │   Frontend    │
              │    (React)    │
              └───────┬───────┘
                      │
                      ▼
┌────────────────────────────────────────────┐
│                 Backend                    │
│                                            │
│  ┌──────────────┐        ┌──────────────┐  │
│  │  Express API │        │  Socket.io   │  │
│  │  Endpoints   │◄──────►│    Server    │  │
│  └──────┬───────┘        └──────┬───────┘  │
│         │                       │          │
│         ▼                       ▼          │
│  ┌─────────────────────────────────────┐   │
│  │              MongoDB                │   │
│  │     (Users & Meeting History)       │   │
│  └─────────────────────────────────────┘   │
└────────────────────────────────────────────┘

Detailed overview

┌─────────────────────────────────────────────────────────────────────┐
│                        CLIENT ARCHITECTURE                          │
│                                                                     │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                      React Components                        │   │
│  │                                                              │   │
│  │  ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │   │
│  │  │  Landing   │ │   Video    │ │   Auth     │ │  History   │ │   │
│  │  │   Page     │ │   Meet     │ │   Pages    │ │   Page     │ │   │
│  │  └────────────┘ └────────────┘ └────────────┘ └────────────┘ │   │
│  └────────────────────────┬─────────────────────────────────────┘   │
│                           │                                         │
│  ┌────────────────────────▼─────────────────────────────────────┐   │
│  │                     Context API                              │   │
│  │                                                              │   │
│  │  ┌────────────────────────┐     ┌────────────────────────┐   │   │
│  │  │     Auth Context       │     │      WebRTC Logic      │   │   │
│  │  │  (User Authentication) │     │ (Media & Connections)  │   │   │
│  │  └────────────────────────┘     └────────────────────────┘   │   │
│  └────────────────────────┬─────────────────────────────────────┘   │
│                           │                                         │
│  ┌────────────────────────▼─────────────────────────────────────┐   │
│  │                   Network Communication                      │   │
│  │                                                              │   │
│  │  ┌────────────────────────┐     ┌────────────────────────┐   │   │
│  │  │        Axios           │     │      Socket.io         │   │   │
│  │  │   (HTTP Requests)      │     │  (Real-time Events)    │   │   │
│  │  └────────────────────────┘     └────────────────────────┘   │   │
│  └──────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────┘

                             │
                             │
                             ▼

┌─────────────────────────────────────────────────────────────────────┐
│                        SERVER ARCHITECTURE                          │
│                                                                     │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                    Express Application                       │   │
│  │                                                              │   │
│  │  ┌────────────────────────┐     ┌────────────────────────┐   │   │
│  │  │     REST API Routes    │     │     Socket.io Server   │   │   │
│  │  │     (Auth & Data)      │     │     (WebRTC Signaling) │   │   │
│  │  └────────────────────────┘     └────────────────────────┘   │   │
│  └────────────────────────┬─────────────────────────────────────┘   │
│                           │                                         │
│  ┌────────────────────────▼─────────────────────────────────────┐   │
│  │                     Controllers                              │   │
│  │                                                              │   │
│  │  ┌────────────────────────┐     ┌────────────────────────┐   │   │
│  │  │    User Controller     │     │    Socket Manager      │   │   │
│  │  │ (Authentication Logic) │     │ (Connection Handling)  │   │   │
│  │  └────────────────────────┘     └────────────────────────┘   │   │
│  └────────────────────────┬─────────────────────────────────────┘   │
│                           │                                         │
│  ┌────────────────────────▼─────────────────────────────────────┐   │
│  │                      Models                                  │   │
│  │                                                              │   │
│  │  ┌────────────────────────┐     ┌────────────────────────┐   │   │
│  │  │      User Model        │     │     Meeting Model      │   │   │
│  │  │  (User Information)    │     │   (Meeting History)    │   │   │
│  │  └────────────────────────┘     └────────────────────────┘   │   │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                     │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                      MongoDB Database                        │   │
│  └──────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────┘

       ┌───────────────────────────────────────────────┐
       │            PEER-TO-PEER CONNECTIONS           │
       │                                               │
       │  Direct WebRTC connections between clients    │
       │  for audio, video, and screen sharing         │
       │  (Server only facilitates initial signaling)  │
       │                                               │
       └───────────────────────────────────────────────┘

Data Flow

1. Authentication:

   • User credentials flow through Axios to Express routes to User Controller
   • JWT tokens are generated and stored in localStorage

2. Video Meeting:

   • Socket.io establishes signaling connection with server
   • WebRTC negotiates peer connections through Socket.io
   • Media streams flow directly between peers via WebRTC
   • Chat messages are relayed through Socket.io

3. Meeting History:

   • Meeting codes are saved to MongoDB when users join meetings
   • History is retrieved and displayed in the History component

API Routes

User Authentication

• POST /api/v1/users/register - Register a new user with name, username, and password
• POST /api/v1/users/login - Authenticate user with username and password
• POST /api/v1/users/google-login - Authenticate user with Google OAuth

Meeting History

• POST /api/v1/users/add_to_activity - Record a meeting in user's history
• GET /api/v1/users/get_all_activity - Retrieve user's meeting history

WebSocket Events

Room Management

• join-call - Join a meeting room with optional username
• user-joined - Notification when a new user joins with their socket ID and username
• leave-call - Leave the current meeting room
• user-left - Notification when a user disconnects

WebRTC Signaling

• signal - Exchange SDP offers, answers, and ICE candidates for WebRTC connection setup
• user-mute - Broadcast when a user mutes/unmutes their microphone
• user-video - Broadcast when a user enables/disables their camera

Chat Messaging

• chat-message - Send or receive a text message in the meeting room
• message-received - Confirmation that a message was delivered

Installation & Setup

Prerequisites

• Node.js (v16+)
• MongoDB Atlas account or local MongoDB instance
• npm or yarn package manager

Backend Setup

# Navigate to backend directory
cd backend

# Install dependencies
npm install

# Create .env file with the following variables:
PORT=8000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key

# Start development server with hot reloading
npm run dev

# For production deployment
npm start

Frontend Setup

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Create .env file with the following variables:
VITE_BACKEND_URL=http://localhost:8000 (development) or your production URL
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id

# Start development server with hot reloading
npm run dev

# Build for production
npm run build

# Preview production build locally
npm run preview

Usage

Creating a Meeting

1. Register or log in to your account
2. Navigate to the home page
3. A unique meeting code is automatically generated
4. Share this code with participants you want to invite

Joining a Meeting

1. Register or log in to your account
2. Navigate to the home page
3. Enter the meeting code in the input field
4. Click "Join" to enter the meeting room

During a Meeting

• Toggle your camera on/off with the camera button
• Mute/unmute your microphone with the mic button
• Share your screen with the screen share button
• Open the chat panel to send and receive messages
• End the call with the hang up button

Viewing Meeting History

1. Log in to your account
2. Navigate to the History page
3. View a list of all your past meetings
4. Click on a meeting code to rejoin that meeting

Environment Variables

Backend (.env)

# Server configuration
PORT=8000

# MongoDB connection
MONGODB_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/<database>

# Authentication
JWT_SECRET=your_jwt_secret_for_token_generation
JWT_EXPIRES_IN=30d

# CORS settings (optional)
CORS_ORIGIN=*

Frontend (.env)

# API endpoint
VITE_BACKEND_URL=http://localhost:8000 # or your production backend URL

# Firebase configuration for Google Auth
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id

# Environment toggle
VITE_IS_PRODUCTION=true # or false for development

Contributors

• Pratham Potdar - Project Lead & Developer

License

This project is licensed under the ISC License.