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:
-
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; } })();
Updated 3 months ago