Cast with JWP web player (Standalone)

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

This guide explains how to enable the Google Cast framework for the JW web player. However, these same principles also apply to most commonly used web players.

📘
VUDRM was rebranded as Studio DRM following JW Player’s acquisition of Vualto. Any references to VUDRM in this document or in the Studio DRM Admin portal refer to Studio DRM.

Requirements

Integrating Standalone Studio DRM with Chromecast has several requirements.

Item

Notes

Application registration

Registration allows you to test your custom receiver. Specifically, you will be able to connect to the custom receiver with your custom Cast implementation.

Cast app

A Cast app enables DRM-protected content to be streamed on a Cast-enabled device.

A Cast app consists of two components:

Sender app (JWP web player)
Custom web receiver

You can use the JW Player Chromecast Custom Receiver Demo App to guide your implementation.

ℹ️ Google recommends installing a mix of http-server and ngrok to deploy your receiver locally.

Studio DRM token

In order for your receiver to play DRM-enabled content, you must generate a Studio DRM token.

Configure the Cast app

For DRM playback, deploy your custom web 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="app.js"></script>
</footer>
</html>

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

    playerManager.setPlaybackConfig(createPlaybackConfig(playerManager));
    context.start();

    function createPlaybackConfig(playerManager) {
        let playbackConfig = (Object.assign(new cast.framework.PlaybackConfig(), playerManager.getPlaybackConfig()));
        playbackConfig.licenseUrl = 'https://widevine-license.vudrm.tech/proxy';
        playbackConfig.licenseRequestHandler = licenseRequestHandler;
        playbackConfig.protectionSystem = cast.framework.ContentProtection.WIDEVINE
        return playbackConfig;
    }

    function licenseRequestHandler(request) {
        request.headers['X-VUDRM-TOKEN'] = '<your-studiodrm-token>';
        return request;
    }
})();

Enable casting of DRM content with JW web player

After deploying your custom receiver, you can cast DRM content from the JW web player.

Follow the guide to integrate Studio DRM with JW Player.
After setting up the JW Player, add the cast object to your setup.
Define cast.appid with your registered custom receiver app ID from the Google Cast developer console.

(function() {
    // Set the mpeg-dash stream URL.
    var dashStreamURL = "<dash-stream-url>";
    // Set the hls stream URL.
    var hlsStreamURL = "<hls-stream-url>";

    // Set the URL to retrieve the fairplay certificate from.
    var fairplayCertURL = "<fairplay-cert-url>";

    // Please refer to the following documentation for guidance on generating a Studio DRM token: https://developer.jwplayer.com/jwplayer/docs/studio-drm-token-api-v2
    var studioDrmToken = "<your-studiodrm-token>";
    
    // setup jwplayer, passing the stream URLs and DRM configurations.
    jwplayer("studiodrm-container").setup({
        "playlist": [{
            "sources": [{
                "file": dashStreamURL,
                "drm": {
                    "widevine": {
                        "url": "https://widevine-license.vudrm.tech/proxy",
                        "headers": [{
                            "name": "X-VUDRM-TOKEN",
                            "value": studioDrmToken
                        }]
                    },
                    "playready": {
                        "url": "https://playready-license.vudrm.tech/rightsmanager.asmx",
                        "headers": [{
                            "name": "X-VUDRM-TOKEN",
                            "value": studioDrmToken
                        }]
                    }
                }
            }, 
            {
                "file": hlsStreamURL,
                "drm": {
                    "fairplay": {
                        "certificateUrl": fairplayCertURL,
                        "processSpcUrl": function (initData) {
                            return "https://" + initData.split("skd://").pop();
                        },
                        "licenseRequestHeaders": [
                            {
                                "name": "Content-type",
                                "value": "arraybuffer"
                            },
                            {
                                "name": "X-VUDRM-TOKEN",
                                "value": studioDrmToken
                            }
                        ]
                    }
                }
            }]
        }],
        "cast": {
            "appid": "<enter-your-custom-app-receiver-id>"
        }
    });
})();

You can now cast DRM-protected video content onto a Chromecast device.