Create a custom receiver (iOS)

Learn how to create a custom receiver

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:

  1. 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>
    

  1. 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;
        }
    
    })();