Chromecast

Chromecast support is implemented as a plugin that must be installed and enabled separately.

This plugin doesn't implement the Chromecast sender API itself. Instead, it contains utility classes for serializing and deserializing PlayerConfiguration when communicating with the Chromecast receiver.

For a comprehensive solution, we recommend using the react-native-google-cast library. It provides the full Chromecast sender API, giving you complete flexibility for adding Chromecast support.

Setup

First, install the @castlabs/react-native-prestoplay-chromecast package:

npm install @castlabs/react-native-prestoplay-chromecast

Next install and set up the react-native-google-cast library in the project.

Start casting

Convert an instance of PlayerConfiguration to the MediaLoadRequest type and then load it on the receiver using the remote media client. Please note that it is possible to adjust a newly created MediaLoadRequest , by adding additional metadata or other custom data. For example:

//...
import { ChromecastSerializer } from "@castlabs/react-native-prestoplay-chromecast";
import { useRemoteMediaClient } from "react-native-google-cast";

const mediaLoadRequest =
  ChromecastSerializer.toMediaLoadRequest(playerConfiguration);

// Add your custom data to the `mediaLoadRequest.mediaInfo.customData` object

const castMediaClient = useRemoteMediaClient();
await castMediaClient.getClient().loadMedia(mediaLoadRequest);
//...

Alternatively, a Player instance can be converted to the MediaLoadRequest type. In this case, the MediaLoadRequest will maintain the lastest player state, such as the current position and selected audio track. For example:

import { ChromecastSerializer } from "@castlabs/react-native-prestoplay-chromecast";
import { useRemoteMediaClient } from "react-native-google-cast";

//...
const mediaLoadRequest = ChromecastSerializer.toMediaLoadRequest(player);

const castMediaClient = useRemoteMediaClient();
await castMediaClient.getClient().loadMedia(mediaLoadRequest);
//...

Resume playback

Once the Chromecast session is stopped, playback can be resumed on the device. The resumed playback will maintain the latest receiver state, such as the current position and selected audio track. For example:

import { ChromecastDeserializer } from "@castlabs/react-native-prestoplay-chromecast";
import { useMediaStatus } from "react-native-google-cast";

//...
const castMediaStatus = useMediaStatus();

const playerConfiguration =
  ChromecastDeserializer.toPlayerConfiguration(castMediaStatus);
player.open(playerConfiguration);
//...

info

A complete example of Chromecast integration is available as source code in the example app on the Castlabs Download Portal