Watch YouTube videos together in real-time with friends! 🚀
A powerful WebRTC-based web application that allows multiple users to watch YouTube videos simultaneously with synchronized playback, real-time chat, and advanced features.
- Real-time Video Synchronization - Play, pause, and seek in perfect sync across all users
- YouTube IFrame API Integration - Seamless YouTube video embedding and control
- Multi-user Support - Configurable room capacity (2-10 people)
- Instant State Sync - Sub-second latency for video state changes
- Real-time Chat - Instant messaging with timestamps and usernames
- WebRTC Data Channels - Direct peer-to-peer communication
- Emoji Reactions - React to messages with emojis
- Chat History - Persistent chat storage
- Screen Sharing - Share your screen with room participants
- Voice Chat - Real-time audio communication
- Video Queue Management - Add, remove, and manage video playlists
- Room Settings - Customize room capacity, sync tolerance, and permissions
- User Profiles - Personalized usernames and preferences
- Modern Dark Theme - Beautiful glassmorphism design
- Responsive Layout - Works on desktop and mobile devices
- Real-time Status Updates - Live connection and room status
- Intuitive Controls - Easy-to-use interface with manual sync options
- Node.js 18+ installed
- Modern web browser with WebRTC support
- YouTube video URL to test with
-
Clone the repository
git clone https://github.com/KrishMistry18/WatchParty.git cd WatchParty -
Install dependencies
npm install
-
Start the server
npm start
-
Open your browser
http://localhost:3000
- Join a Room - Enter a room ID and click "Join Room"
- Load Video - Paste a YouTube URL and click "Load Video"
- Connect Peers - Click "Connect WebRTC" to establish peer connections
- Start Watching - Use the video controls or let others control playback
- Chat & Share - Use the chat panel and additional features
- HTML5 - Semantic markup with modern CSS
- Vanilla JavaScript - No framework dependencies
- YouTube IFrame API - Video player integration
- WebRTC - Peer-to-peer connections and data channels
- Node.js - Server runtime
- Express.js - Web framework
- Socket.IO - Real-time signaling server
- WebRTC Signaling - SDP and ICE candidate exchange
User A → Socket.IO → Server → Socket.IO → User B
↓ ↓
WebRTC ← Data Channel ← P2P → Data Channel → WebRTC
- Maximum Users: 2-10 people per room
- Sync Tolerance: 1-10 seconds for time synchronization
- Feature Toggles: Enable/disable chat, screen sharing, voice chat
PORT=3000 # Server port (default: 3000)
NODE_ENV=production # Environment mode| Browser | WebRTC | YouTube API | Status |
|---|---|---|---|
| Chrome | ✅ | ✅ | 🟢 Full Support |
| Firefox | ✅ | ✅ | 🟢 Full Support |
| Safari | ✅ | ✅ | 🟡 Limited |
| Edge | ✅ | ✅ | 🟢 Full Support |
- Open multiple browser tabs/windows
- Join the same room ID
- Load a YouTube video
- Test synchronization by playing/pausing
- Verify chat functionality
- Test with different network conditions
- Verify reconnection handling
- Check latency and sync accuracy
heroku create your-watchparty-app
git push heroku mainvercel --prodFROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
EXPOSE 3000
CMD ["npm", "start"]We welcome contributions! Please see our Contributing Guidelines for details.
git clone https://github.com/KrishMistry18/WatchParty.git
cd WatchParty
npm install
npm run dev # Development mode with auto-reload- Follow existing code style
- Add comments for complex logic
- Test your changes thoroughly
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- WebRTC - For peer-to-peer communication
- YouTube IFrame API - For video integration
- Socket.IO - For real-time signaling
- Express.js - For the web server framework
- 🌐 Project: https://github.com/KrishMistry18/WatchParty
- 📧 Email: mistrykrish2005@gmail.com
- 💼 LinkedIn: https://linkedin.com/in/krishmistry18
Built with ❤️ by Krish Mistry