Seu App na TV: Desenvolvimento para ChromeCast

Transcrição

1 Seu App na TV: Desenvolvimento para ChromeCast Ivan de Aguirre! Twitter: IvAguirre! G+: plus.google.com/+ivanaguirrebr

2

3 Sender App:

4 Sender App: Android

5 Sender App: Android ios

6 Sender App: Android ios Chrome App

7 Sender App: Android ios Chrome App Receiver App:

8 Sender App: Android ios Chrome App Receiver App: HTML 5

9 Sender App: Android ios Chrome App Receiver App: HTML 5 <video>

10 Sender App: Android ios Chrome App Receiver App: HTML 5 <video> Registro

11 Sender App: Android ios Chrome App Receiver App: HTML 5 <video> Registro Application ID = URL

12

13

14

15

16 Workflow em detalhes

17 Workflow em detalhes Descoberta do Chromecast.

18 Workflow em detalhes Descoberta do Chromecast. (Re)Conexão com o Chromecast: sessionid.

19 Workflow em detalhes Descoberta do Chromecast. (Re)Conexão com o Chromecast: sessionid. Envio do Application ID ao Chromecast.

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

21 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

22 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).

23 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). Callbacks, callbacks, callbacks, callbacks

24 Por dentro do Chromecast

25 Por dentro do Chromecast Chrome Browser.

26 Por dentro do Chromecast Chrome Browser. HTML5, CSS 3, JavaScript.

27 Por dentro do Chromecast Chrome Browser. HTML5, CSS 3, JavaScript. Limitações de memória e CPU.

28 Por dentro do Chromecast Chrome Browser. HTML5, CSS 3, JavaScript. Limitações de memória e CPU. Sem WebGL ou Chrome Extensions.

29 Por dentro do Chromecast Chrome Browser. HTML5, CSS 3, JavaScript. Limitações de memória e CPU. Sem WebGL ou Chrome Extensions. Nada de Tabs, janelas, popups ou inputs.

30 Por dentro do Chromecast Chrome Browser. HTML5, CSS 3, JavaScript. Limitações de memória e CPU. Sem WebGL ou Chrome Extensions. Nada de Tabs, janelas, popups ou inputs. Suporte à WebAudio API.

31 Por dentro do Chromecast Chrome Browser. HTML5, CSS 3, JavaScript. Limitações de memória e CPU. Sem WebGL ou Chrome Extensions. Nada de Tabs, janelas, popups ou inputs. Suporte à WebAudio API. Uma tag <video> ativa por vez.

32 developers.google.com/cast developers.google.com/cast/ docs/ux_guidelines! developers.google.com/cast/ docs/design_checklist!

33 Sender com.android.support:appcompat-v7! com.android.support:mediarouter-v7! com.google.android.gms:play-services

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

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

36 Sender github.com/googlecast/ CastCompanionLibrary-android

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

38 Sender + CastCompanionLibrary public class MainActivity extends ActionBarActivity { private VideoCastManager 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*/);

39 Sender + CastCompanionLibrary 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;

40 Sender + CastCompanionLibrary 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( " mvideocastmanager.startcastcontrolleractivity(this, mediainfo, 0, true);

41 Receiver

42 Receiver Default Receiver.

43 Receiver Default Receiver. Styled Receiver.

44 Receiver Default Receiver. Styled Receiver. Custom Receiver.

45 Custom Receiver Mínimo <html> <head> <title>example minimum receiver</title> <script src="// script> </head> <body> <video id='media'/> <script>... </script> </body> </html>

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

47 Exemplo 1

48 Exemplo 1 Custom Receiver para exibir propaganda e notificações no telefone.

49 Exemplo 1 Custom Receiver para exibir propaganda e notificações no telefone. Envia URL do vídeo pelo Media Channel.

50 Exemplo 1 Custom Receiver para exibir propaganda e notificações no telefone. Envia URL do vídeo pelo Media Channel. Envia texto pelo Custom Channel com as notificações.

51 Exemplo 1 Custom Receiver para exibir propaganda e notificações no telefone. Envia URL do vídeo pelo Media Channel. Envia texto pelo Custom Channel com as notificações. No Receiver exibe propagandas.

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

53 Exemplo 1 - Sender public class MyNotificationListenerService extends NotificationListenerService {!!! 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); }

54 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"/>

55 Exemplo 1 - Receiver 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(); }

56 Exemplo 1 - Receiver var nms = 'urn:x- cast:org.gcastsamples.castnotifications'; var custommessagebus = window.castreceivermanager.getcastmessagebus(nms); custommessagebus.onmessage = function(event) { shownotification(event.data); } window.castreceivermanager.start();

57 Exemplo 2

58 Exemplo 2 Custom Receiver para exibir um gráfico.

59 Exemplo 2 Custom Receiver para exibir um gráfico.

60 Exemplo 2 Custom Receiver para exibir um gráfico. A página do Custom Receiver quando acessada pelo Chromecast é um Receiver.

61 Exemplo 2 Custom Receiver para exibir um gráfico. 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.

62 Exemplo 2

63 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; }

64 Exemplo 2 - Sender String json = getdata();! mdatacastmanager.senddatamessage( json, MyApplication.NAME_SPACE);

65 Exemplo 2 - Receiver <body> <form id="plot_inputs"> </body> </form> <div id="content"> <div class="chart- container"> <div id="placeholder" class="chart- placeholder"></div> </div> </div>

66 Exemplo 2 - Receiver if (navigator.useragent.indexof('crkey') >= 0) {! $('#plot_inputs').hide(); // form inputs $('.chart- container').addclass('chart- container- for- tv');! startchromecastmode();! } else {! startbrowsermode();! }

67 Exemplo 2 - Receiver 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();

68 Mirror e Presentation

69 Mirror e Presentation Transmissão de Tela (Mirroring).

70 Mirror e Presentation Transmissão de Tela (Mirroring). Presentation API: API Level 17, Android 4.2+:

71 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).

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

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

74 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 :)

75 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 :) Plugin do Chromecast para Chrome: espelha aba e tela.

76 Mirror e Presentation

77 Mirror e Presentation

78 Exemplo 3 - Mirror e Presentation

79 Exemplo 3 - Mirror e Presentation Aplicação insere elementos em uma lista.

80 Exemplo 3 - Mirror e Presentation Aplicação insere elementos em uma lista. A lista é renderizada e manipulada na TV.

81 Exemplo 3 - Mirror e Presentation Aplicação insere elementos em uma lista. A lista é renderizada e manipulada na TV. Não é casting!!

82 Exemplo 3 - Mirror e Presentation public class ListPresentation extends Presentation { private RecyclerView mrecyclerview; private RecyclerView.LayoutManager mlayoutmanager; private MyAdapter madapter; public ListPresentation(Context context, Display display) { super(context, display); 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);

83 Exemplo 3 - Mirror e Presentation 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; } }

84 Exemplo 3 - Mirror e Presentation 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; } android.media.mediarouter não é app compact!! 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; } }

85 Exemplo 3 - Mirror e Presentation 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; } ROUTE_TYPE_LIVE_AUDIO android.media.mediarouter não é app compact!! 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; } }

86 Chrome Sender

87 Chrome Sender

88 Chrome Sender

89 Developer Tools: <chromecast ip>:9222

90 Developer Tools: <chromecast ip>:9222

91 Developer Tools: <chromecast ip>:9222 window.location.reload(true);

92 Developer Tools: <chromecast ip>:9222 window.location.reload(true); window.location.replace('

93 FAQ

94 FAQ Sender/Receiver: HTTPS.

95 FAQ Sender/Receiver: HTTPS. URL do Receiver: HTTP em desenvolvimento, HTTPS em produção.

96 FAQ Sender/Receiver: HTTPS. URL do Receiver: HTTP em desenvolvimento, HTTPS em produção. Múltiplas conexões ao receiver.

97 FAQ Sender/Receiver: HTTPS. URL do Receiver: HTTP em desenvolvimento, HTTPS em produção. Múltiplas conexões ao receiver. Segurança: é preciso implementar os mecanismos.

98 FAQ Sender/Receiver: HTTPS. URL do Receiver: HTTP em desenvolvimento, HTTPS em produção. Múltiplas conexões ao receiver. Segurança: é preciso implementar os mecanismos. Media Player Library (Beta): Live Streaming, MPEG-DASH, Smooth Streaming, DRM, etc..

99 FAQ Sender/Receiver: HTTPS. URL do Receiver: HTTP em desenvolvimento, HTTPS em produção. Múltiplas conexões ao receiver. Segurança: é preciso implementar os mecanismos. Media Player Library (Beta): Live Streaming, MPEG-DASH, Smooth Streaming, DRM, etc.. CORS.

100 FAQ Sender/Receiver: HTTPS. URL do Receiver: HTTP em desenvolvimento, HTTPS em produção. Múltiplas conexões ao receiver. Segurança: é preciso implementar os mecanismos. Media Player Library (Beta): Live Streaming, MPEG-DASH, Smooth Streaming, DRM, etc.. CORS. Não esqueçam do ios :)

101 Futuro

102 Futuro Google TV?

103 Futuro Google TV? Chrome OS: integração no Google Drive na build de desenvolvimento.

104 Futuro Google TV? Chrome OS: integração no Google Drive na build de desenvolvimento. Conexão fora da mesma rede Wifi.

105 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

106 Seu App na TV: Desenvolvimento para ChromeCast Obrigado!! Cast your questions :) Ivan de Aguirre Twitter: IvAguirre G+: plus.google.com/+ivanaguirrebr!