AirPlay

AirPlay lets viewers wirelessly stream HLS from Apple devices to compatible receivers such as Apple TVs, smart TVs, and Macs. PRESTOplay for web supports AirPlay through a dedicated plugin.

See AirPlayPlugin for the full API.

Using the AirPlay plugin

This section shows how to integrate AirPlay with a custom UI.

Import the PRESTOplay AirPlay plugin:

import "@castlabs/prestoplay/cl.airplay";

Add an AirPlay button to your page:

<button id="airplay" style="display: none;">AirPlay</button>

Show the button when AirPlay is available:

const button = document.getElementById("airplay");

player.on(clpp.events.AIRPLAY_STATUS_CHANGED, (event) => {
  if (event.canCast) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
});

Open the AirPlay target picker when the button is clicked:

button.addEventListener('click', function () {
  const plugin = player.getPlugin(clpp.airplay.AirPlayPlugin.Id);
  plugin.showCastMenu();
});

Listen for these events to detect the start and end of an AirPlay session:

player.on(clpp.events.AIRPLAY_CASTING_STARTED, () => {
  // AirPlay casting session started
});

player.on(clpp.events.AIRPLAY_CASTING_ENDED, () => {
  // AirPlay casting session ended
});

AirPlay with DRMtoday and upfront authorization

If your streams are protected with DRMtoday using upfront authorization tokens, each playback session requires a new token. Casting to a device over AirPlay counts as a new session.

Use setDrmCustomDataModifier to generate a new token for each DRM license request (each playback session):

player.setDrmCustomDataModifier(async customData => {
  customData.authToken = await createToken();
});

Next topic: Safari

Previous topic: Cast playlist