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

1. Chromecast
Ivan de Aguirre
@IvAguirre
ivan.aguirre@gmail.com
Seu aplicativo na TV

2. Cast

4. Sender:

5. Sender:
Android, iOS,
Chrome App

6. Receiver:
Sender:
Android, iOS,
Chrome App

7. Receiver:
HTML5Sender:
Android, iOS,
Chrome App

11. Workflow

12. Workflow
• Descobrir o Chromecast.

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

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

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

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

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

19. O que enviar para o Receiver pelos Canais?

20. O que enviar para o Receiver pelos Canais?
Texto (Custom Channel)

21. O que enviar para o Receiver pelos Canais?
Texto (Custom Channel)
URL e Metadados: Fotos, Vídeos, etc.
(Media Chanel)

22. Posso enviar conteúdo diretamente
pelo Media Channel?

23. Posso enviar conteúdo diretamente
pelo Media Channel?
Precisa iniciar um Web Server no
Dispositivo :/

24. Antes de tudo…

25. Antes de tudo…
developers.google.com/cast

26. Antes de tudo…
developers.google.com/cast
User Experience Guidelines

27. Antes de tudo…
developers.google.com/cast
User Experience Guidelines
Design Checklist

28. Implementando um Android Sender

29. Implementando um Android Sender
com.android.support:appcompat-v7:20.+

30. Implementando um Android Sender
com.android.support:appcompat-v7:20.+

31. Implementando um Android Sender
com.android.support:appcompat-v7:20.+
com.android.support:mediarouter-v7:20.+

32. Implementando um Android Sender
com.android.support:appcompat-v7:20.+
com.android.support:mediarouter-v7:20.+

33. Implementando um Android Sender
com.android.support:appcompat-v7:20.+
com.android.support:mediarouter-v7:20.+
com.google.android.gms:play-services:+

34. Implementando um Android Sender

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

36. Implementando um Android Sender
• Botão de Cast na Action Bar.
• Media Router API e Google Services API: Callbacks, Callbacks everywhere!!

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

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

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

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

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

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

43. 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);!

44. Receiver

45. Receiver
• Default Receiver

46. Receiver
• Default Receiver
• Styled Media Receiver

47. Receiver
• Default Receiver
• Styled Media Receiver
• Custom Receiver

48. Receiver
• Default Receiver
• Styled Media Receiver
• Custom Receiver
• cast.google.com/publish

49. Styled Receiver

50. 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>!

51. Mirror & Presentation

52. Mirror

53. Mirror

54. Presentation

55. Presentation
• É preciso estar em Mirror.

56. Presentation
• É preciso estar em Mirror.
• Layout exibido somente na
tela de Mirror.

58. 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);!
(…)!
}

59. 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;!
}!
}

60. Lembrando…
iOS
Google Chrome

61. Mãos à Obra!!
developers.google.com/cast
github.com/googlecast
github.com/ivan-aguirre/chromecast_samples
Comunidade G+: Google Cast Developers

62. Obrigado!!
@IvAguirre
ivan.aguirre@gmail.com

63. Cast your question :)