Slide 1

Slide 1 text

Building Apps Maxwell Da Silva - Video Software Architect at NYTimes

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

https://cast.google.com/publish

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Application lifecycle

Slide 8

Slide 8 text

Types of receiver apps Styled Media Receiver vs Custom Receiver

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Live demo Styled Media Receiver

Slide 17

Slide 17 text

Debugging your Receiver app

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Basic structure for an audio/video custom receiver

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

How many developers in our audience?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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