Chromecast

Integration with Chromecast is based on the react-native-google-cast library.

Setup

Follow Installation and Usage instructions from the react-native-google-cast library.

Multiple sources

Provide multiple sources for the same content when using Chromecast. Chromecast doesn't support protected HLS. Therefore, an alternative protected DASH stream must be provided on iOS. Finally, the DRM configuration should support both Widevine and FairPlay. For example:

const playerConfiguration: PlayerConfiguration = {
    source: [
      {
        url: 'https://example.com/Manifest.mpd',
        type: ContentType.DASH,
      },
      {
        url: 'https://example.com/manifest.m3u8',
        type: ContentType.HLS,
      },
    ],
    drmType: DrmType.CUSTOM,
    drmConfiguration: {
      WIDEVINE: {
        licensingUrl: 'https://example.com/widevine/license',
        licensingParameters: {
          // custom parameters here
        },
      },
      FAIRPLAY: {
        certificateUrl: 'https://example.com/fairplay/certificate',
        licensingUrl: 'https://example.com/fairplay/license',
        licensingParameters: {
          // custom parameters here
        },
        certificateParameters: {
          // custom parameters here
        },
      },
    },
};

Start casting

To start casting you have to pass the MediaLoadRequest object to the loadMedia method. You can create one by mapping the PlayerConfiguration or CLVideo object.

If there isn't local playback in progress, use the MediaLoadRequestUtils.fromPlayerConfiguration method, for example:

const mediaLoadRequest = await MediaLoadRequestUtils.fromPlayerConfiguration(playerConfiguration);
// Add your custom data to the `mediaLoadRequest.mediaInfo.customData` object
await castSession.getClient().loadMedia(mediaLoadRequest);

If there is local playback in progress, use the MediaLoadRequestUtils.fromVideoComponent method. The newly created media load request contains the player configuration as well as the current player state, position, audio track and text track. For example:

const mediaLoadRequest = await MediaLoadRequestUtils.fromVideoComponent(videoComponent);
// Add your custom data to the `mediaLoadRequest.mediaInfo.customData` object
await castSession.getClient().loadMedia(mediaLoadRequest);

Stop casting

To restore playback locally, you need to convert a MediaStatus object to a PlayerConfiguration object. Use the MediaStatusUtils.toPlayerConfiguration method. The newly created player configuration contains the current player state, position, audio track and text track. For example:

const playerConfiguration = MediaStatusUtils.toPlayerConfiguration(
   this.mediaStatus,
);
// ...
<CLVideo media={playerConfiguration} />