Chromecast SDK Setup

This how-to guide describes how to set-up a Chromecast Receiver application using the THEOplayer Chromecast SDK.

Step-by-step guide

Prerequirement: request a valid THEOplayer Chromecast Receiver SDK from one of our account executives. The Chromecast SDK has the following structure:

  • receiver/
    • index.html: this file demonstrates a basic usage of the Chromecast Receiver SDK.
  • release/
    • THEOplayer-cast-receiver.js: the actual THEOplayer (JavaScript) Chromecast Receiver SDK.
    • ui.css: the default CSS mark-up.
    • theoplayer.d.js, theoplayer.e.js, theoplayer.p.js: worker files required for HLS playback.

Set-up a web project

A Chromecast Receiver application is a web project. Create a sample project, add a receiver folder, and create an index.html file in this folder with the following skeleton code.

Integrate the Google Cast Receiver SDK

By including the Google Cast Receiver SDK, you have access to the Receiver API. The THEOplayer Receiver SDK leverages this API.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>THEOplayer Chromecast Receiver Sample Application</title>
        <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
    </head>
    <body>
    </body>
</html>

Integrate the THEOplayer Chromecast Receiver SDK

By including the THEOplayer Chromecast Receiver SDK, you have access to the THEOplayer Receiver SDK. This SDK consists of a JavaScript library (consisting of four files) and a CSS file. Create a release folder, and put the 5 files belonging to the THEOplayer Chromecast Receiver SDK in this folder.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>THEOplayer Chromecast Receiver Sample Application</title>
        <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
        <script src="../release/THEOplayer-cast-receiver.js"></script>
        <link rel="stylesheet" type="text/css" href="../release/ui.css">
    </head>
    <body>
    </body>
</html>

Set up THEOplayer instance

Setting up a THEOplayer instance in a Chromecast Receiver application is similar to our Web SDK. More information on setting up the THEOplayer Web SDK can be found at .

You need to add a DOM-element which will contain the user interface of THEOplayer, and you need to initialize the THEOplayer instance through JavaScript code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>THEOplayer Chromecast Receiver Sample Application</title>
        <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
        <script src="../release/THEOplayer-cast-receiver.js"></script>
        <link rel="stylesheet" type="text/css" href="../release/ui.css">
    </head>
    <body>
        <div id="my-player"></div>
        <script>
          var player = new THEOplayer.Player(document.getElementById('my-player'), {
                libraryLocation: '../release/'
          });
        </script>
    </body>
</html>

Optional: alter default UI

The CSS snippet added to the code-block below have the following effect:

  1. .THEO-cast-receiver-player .THEO-cast-receiver-logo
    Change the default splash image when your receiver app is loading. This default splash image will show the a THEOplayer-branded image, but you might want to replace it with a different image.
  2. .THEO-cast-receiver-player .THEO-cast-receiver-watermark
    Change the default watermark logo which is shown when pausing (or buffering). This default watermark logo will show a THEOplayer-branded image, but you might want to replace it with a different image.

In each of the examples, be sure to set the image source correctly, by replacing the '...'.

Note that you can also use the easy UI skinning colors to modify the UI as described in http://demo.theoplayer.com/ui-skinning. You can reuse the CSS you use in the THEOplayer web SDK in your Chromecast receiver as well!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>THEOplayer Chromecast Receiver Sample Application</title>
        <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
        <script src="../release/THEOplayer-cast-receiver.js"></script>
        <link rel="stylesheet" type="text/css" href="../release/ui.css">
        <style>
                .THEO-cast-receiver-player .THEO-cast-receiver-logo {
                    position: static;
                    margin: 0 auto;
                    width: 100%;
                    height: 100%;
                    background: url('...') no-repeat, no-repeat center;
                    background-size: cover;
                }
 
                .THEO-cast-receiver-player .THEO-cast-receiver-watermark {
                    width: 124px;
                    height: 65px;
                    background-image: url('...');
                }
        </style>
    </head>
    <body>
        <div id="my-player"></div>
        <script>
          var player = new THEOplayer.Player(document.getElementById('my-player'), {
                libraryLocation: '../release/'
          });
        </script>
    </body>
</html>

Publish the application

Before you can deploy your application, you should upload your web project to a HTTPS location. (e.g. https://cdn.your-website.com/cast/chromecast/sample-project/) Ensure that your folder structure respects the aforementioned structure.

Deploy the application through the Google Cast SDK Developer Console

Your Chromecast Receiver sample application is now in a state where it can be deployed as a real application. If you have a Google Cast SDK Developer Console, you can log in to https://cast.google.com/u/1/publish/#/overview.

 

image2018-5-25_15-31-6.png

image2018-5-25_15-31-19.png

 

image2018-5-25_15-31-26.png

You have to go through the following steps:

  1. Click "ADD NEW APPLICATION".
  2. Select "Customer Receiver".
  3. Enter information and refer to the HTTPS location of your web project.
  4. Press start and wait.

Test it

Once your application is published, you can start casting from your THEOplayer Web SDK, iOS SDK or Android SDK. You need to set the correct appID, enable Chromecast and press the Chromecast icon. Additionally, you can start casting through the Cast API.