Building Chromecast Apps

Maxwell Da Silva, video architect, covered the entire Chromecast application workflow, including registering your app and developing, debugging, and publishing it. Attendees find out how the Chromecast user model works and learn more about the design principles of the platform. Get insights into the sender and receiver technology, which displays the content and metadata, and the mobile device or laptop, which controls the playback. Finally, using HTML5 and JavaScript, attendees see how easy it is to build a simple video player and, using Chromecast SDK, filing the content to receiver.

(Presented at Streaming Media West 2014.)

Transcript

1. Building Apps Maxwell Da Silva - Video Software Architect at NYTimes
2. What platform do I use to develop my apps? • iOS • Android • Chrome In order to publish an application, you need to subscribe to Chromecast. There’s a $5 fee.
3. Design apps for Chromecast • Your app is the remote • Cross platform => (Design your app to be easy to use) • Second screen experience • Connect and Play or Play and Connect • Don’t make your UI on TV look interactive
5. https://cast.google.com/publish
6. Receiver & Sender apps • iOS • Android • Chrome Receiver Senders
7. Application lifecycle
8. Types of receiver apps Styled Media Receiver vs Custom Receiver
9. What is a Receiver app? It’s an application written in Javascript/HTML/CSS that runs on the receiver (Chromecast)
10. Styled Media Receiver It’s a pre-built app hosted by Google that was built to playback audio or video content. You can provide a CSS file to customize the appearance of your app.
11. Styled Media Receiver You can define a background style for your application: .background { background: #000000; }
12. Styled Media Receiver You can add your logo: .logo { background-image: url(timesvideo_logo.png); }
13. Styled Media Receiver You can add an transparent watermark image: .watermark { background-image: url(times_watermark.png); background-size: 57px 61px; opacity: 0.5; }
14. Styled Media Receiver You can style your progress bar: .progressBar { background-color: #6288a5; }
15. Styled Media Receiver You can also define a splash image: .splash { background-image: url(splash.png); }
16. Live demo Styled Media Receiver
17. Debugging your Receiver app
18. Custom Receiver It’s also written in Javascript/HTML5/CSS. You have to host all the assets.
19. Custom Receiver: Why? • Build a second screen game • Video application that require DRM • Image gallery, Audio gallery • All kinds of second screen experience
20. Basic structure for an audio/video custom receiver
21. Custom Receiver: DRM? There is a Media Player Library to support the DRM
22. Supported media types Video Codecs: H.264, VP8 Audio Codecs: MP3, HE/LC-AAC, Vorbis, WAV Subtitles: WebVTT, TTML, CEA608 DRM: PlayReady, Widevine Adaptive Streaming: HLS, DASH, Smooth Streaming
23. Receiver limitations • Limited memory/CPU power • Single concurrent playback experience • No video compositions or manipulation such as, zooming or rotation.
24. How many developers in our audience?
25. Sender apps • Android - Java • Chrome - Javascript • iOS - Objective C
26. Chrome sender apps It’s also written in Javascript/HTML5/CSS.
31. It’s time for live demo Live demo Chrome Sender app
32. Resources • https://developers.google.com/cast/ • http://chromecast.com/apps
33. Questions? twitter:@dayvson email:dayvson@gmail.com