Getting Started with Chromecast on Visualforce

About a month ago, Google released the Google Cast SDK, allowing developers to create apps that run on the Chromecast, a $35 digital media player. The primary use case of Chromecast is to stream media – movies, TV shows, music and the like – via wifi to your HDMI TV/monitor, but, looking at the SDK docs, it became apparent that the Chromecast is actually a miniature (‘system-on-chip‘) computer running Chrome OS (a Linux variant) and the Chrome browser. If it’s running a browser, I wondered, could it load Visualforce pages from Salesforce and display, for example, a chart based on live data? If so, this would allow any HDMI-capable TV or monitor to be used as a dashboard at very low cost. When I was given a Chromecast by a colleague (thanks, Sandeep!) in return for alpha testing his app, I decided to find out!

This first blog post explains how I ran a simple ‘Hello World’ sample on the Chromecast, loading the app from Visualforce. Next time, I’ll show you how I pulled data from Salesforce via the REST API and showed it as a chart.

Chromecast

Chromecast setup was pretty straightforward – a matter of connecting the device to an HDMI input on my TV and a USB power source, downloading and running the Chromecast app, and following the prompts to complete setup. The Chromecast app locates the device on the local network using the DIAL protocol. Note that, since the app is communicating directly with the device, it won’t work on wifi networks that enforce AP/Client Isolation (many offices and hotels).

After installing the Cast Extension for Chrome and verifying that the Chromecast could display content from YouTube, it was time to put the device into development mode! This actually proved to be pretty tricky – you need to enter the Chromecast’s serial number into the Google Cast SDK Developer Console. Sounds straightforward, but the serial number is laser etched into the Chromecast’s black plastic case in very small type indeed. I entered it incorrectly the first time round, and had to take a photo of the serial number and zoom in to see that the last character was an S and not an 8!

Serial

Another gotcha I encountered is that it’s necessary to go into the Chromecast settings (in the Chromecast app) and enable Send this Chromecast’s serial number when checking for updates. This information is on a separate page from the device registration instructions, so it’s easy to miss.

Now my Chromecast showed up in the developer console, it was time to get an app running. Since the Chromecast has no input devices (keyboard, mouse, etc), a ‘receiver app‘ running in an HTML5 page on the device is controlled by a ‘sender app‘ running on a ‘second screen’ such as a laptop, smartphone or tablet. The two apps are connected over the local network by a message bus exposed by the Google Cast SDK.

Diagram

Looking through the samplesCastHelloText-chrome looked like the simplest example of a custom receiver. In the sample, the sender app, running on an HTML5 page in Chrome, allows you to enter a message (‘Hello World’ is traditional!) and sends it on the bus. The receiver app displays the message, and reflects it back to the sender, to demonstrate the bidrectional nature of the bus.

It was straightforward to convert the vanilla HTML pages to Visualforce – the first change was to wrap the entire page in an tag and remove the DOCTYPE, since Visualforce will supply this when it renders the page.

<apex:page docType="html-5.0" applyHtmlTag="false" applyBodyTag="false"
           showHeader="false" sidebar="false" standardStylesheets="false"
           cache="false">
<!-- <!DOCTYPE html> -->
<html>
...rest of the page...
</html>
</apex:page>

Visualforce doesn’t like HTML attributes with no value, so, in chromehellotext, I changed

<input id="input" type="text" size="30" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech/>

to

<input id="input" type="text" size="30" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech="true"/>

Adding the Visualforce pages to a Force.com Site made them public on the web. This is important – the Chromecast can only load public web pages – it has no way of authenticating to a server. You’ll find out in the next blog post how I was able to access the Force.com REST API to securely retrieve content.

Once I had a pair of public pages, I registered my sample app, entering the public URLs for my Visualforce pages, and pasted the resulting app ID into the chromehellotext page. Loading that page gave me a text control into which I could type a message. Hitting return to submit the message pops up the Cast device selector.

HelloSender

I selected my device from the list, and – ‘BAM!’ – my message popped up on the TV screen – success!

HelloChromecast

One very nice feature of the Chromecast is that it allows remote debugging in Chrome. You can find the device’s IP address in the Chromecast app, say 192.168.1.123, and simply go to port 9222 at that address, in my example, http://192.168.1.123:9222/.

Debugger

You get the usual Chrome developer tools, right down to the ability to set breakpoints and inspect variables in JavaScript – marvelous!

Breakpoint

I’ve published the sample app, so you can try it out yourself. If you have a Chromecast, go to my sender app page; you should be able to connect to your device and send a message.

At this point, I had to do some thinking. The Chromecast, as I mentioned before, loads a page from a public web server. How could I show data on the page, preferably without making the data itself publicly available? Read on to the next post!

Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.

Mmmm – VMware

You just have to love VMware… I’m now syncing the Clie via USB to Palm Desktop on Windows XP, running on VMware, running on Java Desktop System.
Now, logically, these are all just layers of software, and it should all just work, but I’m still pretty amazed when it does!

Sony Clie PEG-TH55

Writing this on my new (well, factory reconditioned from ebay) Sony Clie TH55. Loving it. Wifi is great! So far, the only downer is Graffiti 2. Why did they mess with something that worked!!??

Linksys WRT54GP2 VOIP/Wireless/Broadband Router

Following up to my recent post on Lingo VOIP, Tom’s Networking has an interesting review of the Linksys WRT54GP2 VOIP/wireless/broadband router. I’ve been a happy user of the WRT54G for a couple of years now, so this box looks very interesting – it can prioritize VOIP traffic over data traffic just like the standard Lingo adapter, solving my only issue with Lingo.
All I have to do now is persuade Lingo to support it.

Lingo VOIP

Not sure if Lingo counts as a toy, but it’s certainly a gadget. For $19.95 a month you get unlimited calls to the USA, Canada and Western Europe. For Brits Abroad in the US this is a great deal. I got Lingo in November and it’s working out just fine. Basically, you get a box. This box has two ethernet sockets, a phone socket and a power socket. You connect the box to your cable/DSL modem on one of the ethernet sockets, your PC on the other ethernet socket, plug in a phone and plug in the power. Wait about 30 seconds as the box comes up and the lights flash. When you see the VOIP light, you can pick up the phone and you have dial tone.

Of course, with a nerd score of 97, I couldn’t possibly settle for the default config, now, could I? I have mine configured with a static IP, sitting on an ethernet switch, which is connected to a wifi bridge, which is talking to my wifi router, which in turn is connected to the cable modem. And it still ‘just works’. I’ve been using it as my home office phone for three months now and the only problem I’ve had is when I’m sending large email attachments, the PC steals all the upstream bandwidth, and the person on the other end of the call can’t hear me. However, that’s a ‘feature’ of my particular setup – if you go with the default, the Lingo box is able to prioritise voice traffic over data and you won’t get this problem.

Bottom line – if you’re paying more than $20 a month for long distance/Western European calls, you need one of these. And if you write a comment with your email address, I can refer you to Lingo and we both get $25 off our bills. Can’t say fairer than that, now, can you?

Got my DVR!

Well, we’re probably the last people in Silicon Valley to do so, but we finally got a DVR (Digital Video Recorder). We’ve had cable (TV and internet) from Comcast since we arrived in California, but only got round to adding the DVR box last week.

So far, I have to admit, I’m impressed. It ‘just works’. I especially like the way that, if we’re a few minutes into a show, and something comes up (with a 3 year old and a 6 month old, something always comes up!) I can press record and it records the show. From the beginning – great!

As far as I can see, it doesn’t guess what you like and record it for you (like the Tivo box), but I’m not so sure I like that anyway. I don’t have time to watch the stuff I record myself, let alone someone else’s suggestions 🙂

Anyway – I’m off to catch up with Desperate Housewives – bye for now!