Get Started

 

Introduction

Developing for CloudTV is much like developing HTML5 applications for the web. To simplify testing and debugging your applications, you should have a local web server installed on your development computer. To learn more about installing a local web server read the Step By Step Guide

1

Get CloudTV Player

The CloudTV Player application is used to test and optimize applications by executing them on the CloudTV H5 platform. Most development for CloudTV can be done in Chrome, but we recommend that you also test in CloudTV Player during development. Besides being able to see how your application looks when rendered by our platform, the player provides a number of additional tools useful to developing your application.

You must be a member of the Developer Community in order to get the CloudTV Player. If you have not yet registered please Create An Account

To install CloudTV Player on a Mac or PC, double-click the downloaded file and follow the instructions. At the end of the installation process you will be able to run CloudTV Player just as you would run any other installed application on your system.

2

Create a Developer Sandbox Account

The CloudTV Developer Community provides a "Sandbox" environment for all developers to use (free of charge). The Developer Sandbox provides you with a CloudTv H5 Server Stack(non-production) and a FTP account where you can upload your app code and assets. This allows you to test your application on the CloudTV platform.

In order to create a Sandbox account, you must be a member of the Developer Community. If you have not yet registered please Create An Account

sandboxScreen

In the "Create a Sandbox Account" area, you must enter a username and password that will be used to create your Sandbox FTP account. (These can be the same as your Developer Community entries, if you wish.) When you have created your account you will see a welcome message and your sandbox access information will populate the account area(shown in the accompanying image).

3

Test CloudTV Player

First we will test CloudTV Player by viewing a publicly-accessible website (developer.activevideo.com/samples/planetarium/demo.html). In this test you will get a chance to see how the platform renders the HTML from yahoo.com, use directional navigation on the remote, and view the video stream that the platform sends to the player.

  1. Copy the Server URL from the Sandbox account page to the Server URL field on CloudTV Player.

    player-url

  2. Type the website address into the App URL (http://developer.activevideo.com/samples/planetarium/demo.html).
  3. Click the green arrow to the right of the App URL.  The demo website should display in the Player. Take a moment to navigate the site with both the left/right arrows on your keyboard, as well as the left/right arrows on the virtual remote within CloudTV Player.

4

Test An Application On CloudTV

Now that your all set up, we will start with a simple HTML5 application that will demonstrate directional navigation, and get you familiar with testing your apps in the developer Sandbox.

Basic Application

We have provided a simple application for you to test on CloudTV Player. Copy the following code to a file named "hellocloudtv.html". This application will display a screen with two buttons that you can navigate through using the directional buttons on the CloudTV Player Remote.

<html>    <link rel="stylesheet" type="text/css" href="http://developer.activevideo.com/samples/getstarted/css/styles.css" \>    <body class="hd">        <div class="safezone">            <header>                <h1>Get Started With CloudTV</h1>            </header>            <section class="buttonsection">                <button id="button1">Cloud On</button>                <button id="button2">Cloud Off</button>            </section>            <section class="hellosection">                <div id="cloud" class="cloudOn">                    Hello CloudTV!                </div>            </section>        </div>    </body>    <script>        var cloud = document.getElementById("cloud");        var onLoad = function() {            document.getElementById('button1').focus();        }        var onKey = function(evt) {            console.log("Key pressed", evt.keyCode, evt.target, evt);            switch(evt.keyCode) {                case 37:                    //user pressed the Left button                    document.getElementById('button1').focus();                    cloud.setAttribute("class","cloudOn");                    break;                case 39:                    //user pressed the Right button                    document.getElementById('button2').focus();                    cloud.setAttribute("class","cloudOff");                    break;                case 13:                    //user pressed Enter                    console.log("Enter Pressed");                    break;            }        }        window.addEventListener('load', onLoad);        window.addEventListener('keydown', onKey);    </script></html>

Add Your Application To The Developer Sandbox

In order to add your app to the Sandbox, you need to use a secure FTP utility. If you don't have one and need help installing a secure FTP utility, read the Step By Step Guide.

1. Connect To Your Sandbox FTP account.

To upload files to your Sandbox account open your secure FTP client application and enter the following settings/account details to establish a connection:

Your sandbox account has not been created yet

Please Login to view your sandbox account FTP information

2. Upload your app to the SandBox

Now that your ftp application is connected to the server, upload the "hellocloudtv.html" app to the Sandbox.

**If you are not sure how to do this, please consult your ftp application documentation on transferring files to a server.

Run Your App On CloudTV Player

Point CloudTV Player to your Sandbox.

  1. In the Server URL field, make sure the URL of the Sandbox server is inserted.
  2. In the App URL, copy and paste the App URL from your Sandbox account.  Then to the end of that path, add "hellocloudtv.html" or the specific folder and filename of your app.

player-0

3. Click the green right arrow on the CloudTV Player (above the remote control).

player-3d

The Hello CloudTV html app should be streaming to CloudTV Player.

Navigate the app with your keyboard (U/D/L/R) or using the built-in remote.

/samples/planetarium/demo.html

Whats Next?

Having successfully tested an application on CloudTv, you may be ready to begin building your own HTML5 application. If you want to look into more advanced topics and what makes our platform unique, take a look at the recommended articles below.

Learn How CloudTV Works

In order to get access to the Tools, Sandbox, and Example Code please Create An Account

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved