🎬 Shaka Watch Party

A real-time synchronized video watching experience powered by PubNub and Shaka Player.

Watch videos together with friends, perfectly in sync, with live chat and emoji reactions!

✨ Features

• 🔄 Perfect Sync - Host controls playback, viewers stay perfectly synchronized
• 💬 Live Chat - Real-time messaging with message history for late joiners
• 😂 Emoji Reactions - Send floating reactions that appear for everyone
• 👥 Presence - See who's watching with you in real-time
• 👑 Host Transfer - Pass control to another viewer
• 🎥 Custom Videos - Use any DASH (.mpd) or HLS (.m3u8) stream
• 🔑 Self-Serve - Enter your own PubNub keys via the UI

🖼️ Screenshots

Join Screen

Watch Room

🚀 Quick Start

1. Clone the repository

git clone https://github.com/PubNubDevelopers/shaka-watch-party.git
cd shaka-watch-party

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open in browser

Navigate to http://localhost:5173 and enter your PubNub keys.

🔑 Getting PubNub Keys

1. Sign up for a free account at admin.pubnub.com
2. Create a new app and keyset
3. Enable the following features on your keyset:
   • Presence - For tracking who's online
   • Message Persistence - For chat history
   • App Context - For user/channel metadata
   • Files (optional) - For file sharing

You can enter your keys directly in the app UI, or create a .env.local file:

VITE_PUBNUB_PUBLISH_KEY=pub-c-your-publish-key
VITE_PUBNUB_SUBSCRIBE_KEY=sub-c-your-subscribe-key

🎯 How It Works

Host

1. Generate a room code and share it with friends
2. Control playback - play, pause, seek
3. Everyone stays in sync automatically

Viewer

1. Enter the room code shared by the host
2. Sit back and enjoy - playback syncs automatically
3. Chat and react with emoji

🛠️ Tech Stack

• PubNub Shaka Player - Video sync via SyncManager
• PubNub Chat SDK - Real-time chat & presence
• Shaka Player - Adaptive video streaming
• Vite - Fast build tooling
• TypeScript - Type-safe development

📁 Project Structure

shaka-watch-party/
├── src/
│   ├── components/       # UI components
│   │   ├── JoinScreen.ts
│   │   ├── VideoPlayer.ts
│   │   ├── Chat.ts
│   │   ├── Participants.ts
│   │   └── ...
│   ├── services/
│   │   └── ChatService.ts  # PubNub Chat SDK integration
│   ├── config.ts         # PubNub configuration
│   ├── main.ts           # App entry point
│   └── style.css         # Styles
├── assets/               # Screenshots
└── docs/                 # Documentation

🎨 Customization

Custom Video URL

Expand "Custom Video URL" on the join screen to use your own DASH or HLS stream.

Styling

Edit src/style.css - the app uses CSS custom properties for easy theming.

📖 Documentation

• Watch Party Tutorial - Step-by-step guide
• PubNub Shaka Player Docs
• PubNub Chat SDK Docs

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see LICENSE for details.

---

Built with ❤️ by PubNub