Building TV Apps with Chromecast

Home , Google Cast

Tomás Ruiz-López Software Design Manager at Everyware Technologies @tomasruizlopez

@everywaretech /everywaretech http://www.everywaretech.es What is? What is? What is?

+ What is?

+ = What is?

+ 35€ = Infrastructure Infrastructure Infrastructure Infrastructure Infrastructure

Same WiFi network Infrastructure

HDMI USB for power

Same WiFi network Infrastructure

HDMI USB for power Android, iOS, Same WiFi network web for Chrome App Lifecycle App Lifecycle App Lifecycle App Lifecycle

App ID App Lifecycle App ID

URL

App ID App Lifecycle App ID

URL URL

App ID App Lifecycle HTML App ID

URL URL

App ID App Lifecycle HTML App ID

URL URL

Data App ID channel App Lifecycle HTML App ID

URL URL

Limited Web Data App ID Browser channel Design Principles Design Principles

• No interactive elements • UI placed in the bottom third of the screen • Use transparency, don’t interfere with content Receiver App • Use transitions (fade-in, fade-out) Design Principles

• No interactive elements • UI placed in the bottom third of the screen • Use transparency, don’t interfere with content Receiver App • Use transitions (fade-in, fade-out)

• Support actions • Prefer portrait while casting, but work in both orientations Sender App • Always show the cast button Design Principles

• No interactive elements • UI placed in the bottom third of the screen • Use transparency, don’t interfere with content Receiver App • Use transitions (fade-in, fade-out)

• Support actions • Prefer portrait while casting, but work in both orientations Sender App • 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~25€

• Sender app: Google Play, App Store, your server ! • Receiver app: ‣ Default Media Receiver (no publishing) ! ‣ Styled Media Receiver (Google Cast) ~5€ ‣ Custom Receiver (Google Cast) Thanks for your attention! Questions?

Tomás Ruiz-López Software Design Manager at Everyware Technologies @tomasruizlopez

@everywaretech /everywaretech http://www.everywaretech.es Building TV Apps with Chromecast

Tomás Ruiz-López Software Design Manager at Everyware Technologies @tomasruizlopez

@everywaretech /everywaretech http://www.everywaretech.es