A real-time YouTube video synchronization app that allows multiple users to watch the same video together and enjoy the real sync.
✅ Create or join a sync room with a unique Room ID.
✅ Watch YouTube videos in sync with others.
✅ Play, pause, and seek functionality is synchronized across all users in the room.
✅ Change the video URL dynamically.
- Frontend: HTML, JavaScript, TailwindCSS 🎨
- Backend: Node.js, Express.js 🖥️
- WebSockets: For real-time video synchronization 🔄
- YouTube IFrame API: For embedding and controlling YouTube videos 🎥
- Install Node.js
- Clone the repository:
git clone https://github.com/your-repo/angsync-room.git
- Install dependencies:
npm install
- Start the server:
node server.js
- Open
http://localhost:8080/in your browser. 🌐
- Uses Express.js to serve the
index.htmlfile. - Uses WebSockets to establish real-time communication between users.
- Manages rooms and keeps track of video state (play, pause, seek, and URL changes).
- Connects to the WebSocket server.
- Loads and controls the YouTube video using the YouTube IFrame API.
- Sends and receives synchronization messages (play, pause, seek, change URL) through WebSockets.
| 🎯 Event Type | 🔁 Sent By | 📌 Purpose |
|---|---|---|
join |
Client | User joins a room 👥 |
sync |
Server | Sends current video state to new users 🔄 |
play |
Client | Notifies all users to play video |
pause |
Client | Notifies all users to pause video ⏸️ |
seek |
Client | Synchronizes video position ⏩ |
changeUrl |
Client | Updates video URL for all users 🔗 |
🚨 Sometimes pause/play actions don’t sync correctly. Possible improvement: Implement a timestamp-based synchronization mechanism.
⚡ Enhance error handling for WebSocket disconnections.
🎨 UI/UX improvements for a better user experience.
📝 MIT License
📌 Jivan Jamdar 🚀