vChat - Real-time Video Conferencing

Connect instantly with high-quality video, seamless interaction, and modern design.

vChat is a modern, browser-based video conferencing platform that lets you create rooms significantly faster and easier. It leverages Mediasoup (SFU) for scalable, low-latency video streaming and Socket.io for real-time messaging, all wrapped in a sleek Glassmorphism UI.

---

📖 Table of Contents

• What Does It Do?
• Key Features
• Tech Stack
• How It Works Under the Hood
• Project Structure
• Getting Started
• Environment Variables
• License

---

🎯 What Does It Do?

vChat simplifies online communication by providing:

1. Instant Room Creation: No sign-ups or complex scheduling. Just generate a room ID and share.
2. Robust Video Calls: Multi-user video conferencing powered by a Selective Forwarding Unit (SFU) for performance.
3. Real-time Interaction: Integrated chat and live state updates (mute/videooff) for all participants.

Everything runs directly in your browser with a custom Node.js server handling the heavy lifting of media routing.

---

✨ Key Features

🎥 Multi-User Video Conferencing

• Grid Layout: Automatically adjusts to the number of participants.
• Low Latency: Uses Mediasoup to route video streams efficiently, reducing bandwidth usage compared to traditional mesh networks.
• Smart Indicators: Visual cues for when a user is speaking, muted, or has their camera off.

💬 In-Room Chat

• Real-time Messaging: Send and receive messages instantly without interrupting the video flow.
• Visual Feedback: Distinct styles for sent vs. received messages (Right/Left alignment).
• Time-stamped: Keep track of conversation flow with precise timestamps.

🎛️ Media Controls

• Toggle Audio/Video: Easily mute your microphone or turn off your camera.
• State Synchronization: Your media state (muted/video off) is instantly reflected to all other peers in the room.
• Device Management: Automatically detects and uses your default media devices.

🎨 Modern UI/UX

• Glassmorphism: A premium, dark-themed aesthetic with blur effects.
• Responsive Design: Works seamlessly across different screen sizes.
• ** Animations**: Smooth transitions for joining, leaving, and chat messages using Tailwind CSS.

---

🛠 Tech Stack

Layer	Technology	Purpose
Frontend Framework	Next.js 15 (App Router)	React framework for structure and routing
Styling	Tailwind CSS	Utility-first CSS for rapid, varied UI design
Icons	Lucide React	Clean, consistent SVG icons
Real-time Engine	Socket.io	Signaling server for room events and chat
Media Server	Mediasoup	SFU (Selective Forwarding Unit) for WebRTC media routing
Server Runtime	Node.js	Custom server implementation

---

⚙ How It Works Under the Hood

1. Connection Flow

User Joins Room
      ↓
Socket.io: Emits 'join-room' signal
      ↓
Server: Creates Mediasoup Router & Transports
      ↓
Client: Initializes Device & Connects Transport
      ↓
Signaling: Exchange DTLS parameters

2. Media Pipeline (SFU)

User A Produces Video
      ↓
Mediasoup Producer (Server) receives stream
      ↓
Mediasoup Consumers (Server) created for User B, C, D...
      ↓
User B, C, D receive stream via Consumer Transport

This architecture allows vChat to scale better than Peer-to-Peer (Mesh) networks.

---

📂 Project Structure

vChat/
├── server.js               # Custom Node.js server (Entry Point)
├── src/
│   ├── app/                # Next.js App Router
│   │   ├── page.tsx        # Home Page
│   │   ├── layout.tsx      # Root Layout
│   │   ├── room/[id]/      # Room Component
│   │   └── providers/      # Context Providers (Socket, Mediasoup)
│   └── components/         # UI Components (VideoPlayer, ChatPanel)
├── public/                 # Static Assets (Images)
└── .env                    # Environment Configuration

---

🚀 Getting Started

Prerequisites

• Node.js: v18 or higher (v20+ recommended)
• NPM or Yarn

1. Clone the Repository

git clone https://github.com/rj9884/vChat.git
cd vChat

2. Install Dependencies

npm install

Note: This will also compile Mediasoup worker binaries.

3. Environment Variables

Create a .env file in the root directory:

PORT=3000
RTC_MIN_PORT=2000
RTC_MAX_PORT=3000
ANNOUNCED_IP=127.0.0.1  # Change to your public IP for remote access
HOSTNAME=localhost

4. Start the Application

npm run dev

Important: This command runs node server.js to initialize the custom server. Do NOT run next dev directly.

The app will be running at http://localhost:3000.

---

📜 License

This project is licensed under the MIT License.