Created a web app for watching youtube video with friends where one can start a youtube video and create a shareable link which others can join and watch together similar to how apple's shareplay work.
📌 Home Page
📌 Create New Session Page
📌 Start Session Page
This project uses Sendbird chat sdk on frontend to send youtube player events to a sendbird open channel, others with the link subscribes to this channel and receive player events which is used to synchronize the youtube video on their end. IFrame player API for embedding youtube player on UI which lets you control the player and subscribe to its events.
A suite of tools and resources designed for building and managing real-time chat experiences. It covers the necessities for developers to seamlessly integrate chat functionality into their application.The Sendbird Chat SDK for JavaScript allows you to add real-time chat into your client app with minimal effort. Sendbird offers a feature rich, scalable, and proven chat solution depended on by companies like Reddit, Hinge, PubG and Paytm. With Sendbird Chat for JavaScript, you can easily build an in-app chat with all the essential messaging features. The Chat SDK v4 supports both TypeScript and JavaScript.
This project uses sendbird chat sdk with javascript but you can use this sdk on some other languages as well. You can find more infromation at: https://docs.sendbird.com/docs/chat.
- The YouTube Android Player API enables you to incorporate video playback functionality into your Android applications.
- The API defines methods for loading and playing YouTube videos (and playlists) and for customizing and controlling the video playback experience.
- Using the API, you can load or cue videos into a player view embedded in your application’s UI. You can then control playback programmatically. For example, you can play, pause, or seek to a specific point in the currently loaded video.
- You can also register event listeners to get callbacks for certain events, such as the player loading a video or the player state changing. Finally, the API
- Adapts to quality as per the bandwidth
- Supports Live Stream videos
- Supports captions
- No need for API Key
- Supports changing playback rate
- Supports custom controls
- Exposes builders for building custom controls
- Retrieves video meta data
- Inline Playback
| Property | Type | Description |
|---|---|---|
| videoId(required) | string | Youtube video Id |
| style | object | You can pass this to override some default styles |
| onStart | () => void | Execute a function on start and send play message on sendbird chat sdk |
| onPause | () => void | Execute a function on pause and send a pause message to sendbird chat sdk |
| onDurationReady | (s: number) => void | Execute a function when the duration is ready |
| onPlaybackRateChange | () =>void | Execute a function when the playback rate will actually change |
| onEnd | () => void | Execute a function on end |
| onError | () => void | Execute a function on error |