Tomás Ruiz-LópezSoftware Design Manager at Everyware Technologies

@tomasruizlopez

@everywaretech /everywaretech

http://www.everywaretech.es

Building TV Apps with

Chromecast

What is?

What is?

What is?

+

What is?

+

What is?

+

=

What is?

+

=

What is?

+

=35€

Infrastructure

Infrastructure

Infrastructure

Infrastructure

Same WiFi network

Infrastructure

Same WiFi network

Infrastructure

Same WiFi network

Infrastructure

HDMI USB for power

Same WiFi network

Infrastructure

HDMI USB for power

Android, iOS, web for Chrome

App Lifecycle

App Lifecycle

App Lifecycle

App Lifecycle

App ID

App Lifecycle

App ID

App ID

App Lifecycle

App ID

App ID

URL

App Lifecycle

App ID

App ID

URLURL

App Lifecycle

App ID

App ID

URLURL

HTML

App Lifecycle

App ID

App ID

URLURL

HTML

Data channel

App Lifecycle

App ID

App ID

URLURL

HTML

Data channel

Limited Web Browser

Design Principles

Design Principles

Receiver App

• No interactive elements • UI placed in the bottom third of the screen • Use transparency, don’t interfere with

content • Use transitions (fade-in, fade-out)

Design Principles

Receiver App

• No interactive elements • UI placed in the bottom third of the screen • Use transparency, don’t interfere with

content • Use transitions (fade-in, fade-out)

Sender App

• Support actions • Prefer portrait while casting, but work in

both orientations • Always show the cast button

Design Principles

Receiver App

• No interactive elements • UI placed in the bottom third of the screen • Use transparency, don’t interfere with

content • Use transitions (fade-in, fade-out)

Sender App

• Support actions • Prefer portrait while casting, but work in

both orientations • Always show the cast button

Read Design Checklist at: https://developers.google.com/cast/docs/design_checklist

Dependencies• Android Support Library v7 !

• Android Support Media Router Library !

• Google Play Services !

• Cast Companion Library (optional)

Development• Sender app: Android, iOS, HTML (Chrome only) !

• Receiver app: ‣ Default Media Receiver (nothing to do) ‣ Styled Media Receiver (custom CSS) ‣ Custom Receiver (HTML + Javascript)

Sample Apps• Photowall for Chromecast !

!

!

!

!

!

!

• Google Cast GitHub https://github.com/googlecast

Sample Apps• Photowall for Chromecast !

!

!

!

!

!

!

• Google Cast GitHub https://github.com/googlecast

Publishing• Sender app: Google Play, App Store, your server !

• Receiver app: ‣ Default Media Receiver (no publishing)

!

‣ Styled Media Receiver (Google Cast) ‣ Custom Receiver (Google Cast)

Publishing• Sender app: Google Play, App Store, your server !

• Receiver app: ‣ Default Media Receiver (no publishing)

!

‣ Styled Media Receiver (Google Cast) ‣ Custom Receiver (Google Cast)

~25€

Publishing• Sender app: Google Play, App Store, your server !

• Receiver app: ‣ Default Media Receiver (no publishing)

!

‣ Styled Media Receiver (Google Cast) ‣ Custom Receiver (Google Cast)

~25€

Publishing• Sender app: Google Play, App Store, your server !

• Receiver app: ‣ Default Media Receiver (no publishing)

!

‣ Styled Media Receiver (Google Cast) ‣ Custom Receiver (Google Cast)

~25€

~5€

Tomás Ruiz-LópezSoftware Design Manager at Everyware Technologies

@tomasruizlopez

@everywaretech /everywaretech

http://www.everywaretech.es

Thanks for your attention!

Questions?

Tomás Ruiz-LópezSoftware Design Manager at Everyware Technologies

@tomasruizlopez

@everywaretech /everywaretech

http://www.everywaretech.es

Building TV Apps with

Chromecast