Player Integration

When your app runs on Senza, video is streamed in two modes:

In foreground mode, your app can play video using a player such as Shaka Player. We call this the local player. The contents of your web app, including other user interface elements, are then streamed from the browser to the cloud connector.
In background mode, video is streamed directly to the cloud connector device. From your app's point of view, this is known as the remote player. The Remote Player class lets your app control video playback on the device.

Typically, your app would present a video full screen, possibly with other user interface elements such as controls or information about the content layered on top, and then after a time these would fade away for the user to watch the content. Your app can then enter background mode to save resources while the user is watching the video fullscreen.

Senza Shaka Player

The client library includes a subclass of the Shaka Player to make the transition between foreground and background modes simple. It automatically synchronizes video in the remote player, so when you switch between foreground and background modes the transition is seamless.

Integrating the Senza Shaka player into your app is simple. Because it's a subclass of Shaka, it can be inserted into your app as a drop-in replacement, so all you have to do is change the name of the class when you instantiate the player.

Where you would import the Shaka player and instantiate it:

import shaka from "shaka-player";

let player = new shaka.Player(video);

Instead you can import the Senza version like this:

import { ShakaPlayer } from "senza-sdk";

let player = new ShakaPlayer(video);

The SenzaShaka player class has a reference to the remote player, and synchronizes the playback state and timecode automatically. For example if you load a video, play or pause the video, or change the timecode in the local player, the remote player will follow along.

Remote Player

In some cases, you may not need to synchronize the playback between a local player in your web app and the remote player on the device. You could allow the user to select a video in your app and then simply play it in the remote player. This is a good solution if you don't need to display any user interface elements on top of the video.

The Remote Player documentation covers how to load and play video directly. It exposes methods and properties that are similar to those of the Shaka player and HTMLMediaElement classes.

The Video Tutorials app is an example of an app that plays video directly in the remote player.

Audio from Remote Player (coming soon)

The RemotePlayer class has an attach() method that lets you specify which video element it should stay synchronized with. When you create an instance of the Senza Shaka Player by passing a video element to the constructor, or call attach() on the player, it calls remotePlayer.attach(video) automatically for you.

When the remote player is attached to a video, audio will play from the remote player instead of the local player at all times. That way, when you switch from foreground to background mode, the audio will continue playing continuously with no interruption.

The cloud connector can only play audio from one source at a time. Your web app can play sound from an audio or video element in foreground mode just like in a normal browser. However, if you attach the remote player to a video element, audio will only play from the remote player. It takes priority as follows:

If audio is playing in the browser and you attach a video to the remote player, audio from other sources will stop.
If a video is attached to the remote player and you try to play audio from other source, it will not play.

If you want to stop playing audio from the remote player, you can detatch the video by calling remotePlayer.detatch() or player.detatch().

Example Apps

Playing Video: A step-by-step guide to the reference implementation.
Program Guide: Demonstrates how to integrate a full featured app with just a few lines of code.