Create a custom receiver (iOS)

The Google Cast framework enables a viewer to stream content to a compatible TV or sound system. By enabling the Google Cast framework in your app, a viewer can stream your content to a Cast-enabled device on a shared network.

Prerequisite

Item	Notes
Google Cast Framework	Framework that enables casting with the iOS SDK

Configure the receiver app

Follow these steps to configure a customer receiver:

Add the following code to set up a basic webpage as a custom Chromecast receiver.

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Studio DRM Custom Chromecast Receiver</title>
    <link rel="stylesheet" href="main.css" media="screen" />
    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

<body>
    <cast-media-player></cast-media-player>
</body>
<footer>
    <script src="receiver.js"></script>
</footer>
</html>

Add the receiver.js to same folder as the webpage in the previous step.

📘
Refer to the Google Cast Web Receiver API reference for more information about cast.framework.

(() => {
    const context = cast.framework.CastReceiverContext.getInstance();
    const playerManager = context.getPlayerManager();
    var laurl;

    // Wait until the cast player is loaded, get the laurl from the media request and use it in the player config
    playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD, loadRequestData => {
        let customData = loadRequestData.media.customData;
        // Check all content source fields for asset URL or ID
        let source = loadRequestData.media.contentUrl || loadRequestData.media.entity || loadRequestData.media.contentId;
        if (!source || source == "") {
            let error = new cast.framework.messages.ErrorData(
                cast.framework.messages.ErrorType.LOAD_FAILED
            );
            error.reason = cast.framework.messages.ErrorReason.INVALID_REQUEST;
            return error;
        }
        
        // This is safe for most senders but if the content is DRM
        // From an iOS device, you’ll want to ensure a Widevine Source
        loadRequestData.media.contentUrl = source;

        if (customData) {
            // The JWP mobile SDKs store JWP Platform DRM sources (if any) here
            if (customData["sources"]) {
                let source = getWidevineSource(customData["sources"])
                if (source) {
                    // Ensure the content URL is Widevine as this is not the case from iOS
                    loadRequestData.media.contentUrl = source["file"]
                    // Get license url from source for widevine
                    laurl = source["drm"]["widevine"]["url"]
                }
            }

            // Pull any additional overloaded information from the `customData` object
            // See the sender code sample for how to add custom data
            if (customData["my_custom_laurl"]){
                laurl = customData["my_custom_laurl"]
            }
        }
        playerManager.setPlaybackConfig(createPlaybackConfig(playerManager));
        return loadRequestData;
    });

    context.start();

    function getWidevineSource(sources) {
        for (const source of sources) {
            if (source.drm && source.drm.widevine) {
                return source;
            }
        }
        return null;
    }

    function createPlaybackConfig(playerManager) {
        let playbackConfig = (Object.assign(new cast.framework.PlaybackConfig(), playerManager.getPlaybackConfig()));
        playbackConfig.licenseUrl = laurl;
        playbackConfig.protectionSystem = cast.framework.ContentProtection.WIDEVINE;
        return playbackConfig;
    }

})();