MobCamp 2014 :: Chromecast seu aplicativo na TV - Ivan de Aguirre

584 views

Published on

Com o Chromecast aplicativos Android, iOS e Chrome agora podem interagir com a TV.

Vamos explorar as novas possibilidades que se abrem e os primeiros passos para seu aplicativo se beneficiar da tela grande.

--
Palestra realizada por Ivan de Aguirre no MobCamp 2014

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
584
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

MobCamp 2014 :: Chromecast seu aplicativo na TV - Ivan de Aguirre

  1. 1. Chromecast Ivan de Aguirre @IvAguirre ivan.aguirre@gmail.com Seu aplicativo na TV
  2. 2. Cast
  3. 3. Sender:
  4. 4. Sender: Android, iOS, Chrome App
  5. 5. Receiver: Sender: Android, iOS, Chrome App
  6. 6. Receiver: HTML5Sender: Android, iOS, Chrome App
  7. 7. Workflow
  8. 8. Workflow • Descobrir o Chromecast.
  9. 9. Workflow • Descobrir o Chromecast. • Definir CC como a Rota.
  10. 10. Workflow • Descobrir o Chromecast. • Definir CC como a Rota. • Iniciar uma Sessão (session ID).
  11. 11. Workflow • Descobrir o Chromecast. • Definir CC como a Rota. • Iniciar uma Sessão (session ID). • CC carrega o Receiver (app ID).
  12. 12. • Envio de mensagens ao CC através de um Canal.
  13. 13. • Envio de mensagens ao CC através de um Canal. • Callbacks.
  14. 14. O que enviar para o Receiver pelos Canais?
  15. 15. O que enviar para o Receiver pelos Canais? Texto (Custom Channel)
  16. 16. O que enviar para o Receiver pelos Canais? Texto (Custom Channel) URL e Metadados: Fotos, Vídeos, etc. (Media Chanel)
  17. 17. Posso enviar conteúdo diretamente pelo Media Channel?
  18. 18. Posso enviar conteúdo diretamente pelo Media Channel? Precisa iniciar um Web Server no Dispositivo :/
  19. 19. Antes de tudo…
  20. 20. Antes de tudo… developers.google.com/cast
  21. 21. Antes de tudo… developers.google.com/cast User Experience Guidelines
  22. 22. Antes de tudo… developers.google.com/cast User Experience Guidelines Design Checklist
  23. 23. Implementando um Android Sender
  24. 24. Implementando um Android Sender com.android.support:appcompat-v7:20.+
  25. 25. Implementando um Android Sender com.android.support:appcompat-v7:20.+
  26. 26. Implementando um Android Sender com.android.support:appcompat-v7:20.+ com.android.support:mediarouter-v7:20.+
  27. 27. Implementando um Android Sender com.android.support:appcompat-v7:20.+ com.android.support:mediarouter-v7:20.+
  28. 28. Implementando um Android Sender com.android.support:appcompat-v7:20.+ com.android.support:mediarouter-v7:20.+ com.google.android.gms:play-services:+
  29. 29. Implementando um Android Sender
  30. 30. Implementando um Android Sender • Botão de Cast na Action Bar.
  31. 31. Implementando um Android Sender • Botão de Cast na Action Bar. • Media Router API e Google Services API: Callbacks, Callbacks everywhere!!
  32. 32. 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..
  33. 33. 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).
  34. 34. 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.
  35. 35. 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.
  36. 36. 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
  37. 37. CastCompanionLibrary Ex ! private VideoCastManager mVideoCastMgr;! ! protected void onCreate(Bundle ! savedState){! (…) ! ! mVideoCastMgr.reconnectSessionIfPossible(! this, true, 5 /*seconds*/);! }! !
  38. 38. CastCompanionLibrary Ex DbxChooser.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);!
  39. 39. Receiver
  40. 40. Receiver • Default Receiver
  41. 41. Receiver • Default Receiver • Styled Media Receiver
  42. 42. Receiver • Default Receiver • Styled Media Receiver • Custom Receiver
  43. 43. Receiver • Default Receiver • Styled Media Receiver • Custom Receiver • cast.google.com/publish
  44. 44. Styled Receiver
  45. 45. 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>!
  46. 46. Mirror & Presentation
  47. 47. Mirror
  48. 48. Mirror
  49. 49. Presentation
  50. 50. Presentation • É preciso estar em Mirror.
  51. 51. Presentation • É preciso estar em Mirror. • Layout exibido somente na tela de Mirror.
  52. 52. 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);! (…)! }
  53. 53. 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;! }! }
  54. 54. Lembrando… iOS Google Chrome
  55. 55. Mãos à Obra!! developers.google.com/cast github.com/googlecast github.com/ivan-aguirre/chromecast_samples Comunidade G+: Google Cast Developers
  56. 56. Obrigado!! @IvAguirre ivan.aguirre@gmail.com
  57. 57. Cast your question :)

×