How to configure a different stream to Chromecast on Web

Some streaming setups require you to cast a different stream to a Chromecast Receiver device than the one playing on a Chromecast Receiver device. For example, if you're playing HLS + FairPlay DRM on your iOS application, you need to cast a different source with DASH + Widevine DRM to your Chromecast application, because Chromecast applications aren't able to support FairPlay.

You can achieve this use case with the ChromecastConnection API.

ChromecastConnection API

The ChromecastConnection API allows you to implement callbacks related to Chromecast playback. To achieve the described use case you can use the onStart (i.e. the start of a Chromecast session) to set a new stream, and onStop (i.e. the end of a Chromecast session) to (re)set your previous stream.

You may also be interested in onJoin (i.e. joining an existing Chromecast session with a new device) or onLeave (i.e. leaving an existing Chromecast session on a device).

The snippet below has two sources:

1. senderSource is intended for playback on your sender device (i.e. your browser)
2. chromecastSource is intended for playback on your Chromecast application

The ChromecastConnectionCallback interface is used to:

1. Set the chromecastSource when Chromecast playback starts through the onStart callback.
2. Revert to the senderSource when Chromecast playback stops through the onStop callback.

var senderSource = {
  sources: {
    src: 'https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8',
    type: 'application/x-mpegurl',
  },
};
var chromecastSource = {
  sources: {
    src: 'https://cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny_metadata.m3u8',
    type: 'application/x-mpegurl',
  },
};
player.source = senderSource;
player.cast.chromecast.connectionCallback = {
  onStart: function (source) {
    return chromecastSource;
  },
  onStop: function (source) {
    return senderSource;
  },
  onJoin: function (source) {
    return source;
  },
  onLeave: function (source) {
    return source;
  },
};

The onJoin and onLeave implementations in the above snippet adhere to the default behavior.