193
README.md
193
README.md
@@ -1,9 +1,19 @@
|
||||
# VideoPeers - Real Time P2P Video Chat Application
|
||||
# VideoPeersJS - Real Time P2P Video Chat Application
|
||||
|
||||
## Description
|
||||
|
||||
This is a real time video chat application built using WebRTC, Socket.io, Node.js, Express.js, and Next.js. It allows users to create a room and share the room ID with other users to join the room for a peer-to-peer video call.
|
||||
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/
|
||||
|
||||
@@ -12,92 +22,185 @@ This is a real time video chat application built using WebRTC, Socket.io, Node.j
|
||||
<p><img align="center" src="https://github.com/hirentimbadiya/Video-Peers/assets/86219935/24fa55ab-c08d-40f5-8023-060c06da78f5" alt="hirentimbadiya"/></p>
|
||||
|
||||
## How To Use :
|
||||
First of all join any room lets say 7 for example with your email and room no. as 7 and then notify other person to enter in room no. 7, now you will get call button on screen this will allow to call other person and then call will be initiated and other person will be having a button called Send Streams and as other person clicks Send Streams Button then video call will be initiated.
|
||||
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
|
||||
|
||||
- [x] Create and join video chat rooms using room IDs
|
||||
- [x] Real-time peer-to-peer video calling using WebRTC
|
||||
- [x] Audio mute/unmute controls
|
||||
- [x] Video Hold/Play controls
|
||||
- [x] Call End option
|
||||
- [x] Responsive Design
|
||||
- [x] Built with Next.js, Node.js, Express, Socket.io
|
||||
|
||||
|
||||
|
||||
- [x] Audio mute/unmute controls with visual indicators
|
||||
- [x] Video on/off controls
|
||||
- [x] Call end functionality
|
||||
- [x] Modern, responsive design with animations
|
||||
- [x] Enhanced typography with local fonts for better performance
|
||||
- [x] Self-hosted fonts (no external dependencies)
|
||||
- [x] Environment-based configuration for ICE servers
|
||||
- [x] Input validation and sanitization
|
||||
- [x] Connection status indicators
|
||||
- [x] Beautiful gradients and glass-morphism effects
|
||||
- [x] Accessible design with proper ARIA labels
|
||||
|
||||
## Installation
|
||||
|
||||
1. Clone the repository
|
||||
|
||||
```bash
|
||||
git clone https://github.com/hirentimbadiya/Video-Peers.git
|
||||
git clone https://github.com/hirentimbadiya/VideoPeersJS.git
|
||||
cd VideoPeersJS
|
||||
```
|
||||
|
||||
2. Install dependencies for Client Side
|
||||
|
||||
```bash
|
||||
cd client #in Video-Peers/client
|
||||
cd client
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Install dependencies for Server Side
|
||||
|
||||
```bash
|
||||
cd server #in Video-Peers/server
|
||||
cd server
|
||||
npm install
|
||||
```
|
||||
|
||||
4. Run the application
|
||||
4. Configure environment variables
|
||||
|
||||
- Run the client side
|
||||
```bash
|
||||
# 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:
|
||||
```bash
|
||||
cd client #in Video-Peers/client
|
||||
cd server
|
||||
npm run dev
|
||||
```
|
||||
- Run the server side
|
||||
```bash
|
||||
cd server #in Video-Peers/server
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Technologies used / Prerequisites Of The Project
|
||||
|
||||
- [Next.js](https://nextjs.org/) - React framework
|
||||
- [WebRTC](https://webrtc.org/) - Real-time communication
|
||||
- [Socket.io](https://socket.io/) - Bidirectional communication
|
||||
- [Node.js](https://nodejs.org/) - Backend runtime
|
||||
- [Express](https://expressjs.com/) - Node.js framework
|
||||
- [Tailwind CSS](https://tailwindcss.com/) - Styling
|
||||
|
||||
- Run the client side:
|
||||
```bash
|
||||
cd client
|
||||
npm run dev
|
||||
```
|
||||
|
||||
6. Open your browser and navigate to `http://localhost:3000`
|
||||
|
||||
## 🛠 Technologies Used
|
||||
|
||||
### Frontend
|
||||
- [Next.js 14](https://nextjs.org/) - React framework with latest features
|
||||
- [React 18](https://reactjs.org/) - UI library
|
||||
- [Tailwind CSS 3](https://tailwindcss.com/) - Utility-first CSS framework
|
||||
- [Framer Motion](https://www.framer.com/motion/) - Animation library
|
||||
- [Lucide React](https://lucide.dev/) - Beautiful, customizable icons
|
||||
- [WebRTC](https://webrtc.org/) - Real-time communication
|
||||
|
||||
### Backend
|
||||
- [Node.js](https://nodejs.org/) - Backend runtime
|
||||
- [Express.js](https://expressjs.com/) - Web framework
|
||||
- [Socket.io](https://socket.io/) - Real-time bidirectional communication
|
||||
- [Helmet.js](https://helmetjs.github.io/) - Security middleware
|
||||
- [Joi](https://joi.dev/) - Input validation
|
||||
- [Express Rate Limit](https://github.com/nfriedly/express-rate-limit) - Rate limiting
|
||||
- [Validator.js](https://github.com/validatorjs/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
|
||||
## 🚀 Future Scope
|
||||
|
||||
- Text chat support in rooms
|
||||
- Screen Sharing Feature
|
||||
- Multiple Participants in a room
|
||||
- Video recording option
|
||||
- [ ] 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
|
||||
|
||||
## My Learnings
|
||||
Building this project taught me about:
|
||||
|
||||
By Building this project I learned about the following concepts:
|
||||
- **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
|
||||
|
||||
- WebRTC (Web Real-Time Communication) is a technology that enables real-time peer-to-peer communication between browsers and mobile applications. It is an open-source and free project that used to provide web browsers and mobile applications with real-time communication (RTC) via simple application programming interfaces (APIs).
|
||||
## 🤝 Contributing
|
||||
|
||||
- Socket.IO is a library that enables real-time, bidirectional and event-based communication between the browser and the server. It consists of: a Node.js server: Source | API. a Javascript client library for the browser (which can be also run from Node.js): Source | API.
|
||||
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.
|
||||
|
||||
- Next.js is a React framework that enables several server-side rendering (SSR) features such as static site generation (SSG), automatic code splitting, server-side rendering, and client-side routing. It is a framework that is built on top of React.js and Node.js.
|
||||
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
|
||||
## 📄 License
|
||||
[MIT](https://choosealicense.com/licenses/mit/)
|
||||
|
||||
## Author
|
||||
## 👨💻 Author
|
||||
- [hirentimbadiya](https://github.com/hirentimbadiya)
|
||||
- Email : hirentimbadiya74@gmail.com
|
||||
- Email: hirentimbadiya74@gmail.com
|
||||
|
||||
---
|
||||
|
||||
⭐ Star this repo if you find it helpful!
|
||||
|
||||
Referencia en una nueva incidencia
Block a user