Receiver app

PRESTOplay’s Chromecast component builds on the Google Web Receiver SDK for receiver-side functionality, so it supports the same media formats. This guide covers building a custom web receiver app.

Load the Google Web Receiver SDK:

<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>

Load the PRESTOplay SDK and its Cast component:

import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.cast";

Render the cast-media-player tag, a built-in media player provided by the Google Cast framework with basic UI controls that you can customize:

<cast-media-player id="castPlayer"></cast-media-player>

You can also use a plain <video> tag and build your own UI controls, though Google doesn’t officially recommend this approach — see custom UI data binding.

Create a Player instance, pass it to the Receiver, and start the receiver. The receiver listens for commands from the sender and uses the player to play the stream:

const player = new clpp.Player('castPlayer', {
  license: 'your-license-key',
});
const receiver = clpp.cast.Receiver.getInstance();
receiver.init(player);
receiver.start();

Full example:

<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<cast-media-player id="castPlayer"></cast-media-player>
<script type="module">
  import { clpp } from "@castlabs/prestoplay";
  import "@castlabs/prestoplay/cl.cast";

  const player = new clpp.Player('castPlayer', {
    license: 'your-license-key',
  });

  const receiver = clpp.cast.Receiver.getInstance();
  receiver.init(player);
  receiver.start();

  // Handle app going to background
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      console.info('Receiver app went to background, shut it down.');
      receiver.stop();
    }
  });
</script>

Running in background

On Google TV Streamer, pressing the remote’s Back or Home button sends the receiver app to the background. Shut it down at that point:

// Receiver app
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.info('Receiver app went to background, shut it down.');
    receiver.stop();
  }
});

Alternatively, listen for clpp.events.CAST_VISIBILITY_CHANGED on the sender and implement your own behavior:

// Sender app
player.on(clpp.events.CAST_VISIBILITY_CHANGED, (e) => {
  if (e.visible) {
    // Receiver app is in the foreground
  } else {
    // Receiver app is in the background
  }
});

Bring the receiver app from background to foreground by calling Player.play or Player.open.

Tracks

The receiver adds extra properties to the Track object via the customData field on the MEDIA_STATUS message:

• For audio tracks: audioTrackInfo — channels, codec, and spatial audio information.

• For audio and text tracks: roles — an array of strings representing the track’s roles, or undefined.

Limitations of the receiver

The Chromecast Receiver SDK has limitations that keep some Player APIs from working in a receiver app.

Volume control

Volume control APIs aren’t available on the receiver: Player.setVolume, Player.getVolume, Player.setMuted, Player.isMuted, and the mute and volume configuration options have no effect. Control volume from the sender instead by calling the same APIs there.

Track management

Video tracks and renditions can’t be listed or switched on the receiver. These TrackManager APIs are no-ops:

const tm = player.getTrackManager();
tm.getVideoTracks(); // empty array
tm.getVideoRendition(); // null
tm.getVideoTrack(); // null
tm.setVideoTrack(track); // does nothing

Audio track and subtitle management work as expected.

Next topic: Sender

Previous topic: Chromecast