logo
SDKs
IntroductionHow to update a SDK?
Web
Getting started with the Web SDK (Extended)Getting started with the Web SDKAPI examplesHow to implement Keyboard HotkeysHow to embed an iframe?How to implement a seamless transition between videos?How can I use video inside THEOplayer?How to work around browser cache with a new license?How to customise quality selection & labels (MP4)How to get frame-accurate currentTime display in the UI Control bar
Android
Getting started with the Android SDKAndroid SDK customizationAndroid SDK product flavorsHow to couple the native MediaRouteButton to THEOplayerHow to enable -experimental- native rendering on AndroidHow to do offline Playback with AES-128 Encrypted Streams on Android
iOS
Getting started with the iOS SDKiOS SDK CustomizationMy app does not want to build for the app storeHow to bypass copy() not working in Safari consoleHow to couple the native GCKUICastButton to THEOplayeriOS SDK Touch-events (gestures)Building for iOS Simulator, but the linked and embedded framework THEOplayerSDK.framework was built for iOS + iOS SimulatorHow to implement custom local network access (LNA) interstitial dialog for Chromecast
Android TV
Getting started with the Android TV SDK
tvOS
Getting started with the tvOS SDK
Chromecast
Getting started with the Chromecast SDKChromecast Application Customization
Webos
Getting Started with THEOplayer on WebOS
Tizen
Getting started with the Tizen SDKInstalling the Tizen developer toolsSetting up a Tizen device for debuggingDeploying a test app on a physical Tizen deviceDeploying a test app on a Tizen emulator
Roku
Getting Started with Roku SDK
Fire tv
Getting started with the Fire TV SDK
Frameworks

Getting started with the Chromecast SDK

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

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

This has to be done 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

image2018 5 25 15 31 19

image2018 5 25 15 31 26

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.

github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
Singapore
Barcelona