Viggle on the 1st screen (Part 2)

May 15th, 2014 by Boris Kizelshteyn

Here’s the 2nd half of my Viggle on the 1st Screen post, where we will review how the different HTML5 platforms stack up:

DIRECTV

Many in the connected TV industry will remember the SHEF API that allowed developers to interface directly with DTV’s set-top boxes via http. While revolutionary for 2011, it lacked the ability for a developer to actually display their content onscreen. Enter The DIRECTV Developer Program that provides an interface not only to the set top box itself, but to DTV web services and most relevant to this post, the ability to run HTML5 applications right on the big screen.

So how would we use this interface to show Viggle content? We’d allow the user to sign in to their Viggle account on the web as we have unfettered Internet connectivity through the set-top box. Once the user has signed in, we can use a native javascript object called the Navigator (note link requires DIRECTDEV.COM account) to get at both the set-top box identity string and the box’s MAC address. These strings could be associated with the user’s account and allow them to auto login next time or otherwise identify the association with the box. Next up, What’s On? DIRECTV offer a conveniently named Channel object which when invoked from javascript has the ability to report what channel the user is on and to navigate them elsewhere on the “dial”. An especially cool feature of the Channel object is the ability to set a callback, via theONCHANNELTUNEDEVENT() method, on a specific channel to let you the developer know when the user has tuned to a certain channel. Viggle could use this to remind people to check into a show they’ve been watching for a few minutes. Cookies allow for client-side persistence of identity and https calls are allowed. One small gotcha of the platform is that the total app memory size is capped at 18mb (without images), so we’d be using frameworks judiciously.

SAMSUNG

The maker of the most connected TVs in actual consumer homes maintains a massive developer portal called the SAMSUNG D Forum. Here they offer developers an equally massive SDK which contains its own IDE and TV emulator as well as a collection of tools and docs. At the end of the day, it’s an HTML5 app, but it’s worth a minutes’ digression to summarize Samsung’s paradigm.

HTML5 applications on Samsung connected TVs employ  what they call a scenes mechanism: a packaged set of HTML pages and related assets uploaded into (and served from within) the Samsung ecosystem make asynchronous cross-domain javascript calls to pull and push data. Each “scene” represents a screen and an application may contain as many of these scenes as a developer requires. Only one scene can have focus at a time and thereby receive the commands from an input device.

To accomplish our desired functionality, we would start again by allowing a user to sign in to their Viggle account over the web, but with a neat Samsung twist on the idea of SSO: When a signup form is created according to their spec, the first time a user enters their credentials they are saved in association with the user’s Samsung account and all subsequent logins are transparent. After that it is a matter of including Samsung’s handy javascript library which provides the tv.channel control, capable of providing information on what the user is currently watching and the lineup available to them. Finally, Samsung Framework 2.0 offers command over local storage and other useful browser features using the sf.core class.


SONY (w/ Google TV)

Sony relies on its partnership with Google for delivering its connected TV experience to customers. As such, apps running on the Sony TV platform are really Google Android apps and not HTML5. However, thanks to the magic of Cordova (formerly Phonegap), HTML5 content can be ported to the Sony/Google platform. Combined with Sony’s device API extending the base GoogleTV API, an attractive platform for delivering interactive TV experiences emerges.

Obviously Cordova development is out of scope for this blog post, but for our purposes, developing a Sony HTML5 TV app is conceptually similar to SAMSUNG in that a root physical HTML document and supporting libraries are packaged into a single app that reacts to TV input and content. Our authentication would be web based and managed internally in the app. Once installed the app would have information about the TV provider and available channels via the Channel Listing ProviderThe channel information is in URI form and can be passed to the Live TV Player component thereby changing the channel. Note that program information does not seem to be available to the platform and will need to be queried elsewhere based on the channel information available.

Some other cool features of the platform are that GCM is available, allowing push notifications that can be displayed on the big screen, say to remind the user to switch channels to that show they set a reminder for on NextGuide and the expanded gestures library so users of the cool Sony GesturePad remote can navigate our app.

Since Viggle has an Android app, we would likely evaluate the relative value of building an HTML5 version of the app via Cordova or simply porting our existing code to Google TV, but it’s good to have options.


LG

LG has recently been making headlines in the industry with The Connect SDK, what’s being billed as a “Rosetta Stone” library capable of connecting any mobile app to any TV Platform. Cool as that is, I’ve been tracking LG’s work in the connected TV space for a while now and they have an evolving platform called NetCast for running apps right on their devices.

Similar to Samsung and Sony, packaged HTML5 assets that have access to privileged “plugins” when run in the LG TV environment, constitute the app paradigm and an SDK provides support for creating, packaging and testing a developer’s app. Users can log into the device via what LG calls “Membership and developers can access this member data via the Member plugin and associate it with their native accounts. We might also use the extensive data LG makes available about the device via the Device plugin to identify a user. We can then use the Broadcast plugin to identify what the user is watching and tune the channel. A neat feature of the LG connected TV is voice recognition, which is exposed to the app developer via the Voice Recognition
plugin.

In conclusion, these platforms are all pretty fragmented in terms of how they use HTML5 to achieve similar interactions, to be sure. But, having a single technology that achieves similar interactions across diverse platforms means that a single product concept can be implemented by the same team across all these platforms. In a world that arcs towards fragmentation, this may be as close to convergence that we can get.

Written by Boris Kizelshteyn

Boris Kizelshteyn

Boris is Senior Product Manager at Viggle. He loves TV, but because he loves his job and family even more, he can only follow one show at a time. Right now that’s Girls.