VideoPeersJS - Real Time P2P Video Chat Application

Description

This is a modern, secure real-time video chat application built using WebRTC, Socket.io, Node.js, Express.js, and Next.js. VideoPeersJS allows users to create rooms and share room IDs with other users for peer-to-peer video calls with enhanced security and a beautiful, responsive design.

🚀 Latest Updates (2025)

• Enhanced Security: Implemented comprehensive security measures including Helmet.js, rate limiting, input validation, and CORS protection
• Modern UI/UX: Complete redesign with beautiful gradients, animations, and responsive design using Tailwind CSS
• Updated Dependencies: All packages updated to latest stable versions for security and performance
• Improved User Experience: Better loading states, error handling, and user feedback
• Enhanced Architecture: Better code organization and error handling
• Environment Configuration: ICE servers and configuration moved to environment variables
• Enhanced Typography: Added multiple Google Fonts for better visual hierarchy
• Local Fonts: Migrated to self-hosted fonts for better performance, privacy, and reliability (156KB total)

Deployment Link : https://video-peers.vercel.app/

Screen Shots :

How To Use :

1. Enter your email and a room ID on the homepage
2. Share the room ID with someone you want to video chat with
3. Once both users are in the room, click the "Start Call" button
4. Use the control buttons to mute/unmute audio, turn camera on/off, or end the call

🔒 Security Features

• Rate Limiting: Prevents abuse with request limits
• Input Validation: All user inputs are validated and sanitized
• CORS Protection: Configured for secure cross-origin requests
• Helmet.js: Adds security headers to protect against common attacks
• Error Handling: Comprehensive error handling and logging
• Connection Timeouts: Prevents hanging connections

Key Features

• Create and join video chat rooms using room IDs
• Real-time peer-to-peer video calling using WebRTC
• Audio mute/unmute controls with visual indicators
• Video on/off controls
• Call end functionality
• Modern, responsive design with animations
• Enhanced typography with local fonts for better performance
• Self-hosted fonts (no external dependencies)
• Environment-based configuration for ICE servers
• Input validation and sanitization
• Connection status indicators
• Beautiful gradients and glass-morphism effects
• Accessible design with proper ARIA labels

Installation

1. Clone the repository

git clone https://github.com/hirentimbadiya/VideoPeersJS.git
cd VideoPeersJS

2. Install dependencies for Client Side

cd client
npm install

3. Install dependencies for Server Side

cd server
npm install

4. Configure environment variables

# In server directory, copy .env.example to .env
cp .env.example .env

# Edit .env with your preferred settings:
# PORT=8000
# CLIENT_URL=http://localhost:3000
# NODE_ENV=development

5. Run the application

• Run the server side first:

  cd server
  npm run dev
  

• Run the client side:

  cd client
  npm run dev
  

6. Open your browser and navigate to http://localhost:3000

🛠 Technologies Used

Frontend

• Next.js 14 - React framework with latest features
• React 18 - UI library
• Tailwind CSS 3 - Utility-first CSS framework
• Framer Motion - Animation library
• Lucide React - Beautiful, customizable icons
• WebRTC - Real-time communication

Backend

• Node.js - Backend runtime
• Express.js - Web framework
• Socket.io - Real-time bidirectional communication
• Helmet.js - Security middleware
• Joi - Input validation
• Express Rate Limit - Rate limiting
• Validator.js - String validation

🔧 Development

Project Structure

VideoPeersJS/
├── client/                 # Next.js frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/         # Next.js pages
│   │   ├── context/       # React context providers
│   │   ├── service/       # WebRTC service
│   │   └── styles/        # Global styles
│   ├── .env.example       # Environment variables template
│   └── package.json
├── server/                 # Node.js backend
│   ├── index.js           # Main server file
│   ├── .env.example       # Environment variables template
│   └── package.json
└── README.md

API Endpoints

REST Endpoints

• GET / - Health check and server info
• GET /health - Health status endpoint

Socket Events

• room:join - Join a video chat room
• user:call - Initiate a call to another user
• call:accepted - Accept an incoming call
• peer:nego:needed - WebRTC negotiation
• peer:nego:done - Complete WebRTC negotiation
• call:end - End the current call
• error - Error handling

Working Demo

https://github.com/hirentimbadiya/Video-Peers/assets/86219935/7ce8caf9-0881-4abe-b633-79d3bb0a87ef

🚀 Future Scope

• Text chat support in rooms
• Screen sharing feature
• Multiple participants in a room (group calls)
• Video recording and playback
• Virtual backgrounds
• File sharing capabilities
• Mobile app development
• Integration with calendar systems

📚 My Learnings

Building this project taught me about:

• WebRTC: Understanding peer-to-peer communication, ICE candidates, and media streams
• Socket.io: Real-time bidirectional communication patterns
• Security: Implementing comprehensive security measures for web applications
• Modern React: Using hooks, context, and latest React patterns
• UI/UX Design: Creating beautiful, accessible interfaces with Tailwind CSS
• Next.js: Server-side rendering, file-based routing, and optimization
• Node.js Security: Rate limiting, input validation, and security headers

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

MIT

👨‍💻 Author

• hirentimbadiya
• Email: hirentimbadiya74@gmail.com

---

⭐ Star this repo if you find it helpful!