mobcamp 2014 :: chromecast seu aplicativo na tv - ivan de aguirre

Chromecast

Ivan de Aguirre @IvAguirre

ivan.aguirre@gmail.com

Seu aplicativo na TV

Cast

Sender:

Sender:Android, iOS, Chrome App

Receiver:Sender:

Android, iOS, Chrome App

Receiver:HTML5Sender:

Android, iOS, Chrome App

Workflow

Workflow• Descobrir o Chromecast.

Workflow• Descobrir o Chromecast.• Definir CC como a Rota.

Workflow• Descobrir o Chromecast.• Definir CC como a Rota.• Iniciar uma Sessão (session ID).

Workflow• Descobrir o Chromecast.• Definir CC como a Rota.• Iniciar uma Sessão (session ID).• CC carrega o Receiver (app ID).

• Envio de mensagens ao CC através de um Canal.

• Envio de mensagens ao CC através de um Canal.

• Callbacks.

O que enviar para o Receiver pelos Canais?

O que enviar para o Receiver pelos Canais?

Texto (Custom Channel)

O que enviar para o Receiver pelos Canais?

Texto (Custom Channel)

URL e Metadados: Fotos, Vídeos, etc. (Media Chanel)

Posso enviar conteúdo diretamente pelo Media Channel?

Posso enviar conteúdo diretamente pelo Media Channel?

Precisa iniciar um Web Server no

Dispositivo :/

Antes de tudo…

Antes de tudo…

developers.google.com/cast

Antes de tudo…

developers.google.com/cast

User Experience Guidelines

Antes de tudo…

developers.google.com/cast

User Experience Guidelines

Design Checklist

Implementando um Android Sender

Implementando um Android Sender

com.android.support:appcompat-v7:20.+

Implementando um Android Sender

com.android.support:appcompat-v7:20.+

Implementando um Android Sender

com.android.support:appcompat-v7:20.+

com.android.support:mediarouter-v7:20.+

Implementando um Android Sender

com.android.support:appcompat-v7:20.+

com.android.support:mediarouter-v7:20.+

Implementando um Android Sender

com.android.support:appcompat-v7:20.+

com.android.support:mediarouter-v7:20.+

com.google.android.gms:play-services:+

Implementando um Android Sender

Implementando um Android Sender• Botão de Cast na Action Bar.

Implementando um Android Sender• Botão de Cast na Action Bar.

• Media Router API e Google Services API: Callbacks, Callbacks everywhere!!

Implementando um Android Sender• Botão de Cast na Action Bar.

• Media Router API e Google Services API: Callbacks, Callbacks everywhere!!

• Gerenciar estado da Sessão. Ex.: recriação da Activity, destruição da

Activity, kill do processo, oscilações na conexão Wifi, etc..

Implementando um Android Sender• Botão de Cast na Action Bar.

• Media Router API e Google Services API: Callbacks, Callbacks everywhere!!

• Gerenciar estado da Sessão. Ex.: recriação da Activity, destruição da

Activity, kill do processo, oscilações na conexão Wifi, etc..

• Dica 1: se for uma Activity só mantenha os objetos pertinentes em um

Fragment com setRetainInstance(true).

Implementando um Android Sender• Botão de Cast na Action Bar.

• Media Router API e Google Services API: Callbacks, Callbacks everywhere!!

• Gerenciar estado da Sessão. Ex.: recriação da Activity, destruição da

Activity, kill do processo, oscilações na conexão Wifi, etc..

• Dica 1: se for uma Activity só mantenha os objetos pertinentes em um

Fragment com setRetainInstance(true).

• Dica 2: várias Activity use um Foreground Service ou um Objeto com dados

static.

Implementando um Android Sender• Botão de Cast na Action Bar.

• Media Router API e Google Services API: Callbacks, Callbacks everywhere!!

• Gerenciar estado da Sessão. Ex.: recriação da Activity, destruição da

Activity, kill do processo, oscilações na conexão Wifi, etc..

• Dica 1: se for uma Activity só mantenha os objetos pertinentes em um

Fragment com setRetainInstance(true).

• Dica 2: várias Activity use um Foreground Service ou um Objeto com dados

static.

Implementando um Android Sender• Botão de Cast na Action Bar.

• Media Router API e Google Services API: Callbacks, Callbacks everywhere!!

• Gerenciar estado da Sessão. Ex.: recriação da Activity, destruição da

Activity, kill do processo, oscilações na conexão Wifi, etc..

• Dica 1: se for uma Activity só mantenha os objetos pertinentes em um

Fragment com setRetainInstance(true).

• Dica 2: várias Activity use um Foreground Service ou um Objeto com dados

static.

github.com/googlecast/CastCompanionLibrary-android

CastCompanionLibrary Ex!

private VideoCastManager mVideoCastMgr;!!

protected void onCreate(Bundle ! savedState){! (…) ! ! mVideoCastMgr.reconnectSessionIfPossible(! this, true, 5 /*seconds*/);!}!!

CastCompanionLibrary ExDbxChooser.Result result = new DbxChooser.Result(data);!Uri link = result.getLink();!!MediaMetadata mediaMetadata =! new MediaMetadata(MediaMetadata.MEDIA_TYPE_MOVIE);!mediaMetadata.putString(MediaMetadata.KEY_TITLE, ! result.getName());!mediaMetadata.putString(MediaMetadata.KEY_SUBTITLE,! "Some text");!(…)!MediaInfo mediaInfo = new MediaInfo.Builder(link.toString())! .setContentType("video/mp4")! .setStreamType(MediaInfo.STREAM_TYPE_BUFFERED)! .setMetadata(mediaMetadata)! .build();!!mVideoCastMgr! .startCastControllerActivity(this, mediaInfo, 0, true);!

Receiver

Receiver• Default Receiver

Receiver• Default Receiver

• Styled Media Receiver

Receiver• Default Receiver

• Styled Media Receiver

• Custom Receiver

Receiver• Default Receiver

• Styled Media Receiver

• Custom Receiver

• cast.google.com/publish

Styled Receiver

Custom Receiver<html>!<head>! <title>Example minimum receiver</title>! <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>!</head>!<body>! <video id='media'/>! <script>! window.onload = function() {! window.mediaElement = document.getElementById('media');! window.mediaManager = new ! cast.receiver.MediaManager(window.mediaElement);! window.castReceiverManager = ! cast.receiver.CastReceiverManager.getInstance();! window.castReceiverManager.start();! }! </script>!</body>!

Mirror & Presentation

Mirror

Mirror

Presentation

Presentation• É preciso estar em Mirror.

Presentation• É preciso estar em Mirror.

• Layout exibido somente na

tela de Mirror.

class DemoPresentation extends Presentation {!!

public DemoPresentation(Context context, ! Display display) {! super(context, display);! }!!

@Override! protected void onCreate(Bundle savedState{! super.onCreate(savedInstanceState);! setContentView(R.layout.test_secondary);! (…)! }

RouteInfo route = mMediaRouter.getSelectedRoute(! MediaRouter.ROUTE_TYPE_LIVE_VIDEO);! Display presentationDisplay =! route != null ? route.getPresentationDisplay() : null;!! if (mPresentation != null! && mPresentation.getDisplay() != presentationDisplay) {! mPresentation.dismiss();! mPresentation = null;! }!! if (mPresentation == null && presentationDisplay != null) {! mPresentation = new DemoPresentation(this, ! presentationDisplay);! mPresentation.setOnDismissListener(mOnDismissListener);! try {! mPresentation.show();! } catch (WindowManager.InvalidDisplayException ex){! Log.w(TAG, "Display was removed.", ex);! mPresentation = null;! }! }

Lembrando…

iOS

Google Chrome

Mãos à Obra!!

developers.google.com/cast

github.com/googlecast

github.com/ivan-aguirre/chromecast_samples

Comunidade G+: Google Cast Developers

Obrigado!!

@IvAguirre

ivan.aguirre@gmail.com

Cast your question :)