Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Chromecast Apps

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.)

The New York Times Developers

November 18, 2014
Tweet

More Decks by The New York Times Developers

Other Decks in Technology

Transcript

  1. Building
    Apps
    Maxwell Da Silva - Video Software Architect at NYTimes

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  4. https://cast.google.com/publish

    View full-size slide

  5. Receiver & Sender apps
    ● iOS
    ● Android
    ● Chrome
    Receiver Senders

    View full-size slide

  6. Application lifecycle

    View full-size slide

  7. Types of receiver apps
    Styled Media Receiver vs Custom Receiver

    View full-size slide

  8. What is a Receiver app?
    It’s an application written in Javascript/HTML/CSS
    that runs on the receiver (Chromecast)

    View full-size slide

  9. 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.

    View full-size slide

  10. Styled Media Receiver
    You can define a background style for your application:
    .background {
    background: #000000;
    }

    View full-size slide

  11. Styled Media Receiver
    You can add your logo:
    .logo {
    background-image: url(timesvideo_logo.png);
    }

    View full-size slide

  12. Styled Media Receiver
    You can add an transparent watermark image:
    .watermark {
    background-image: url(times_watermark.png);
    background-size: 57px 61px;
    opacity: 0.5;
    }

    View full-size slide

  13. Styled Media Receiver
    You can style your progress bar:
    .progressBar {
    background-color: #6288a5;
    }

    View full-size slide

  14. Styled Media Receiver
    You can also define a splash image:
    .splash {
    background-image: url(splash.png);
    }

    View full-size slide

  15. Live demo Styled Media Receiver

    View full-size slide

  16. Debugging your Receiver app

    View full-size slide

  17. Custom Receiver
    It’s also written in Javascript/HTML5/CSS.
    You have to host all the assets.

    View full-size slide

  18. Custom Receiver: Why?
    ● Build a second screen game
    ● Video application that require DRM
    ● Image gallery, Audio gallery
    ● All kinds of second screen experience

    View full-size slide

  19. Basic structure for an audio/video
    custom receiver

    View full-size slide

  20. Custom Receiver: DRM?
    There is a Media Player Library to support the DRM

    View full-size slide

  21. 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

    View full-size slide

  22. Receiver limitations
    ● Limited memory/CPU power
    ● Single concurrent playback experience
    ● No video compositions or manipulation such
    as, zooming or rotation.

    View full-size slide

  23. How many developers in our audience?

    View full-size slide

  24. Sender apps
    ● Android - Java
    ● Chrome - Javascript
    ● iOS - Objective C

    View full-size slide

  25. Chrome sender apps
    It’s also written in Javascript/HTML5/CSS.

    View full-size slide

  26. It’s time for live demo
    Live demo Chrome Sender app

    View full-size slide

  27. Resources
    ● https://developers.google.com/cast/
    ● http://chromecast.com/apps

    View full-size slide

  28. Questions?
    twitter:@dayvson
    email:[email protected]

    View full-size slide