🎥 P2P Video Call

P2P Video Call is a lightweight browser-based peer-to-peer video calling application built with HTML, CSS, JavaScript, WebRTC, and PeerJS.

The project allows two users to connect directly using unique Peer IDs and supports real-time video calling, audio communication, and instant messaging without requiring a traditional backend server.

🎮 Live Demo

🔗 Try P2P Video Call

📑 Table of Contents

Features
Technologies
Project Structure
How It Works
Installation
Browser Support
Future Improvements
Contributing
License
Author

✨ Features

📹 Video & Audio

✅ Peer-to-Peer Video Calling — Direct connection between two users
✅ Audio Communication — Real-time voice transmission
✅ HD Video Streaming — High-quality video feed
✅ Camera & Microphone Support — Full media device access

💬 Chat & Communication

✅ Real-Time Chat — Instant messaging during calls
✅ Message History — Chat history within the session
✅ Enter Key Support — Quick message sending

🔌 Connection & UX

✅ Unique Peer ID Generation — Each user gets a unique identifier
✅ Manual Peer Connection — Connect using any Peer ID
✅ Connection Status — Visual feedback for connection state
✅ Disconnect Functionality — Cleanly end calls
✅ Responsive Design — Works on desktop and mobile
✅ Modern UI — Gradient design with smooth animations

🔒 Privacy & Security

✅ No Server Storage — All data stays between peers
✅ No Account Required — Anonymous connection
✅ Direct P2P — No intermediate server for media
✅ Browser-Based — No installation needed

🚀 Quick Start

# Clone the repository
git clone https://github.com/dhruvpandit46/Video-Call.git

# Navigate to the project
cd Video-Call

# Open in your browser
open index.html

That's it! No installation, no build step, no server required.

⚙️ Technologies Used

Core Technologies

Technology	Purpose
HTML5	Semantic structure with media capture APIs
CSS3	Gradient design, responsive layout, animations
JavaScript (ES6)	Complete application logic with event handling

Web APIs & Libraries

Technology	Purpose
WebRTC	Peer-to-peer media streaming
PeerJS	Simplifies WebRTC implementation
MediaDevices API	Camera and microphone access (`getUserMedia`)
STUN Servers	NAT traversal for P2P connections

External Dependencies

<!-- PeerJS for WebRTC abstraction -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.4.7/peerjs.min.js"></script>

📂 Project Structure

Video-Call/
│
├── index.html          # Complete P2P Video Call application
└── README.md           # Project documentation

The entire application is contained in a single HTML file with embedded CSS and JavaScript.

⚡ How It Works

Connection Flow

┌─────────────────────────────────────────────────────────────┐
│                    Video Call Connection Flow               │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  User A                    User B                           │
│    │                         │                              │
│    ▼                         │                              │
│  Get Peer ID ──────────────► │                              │
│    │                         ▼                              │
│    │                   Get Peer ID                          │
│    │                         │                              │
│    │                         ▼                              │
│    │              Enter Peer ID (A)                         │
│    │                         │                              │
│    ▼                         │                              │
│  Enter Peer ID (B)           │                              │
│    │                         │                              │
│    ├─────── Connect ────────►│                              │
│    │                         │                              │
│    ▼                         ▼                              │
│  Start Video Call     Accept Call                           │
│    │                         │                              │
│    ├─── Stream Audio/Video ─►│                              │
│    │                         │                              │
│    ├─── Chat Messages ──────►│                              │
│    │                         │                              │
│    ▼                         ▼                              │
│  Call Active            Call Active                         │
└─────────────────────────────────────────────────────────────┘

Step-by-Step Guide

Open the Application — Load index.html in your browser
Get Your ID — Your unique Peer ID is automatically generated and displayed
Share Your ID — Send your Peer ID to the person you want to call
Enter Their ID — Paste the other user's Peer ID in the input field
Grant Permissions — Allow camera and microphone access when prompted
Connect — Click "Connect Karo" to establish the connection
Start Chatting — Video, audio, and text chat will begin automatically

During a Call

Feature	How to Use
Video	Automatically streams both ways
Audio	Automatically streams both ways
Chat	Type message in chat box and click "Bhejo" or press Enter
Disconnect	Click "Disconnect Karo" to end the call

📱 UI Components

Component	Description
Header	App title with user's Peer ID display
Connection Section	Input field for remote ID, Connect button, Random button
Status Display	Shows connection state (waiting, connected, error)
Video Section	Two video containers (Local and Remote)
Video Labels	"Aap" (You) and "Stranger" labels on video feeds
Chat Section	Chat box with message history and input field
Disconnect Button	Cleanly ends the call

🎨 Visual Design

Theme

🌈 Gradient Background — Purple-blue gradient (#667eea to #764ba2)
📱 Glassmorphism — Frosted glass effects on ID display
✨ Smooth Animations — Button hover and transition effects
🎯 Clean Layout — Card-based design with rounded corners
📱 Mobile-First — Fully responsive for all screen sizes

Color Palette

--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
--status-waiting: #fff3cd (#856404)
--status-connected: #d4edda (#155724)
--status-error: #f8d7da (#721c24)

🌐 Browser Support

✅ Fully Supported

Google Chrome (Desktop & Mobile)
Microsoft Edge
Brave
Opera

⚠️ Limited Support

Firefox (WebRTC may have compatibility issues)

❌ Not Recommended

Safari (WebRTC compatibility may vary)

Note: For the best experience, use Chrome or Edge.

📈 Feature Matrix

Feature	Status
Video Calling	✅ Complete
Audio Streaming	✅ Complete
Text Chat	✅ Complete
Peer ID Generation	✅ Complete
Manual Connection	✅ Complete
Disconnect	✅ Complete
Status Indicators	✅ Complete
Camera Access	✅ Complete
Microphone Access	✅ Complete
Responsive Design	✅ Complete
Mobile Support	✅ Complete

🚧 Future Improvements

Planned Enhancements

🔄 Random Stranger Matching — Connect with random users
📺 Screen Sharing — Share your screen during calls
👥 Group Video Calls — Multi-user conference calls
🎵 Voice Only Mode — Audio-only calls
😊 Emoji Support — Rich chat experience
📁 File Sharing — Share files during calls

Long-term Goals

🔐 End-to-End Encryption — Enhanced privacy
📊 Call Timer — Track call duration
📝 Chat History — Persistent message history
👤 User Profiles — Custom display names
🌐 Firebase Signaling — Improved connection reliability
🟢 Online User List — See who's available

🤝 Contributing

Contributions, issues, and feature requests are welcome!

How to Contribute

Fork the repository

git fork https://github.com/dhruvpandit46/Video-Call.git

Create a feature branch

git checkout -b feature/your-feature

Make your changes and test thoroughly
Commit your changes

git commit -m "Add your feature"

Push to your branch

git push origin feature/your-feature

Open a Pull Request

📜 License

This project is licensed under the MIT License.

See the LICENSE file for full license details.

👨‍💻 Author

Dhruv Pandit

GitHub: @dhruvpandit46
LinkedIn: Dhruv Pandit
Instagram: @dhruv_pandit2007

🌌 Related Projects

Repository	Description
🎥 VideoCall Pro	Enhanced P2P Video Calling App
🤖 Anique AI	Rule-Based AI Chatbot
🎤 Anique AI Voice	Text-to-Speech API
🏠 Home Automation V2	ESP32 Browser Firmware Installer
📚 DDCET	AI-Powered Engineering Preparation Platform

⭐ Support

If you found P2P Video Call useful, please consider giving it a ⭐ on GitHub!

It helps others discover the project and supports future development.

Connect with anyone, anywhere - instantly! 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
LICENSE		LICENSE
README.md		README.md
index.html		index.html

Folders and files

Latest commit

History

Repository files navigation