Watch Party

Watch Parties are powered by Sceenic. They allow users to chat over video without leaving the broadcast. Sceenic's SDKs are integrated into Ease Live out of the box, to ensure a smooth and robust experience for your viewers.

The Watch Party package gets you up and running with a fully functional video chat implementation with the click of a button. After installing it, you can disconnect the package in order to adapt the look and feel to fit your project.

What the package includes

The Watch Party package includes all the heavy lifting with regards to authentication, creating and connecting to Watch Parties, and managing video syncing and audio control via the Ease Live SDK.

It also includes a complete set of UI components, all wired up and ready to go: A sidebar that shows the participants in your watch party, the invite flow, modals to inform the user about microphone/camera permissions, Watch Party settings and more.

How the video syncing works

Any user can start a Watch Party, and invite their friends by sending them a unique invite link. When users join a Watch Party, they usually have slightly different delays in their video streams. To bring participants into sync, Ease Live adjusts the player speed to speed up or slow down the video briefly until everyone is at the same point in the video.

This is all possible because Ease Live overlays already read timecodes from the video stream to synchronize your graphics with the stream.

Getting started

Installing the package

1. Open your project in Ease Live Studio, and install the Watch Party package from the package store.
2. Click the Disconnect button to disconnect the installed package from the store. This allows you to make changes to the UI, as well as enter your own Sceenic API credentials.
3. Add your own button to trigger the Watch Party experience: Wherever you see fit, add a trigger using the General – Call a function action. Call the Sceenic: Activate function.

That's it! You are now free to tweak the installed scenes and components to match your project's look and feel.

Managing UI states

The Watch Party sidebar is shown by activating the "Watch Party" scene. So the easiest way to hide other UI elements when it is shown, is by using your scenes' active and deactive states. But you prefer to toggle a scene or layer's visibility with a data override, the package includes two data properties for that purpose. Just look for sidebarActive and sidebarNotActive in the SceenicUIState data source.

And if you want to show an indicator when there is an active Watch Party, you can use the isConnected property in the SceenicState data source.

Sceenic API keys

Before going to production you need to supply your own Sceenic API keys. But don't worry, it will work for development purposes in the meantime.

1. In your data sources, find the SceenicChatAuth API source. Scroll down to the HTTP headers section, and replace the auth-api-key and auth-api-secret tokens with your own.
2. Do the same for the SceenicSyncAuth data source.

SDK integration checklist

For the feature to work properly, a couple things need to be in order in your app's Ease Live SDK integration:

1. Update to latest Ease Live SDK on iOS, Android and Web.
2. Listen for player.speed event to allow Ease Live and Sceenic to synchronize, and to bring users up to the same time and speed (see example).
3. Listen for player.volume event so that Ease Live can change the main game volume to better hear your friends during a party (see example).
4. Enable camera access for webview in app configuration (iOS/Android). Will ask user for camera access when entering this part of the UI.
5. Handle invite links (see below)

Handling invite links

When a user clicks the invite button, a URL is generated with a token pointing to their Watch Party. The token is added via together URL parameter, like this:

https://www.your-service.com/watch/some-game-id?together=<TOKEN>

For this to work, the following need to be configured:

1. Configure a URL on your website that is a direct permanent URL to the game that the user is watching. Make sure the same link also functions as a deep link into the native iOS and Android apps.
2. If the together parameter is present in the URL, make sure the token is passed along to Ease Live when loading in the overlays.
3. The deep link URL also needs to be passed to Ease Live via the invite parameter. Otherwise, the invite will point directly to the URL for the Ease Live overlay itself.

For example:

const easeLive = new EaseLive({
  accountId: '<account_id>',
  projectId: '<project_id>',
  programId: '<program_id>',
  env: 'prod',
  params: {
    together: '<token_from_url>',
    invite: 'https://www.your-service.com/watch/some-game-id'
  }
})