Chromecast na Qcon RJ

Seu App na TV: Desenvolvimento para ChromeCast

Ivan de Aguirre [email protected] !Twitter: IvAguirre !G+: plus.google.com/+IvanAguirreBr

mailto:[email protected]

http://plus.google.com/+IvanAguirreBr

Sender App:

Sender App:Android

Sender App:Android

iOS

Sender App:Android

iOSChrome App

Sender App:Android

iOSChrome App

Receiver App:

Sender App:Android

iOSChrome App

Receiver App:HTML 5

Sender App:Android

iOSChrome App

Receiver App:HTML 5<video>

Sender App:Android

iOSChrome App

Receiver App:HTML 5<video>Registro

Sender App:Android

iOSChrome App

Receiver App:HTML 5<video>Registro

Application ID = URL

Workflow em detalhes


• Descoberta do Chromecast.



• (Re)Conexão com o Chromecast: sessionID.




• Envio do Application ID ao Chromecast.





• Chromecast acessa a URL do Application ID: Receiver App no ar!!






• Sender envia a URL para o vídeo (media channel) e/ou…







• Envia texto (custom channel).







• Envia texto (custom channel).

• Callbacks, callbacks, callbacks, callbacks…

Por dentro do Chromecast


• Chrome Browser.


• Chrome Browser.

• HTML5, CSS 3, JavaScript.


• Chrome Browser.


• Limitações de memória e CPU.


• Chrome Browser.



• Sem WebGL ou Chrome Extensions.


• Chrome Browser.




• Nada de Tabs, janelas, popups ou inputs.


• Chrome Browser.





• Suporte à WebAudio API.


• Chrome Browser.





• Suporte à WebAudio API.

• Uma tag <video> ativa por vez.

developers.google.com/cast !

developers.google.com/cast/docs/ux_guidelines

!

developers.google.com/cast/docs/design_checklist

Sender

com.android.support:appcompat-v7

!

com.android.support:mediarouter-v7

!

com.google.android.gms:play-services

Sender

GoogleApiClient.ConnectionCallbacks GoogleApiClient.OnConnectionFailedListener MediaRouter.Callback Cast.Listener ResultCallback<Cast.ApplicationConnectionResult> RemoteMediaPlayer.OnStatusUpdatedListener RemoteMediaPlayer.OnMetadataUpdatedListener ResultCallback<RemoteMediaPlayer.MediaChannelResult>

Sender

GoogleApiClient.ConnectionCallbacks GoogleApiClient.OnConnectionFailedListener MediaRouter.Callback Cast.Listener ResultCallback<Cast.ApplicationConnectionResult> RemoteMediaPlayer.OnStatusUpdatedListener RemoteMediaPlayer.OnMetadataUpdatedListener ResultCallback<RemoteMediaPlayer.MediaChannelResult>

Sender

github.com/googlecast/CastCompanionLibrary-android

http://github.com/googlecast/CastCompanionLibrary-android

Sender + CastCompanionLibrary

public class MyApplication extends Application { private static VideoCastManager mCastMgr; public static VideoCastManager getVideoCastManager(Context ctx) { if (null == mCastMgr) { ! mCastMgr = VideoCastManager.initialize(ctx, "XYZ1234", null, /* activity com player */ null /* namespace */); mCastMgr.enableFeatures(… ! } mCastMgr.setContext(ctx); return mCastMgr; } }


public class MainActivity extends ActionBarActivity { private VideoCastManager mVideoCastManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); BaseCastManager.checkGooglePlayServices(this); mVideoCastManager = MyApplication.getVideoCastManager( this); mVideoCastManager.reconnectSessionIfPossible(this, true, 5 /*sec*/); } }


public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); ! getMenuInflater().inflate(R.menu.main, menu); ! mVideoCastManager.addMediaRouterButton(menu, R.id.media_route_menu_item); ! return true; }


MediaMetadata mediaMetadata = new MediaMetadata(MediaMetadata.MEDIA_TYPE_MOVIE);

mediaMetadata.putString(MediaMetadata.KEY_TITLE,

"Title: Chromecast na QCON RJ 2014");

mediaMetadata.putString(MediaMetadata.KEY_SUBTITLE, "");

mediaMetadata.putString(MediaMetadata.KEY_STUDIO,

"Ivan de Aguirre Productions");

MediaInfo mediaInfo = new MediaInfo.Builder(

"https://d2k4ls0ga9ks2.cloudfront.net/VID_20140727_225510282.mp4")

.setContentType("video/mp4")

.setStreamType(MediaInfo.STREAM_TYPE_BUFFERED)

.setMetadata(mediaMetadata)

.build();

mVideoCastManager.startCastControllerActivity(this, mediaInfo, 0, true);

Receiver

Receiver

• Default Receiver.

Receiver


• Styled Receiver.

Receiver


• Styled Receiver.

• Custom Receiver.

Custom Receiver Mínimo

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

...

</script>

</body>

</html>

Custom Receiver Mínimo

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

Exemplo 1

Exemplo 1

• Custom Receiver para exibir propaganda e notificações no telefone.

Exemplo 1


• Envia URL do vídeo pelo Media Channel.

Exemplo 1



• Envia texto pelo Custom Channel com as notificações.

Exemplo 1



• Envia texto pelo Custom Channel com as notificações.

• No Receiver exibe propagandas.

Exemplo 1 - Sender

public class MyApplication extends Application { private static VideoCastManager mCastMgr; public static VideoCastManager getVideoCastManager(Context ctx) { if (null == mCastMgr) { mCastMgr = VideoCastManager.initialize(ctx, "XYZ1234", "urn:x-‐cast:org.gcastsamples.castnotifications"); // configurar opções... } ! mCastMgr.setContext(ctx); return mCastMgr; } }

Exemplo 1 - Senderpublic class MyNotificationListenerService extends NotificationListenerService { @Override public void onNotificationPosted(StatusBarNotification statusBarNotification) { String msg = String.valueOf( statusBarNotification.getNotification().tickerText); ! try { ! MyApplication.getVideoCastManager(getApplicationContext()) .sendDataMessage(msg); ! } catch (TransientNetworkDisconnectionException e) { Log.e("NotificationListenerService", "Can't send message", e); } catch (NoConnectionException e) { Log.e("NotificationListenerService", "Can't send message", e); } } }

Exemplo 1 - Receiver

<div id="notification_banner" class="alert alert-‐info" role="alert">

<h4>New Notification from your phone!!</h4>

<p id="notification_text">Test!!!</p>

</div>

!

<div id="ad_banner" class="alert alert-‐warning" role="alert">

<h4 id="ad_text">New Notification from your phone!!</h4>

</div>

!

<video id="media"/>


window.mediaElement = document.getElementById('media');

window.mediaElement.addEventListener('playing', function(event) {

advertising.start();

});

!window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);

window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();

!window.castReceiverManager.onSenderDisconnected = function(event) {

if (window.castReceiverManager.getSenders().length == 0 &&

event.reason == cast.receiver.system.DisconnectReason.REQUESTED_BY_SENDER) {

advertising.stop();

window.close();

}


var nms = 'urn:x-‐cast:org.gcastsamples.castnotifications';

var customMessageBus = window.castReceiverManager .getCastMessageBus(nms);

customMessageBus.onMessage = function(event) { showNotification(event.data); }

window.castReceiverManager.start();

Exemplo 2

Exemplo 2

• Custom Receiver para exibir um gráfico.

Exemplo 2


• www.flotcharts.org

Exemplo 2



• A página do Custom Receiver quando acessada pelo Chromecast é um Receiver.

Exemplo 2



• A página do Custom Receiver quando acessada pelo Chromecast é um Receiver.

• A página do Custom Receiver quando acessada pelo Browser é uma aplicação Web.

Exemplo 2

Exemplo 2 - Sender

public class MyApplication extends Application { ! private static DataCastManager mCastMgr; public static final String NAME_SPACE = "urn:x-‐cast:org.gcastsamples.plotandcast"; public static DataCastManager getDataCastManager(Context ctx) { if (null == mCastMgr) { mCastMgr = DataCastManager.initialize(ctx,"XYZ123", NAME_SPACE); } ! mCastMgr.setContext(ctx); return mCastMgr; } }

Exemplo 2 - Sender

String json = getData();

!

mDataCastManager.sendDataMessage(

json, MyApplication.NAME_SPACE);


<body> <form id="plot_inputs">

…

</form>

<div id="content">

<div class="chart-‐container">

<div id="placeholder" class="chart-‐placeholder"></div>

</div>

</div>

</body>


if (navigator.userAgent.indexOf('CrKey') >= 0) { ! $('#plot_inputs').hide(); // form inputs $('.chart-‐container').addClass('chart-‐container-‐for-‐tv'); ! startChromeCastMode(); !} else { ! startBrowserMode(); !}


function startChromeCastMode() { window.onload = function() { window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); var nms='urn:x-‐cast:org.gcastsamples.plotandcast'; var customMessageBus = window.castReceiverManager.getCastMessageBus(nms); customMessageBus.onMessage = function(event) { var json = $.parseJSON(event.data);; plot(json); } window.castReceiverManager.start(); } }

Mirror e Presentation


• Transmissão de Tela (Mirroring).



• Presentation API: API Level 17, Android 4.2+:




• Em modo Mirror renderizar um Layout na TV (não há receiver).





• Wireless Display.






• Suporta Miracast.







• E Chromecast :)







• E Chromecast :)

• Plugin do Chromecast para Chrome: espelha aba e tela.



Exemplo 3 - Mirror e Presentation


•Aplicação insere elementos em uma lista.


•Aplicação insere elementos em uma lista.•A lista é renderizada e manipulada na TV.


•Aplicação insere elementos em uma lista.•A lista é renderizada e manipulada na TV.•Não é casting!!

Exemplo 3 - Mirror e Presentationpublic class ListPresentation extends Presentation { private RecyclerView mRecyclerView; private RecyclerView.LayoutManager mLayoutManager; private MyAdapter mAdapter; public ListPresentation(Context context, Display display) { super(context, display); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Context ctx = getContext(); Resources r = ctx.getResources(); setContentView(R.layout.presentation); mRecyclerView = (RecyclerView) findViewById(R.id.list); mLayoutManager = new LinearLayoutManager(ctx); mRecyclerView.setLayoutManager(mLayoutManager); mRecyclerView.setItemAnimator(new DefaultItemAnimator()); mAdapter = new MyAdapter(); mRecyclerView.setAdapter(mAdapter); } ...

MediaRouter mMediaRouter = (MediaRouter)getSystemService(Context.MEDIA_ROUTER_SERVICE); MediaRouter.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 ListPresentation(this, presentationDisplay); mPresentation.setOnDismissListener(mOnDismissListener); try { mPresentation.show(); } catch (WindowManager.InvalidDisplayException ex) { Log.w(TAG, "Display was removed in the meantime.", ex); mPresentation = null; } }




android.media.MediaRouter não é app compact!!



android.media.MediaRouter não é app compact!!

ROUTE_TYPE_LIVE_AUDIO

Chrome Sender

Chrome Sender

Chrome Sender

Developer Tools: <chromecast ip>:9222



• window.location.reload(true);

http://myhost.com/receiver.html'


• window.location.reload(true);

• window.location.replace('http://myhost.com/receiver.html');

http://myhost.com/receiver.html'

FAQ

FAQ

• Sender/Receiver: HTTPS.

FAQ


• URL do Receiver: HTTP em desenvolvimento, HTTPS em produção.

FAQ



• Múltiplas conexões ao receiver.

FAQ




• Segurança: é preciso implementar os mecanismos.

FAQ





• Media Player Library (Beta): Live Streaming, MPEG-DASH, Smooth Streaming, DRM, etc..

FAQ






• CORS.

FAQ






• CORS.

• Não esqueçam do iOS :)

Futuro

Futuro

• Google TV?

Futuro

• Google TV?

• Chrome OS: integração no Google Drive na build de desenvolvimento.

Futuro

• Google TV?

• Chrome OS: integração no Google Drive na build de desenvolvimento.

• Conexão fora da mesma rede Wifi.

Referências

developers.google.com/cast

cast.google.com/publish

github.com/googlecast

code.google.com/p/google-cast-sdk/issues/list

github.com/ivan-aguirre/chromecast_samples

ivan-aguirre.github.io/ccast-graph/receiver.html

ivan-aguirre.github.io/video-ccast-player/receiver.html

G+: Google Cast Developers

Seu App na TV: Desenvolvimento para ChromeCast

Obrigado!! Cast your questions :)

Ivan de Aguirre !

[email protected] !

Twitter: IvAguirre !

G+: plus.google.com/+IvanAguirreBr

Mobile

Chromecast na Qcon RJ