Download - Chromecast na Qcon RJ
![Page 1: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/1.jpg)
Seu App na TV: Desenvolvimento para ChromeCast
Ivan de Aguirre [email protected] !Twitter: IvAguirre !G+: plus.google.com/+IvanAguirreBr
![Page 2: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/2.jpg)
![Page 3: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/3.jpg)
Sender App:
![Page 4: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/4.jpg)
Sender App:Android
![Page 5: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/5.jpg)
Sender App:Android
iOS
![Page 6: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/6.jpg)
Sender App:Android
iOSChrome App
![Page 7: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/7.jpg)
Sender App:Android
iOSChrome App
Receiver App:
![Page 8: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/8.jpg)
Sender App:Android
iOSChrome App
Receiver App:HTML 5
![Page 9: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/9.jpg)
Sender App:Android
iOSChrome App
Receiver App:HTML 5<video>
![Page 10: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/10.jpg)
Sender App:Android
iOSChrome App
Receiver App:HTML 5<video>Registro
![Page 11: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/11.jpg)
Sender App:Android
iOSChrome App
Receiver App:HTML 5<video>Registro
Application ID = URL
![Page 12: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/12.jpg)
![Page 13: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/13.jpg)
![Page 14: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/14.jpg)
![Page 15: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/15.jpg)
![Page 16: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/16.jpg)
Workflow em detalhes
![Page 17: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/17.jpg)
Workflow em detalhes
• Descoberta do Chromecast.
![Page 18: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/18.jpg)
Workflow em detalhes
• Descoberta do Chromecast.
• (Re)Conexão com o Chromecast: sessionID.
![Page 19: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/19.jpg)
Workflow em detalhes
• Descoberta do Chromecast.
• (Re)Conexão com o Chromecast: sessionID.
• Envio do Application ID ao Chromecast.
![Page 20: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/20.jpg)
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!!
![Page 21: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/21.jpg)
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…
![Page 22: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/22.jpg)
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).
![Page 23: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/23.jpg)
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…
![Page 24: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/24.jpg)
Por dentro do Chromecast
![Page 25: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/25.jpg)
Por dentro do Chromecast
• Chrome Browser.
![Page 26: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/26.jpg)
Por dentro do Chromecast
• Chrome Browser.
• HTML5, CSS 3, JavaScript.
![Page 27: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/27.jpg)
Por dentro do Chromecast
• Chrome Browser.
• HTML5, CSS 3, JavaScript.
• Limitações de memória e CPU.
![Page 28: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/28.jpg)
Por dentro do Chromecast
• Chrome Browser.
• HTML5, CSS 3, JavaScript.
• Limitações de memória e CPU.
• Sem WebGL ou Chrome Extensions.
![Page 29: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/29.jpg)
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.
![Page 30: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/30.jpg)
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.
![Page 31: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/31.jpg)
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.
![Page 32: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/32.jpg)
developers.google.com/cast !
developers.google.com/cast/docs/ux_guidelines
!
developers.google.com/cast/docs/design_checklist
![Page 33: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/33.jpg)
Sender
com.android.support:appcompat-v7
!
com.android.support:mediarouter-v7
!
com.google.android.gms:play-services
![Page 34: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/34.jpg)
Sender
GoogleApiClient.ConnectionCallbacks GoogleApiClient.OnConnectionFailedListener MediaRouter.Callback Cast.Listener ResultCallback<Cast.ApplicationConnectionResult> RemoteMediaPlayer.OnStatusUpdatedListener RemoteMediaPlayer.OnMetadataUpdatedListener ResultCallback<RemoteMediaPlayer.MediaChannelResult>
![Page 35: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/35.jpg)
Sender
GoogleApiClient.ConnectionCallbacks GoogleApiClient.OnConnectionFailedListener MediaRouter.Callback Cast.Listener ResultCallback<Cast.ApplicationConnectionResult> RemoteMediaPlayer.OnStatusUpdatedListener RemoteMediaPlayer.OnMetadataUpdatedListener ResultCallback<RemoteMediaPlayer.MediaChannelResult>
![Page 36: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/36.jpg)
Sender
github.com/googlecast/CastCompanionLibrary-android
![Page 37: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/37.jpg)
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; } }
![Page 38: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/38.jpg)
Sender + CastCompanionLibrary
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*/); } }
![Page 39: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/39.jpg)
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; }
![Page 40: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/40.jpg)
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(
"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);
![Page 41: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/41.jpg)
Receiver
![Page 42: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/42.jpg)
Receiver
• Default Receiver.
![Page 43: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/43.jpg)
Receiver
• Default Receiver.
• Styled Receiver.
![Page 44: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/44.jpg)
Receiver
• Default Receiver.
• Styled Receiver.
• Custom Receiver.
![Page 45: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/45.jpg)
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>
![Page 46: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/46.jpg)
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>
![Page 47: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/47.jpg)
Exemplo 1
![Page 48: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/48.jpg)
Exemplo 1
• Custom Receiver para exibir propaganda e notificações no telefone.
![Page 49: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/49.jpg)
Exemplo 1
• Custom Receiver para exibir propaganda e notificações no telefone.
• Envia URL do vídeo pelo Media Channel.
![Page 50: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/50.jpg)
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.
![Page 51: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/51.jpg)
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.
![Page 52: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/52.jpg)
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; } }
![Page 53: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/53.jpg)
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); } } }
![Page 54: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/54.jpg)
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"/>
![Page 55: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/55.jpg)
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();
}
![Page 56: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/56.jpg)
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();
![Page 57: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/57.jpg)
Exemplo 2
![Page 58: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/58.jpg)
Exemplo 2
• Custom Receiver para exibir um gráfico.
![Page 59: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/59.jpg)
Exemplo 2
• Custom Receiver para exibir um gráfico.
• www.flotcharts.org
![Page 60: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/60.jpg)
Exemplo 2
• Custom Receiver para exibir um gráfico.
• www.flotcharts.org
• A página do Custom Receiver quando acessada pelo Chromecast é um Receiver.
![Page 61: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/61.jpg)
Exemplo 2
• Custom Receiver para exibir um gráfico.
• www.flotcharts.org
• 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.
![Page 62: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/62.jpg)
Exemplo 2
![Page 63: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/63.jpg)
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; } }
![Page 64: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/64.jpg)
Exemplo 2 - Sender
String json = getData();
!
mDataCastManager.sendDataMessage(
json, MyApplication.NAME_SPACE);
![Page 65: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/65.jpg)
Exemplo 2 - Receiver
<body> <form id="plot_inputs">
…
</form>
<div id="content">
<div class="chart-‐container">
<div id="placeholder" class="chart-‐placeholder"></div>
</div>
</div>
</body>
![Page 66: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/66.jpg)
Exemplo 2 - Receiver
if (navigator.userAgent.indexOf('CrKey') >= 0) { ! $('#plot_inputs').hide(); // form inputs $('.chart-‐container').addClass('chart-‐container-‐for-‐tv'); ! startChromeCastMode(); !} else { ! startBrowserMode(); !}
![Page 67: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/67.jpg)
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(); } }
![Page 68: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/68.jpg)
Mirror e Presentation
![Page 69: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/69.jpg)
Mirror e Presentation
• Transmissão de Tela (Mirroring).
![Page 70: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/70.jpg)
Mirror e Presentation
• Transmissão de Tela (Mirroring).
• Presentation API: API Level 17, Android 4.2+:
![Page 71: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/71.jpg)
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).
![Page 72: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/72.jpg)
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.
![Page 73: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/73.jpg)
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.
![Page 74: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/74.jpg)
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 :)
![Page 75: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/75.jpg)
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.
![Page 76: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/76.jpg)
Mirror e Presentation
![Page 77: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/77.jpg)
Mirror e Presentation
![Page 78: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/78.jpg)
Exemplo 3 - Mirror e Presentation
![Page 79: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/79.jpg)
Exemplo 3 - Mirror e Presentation
•Aplicação insere elementos em uma lista.
![Page 80: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/80.jpg)
Exemplo 3 - Mirror e Presentation
•Aplicação insere elementos em uma lista.•A lista é renderizada e manipulada na TV.
![Page 81: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/81.jpg)
Exemplo 3 - Mirror e Presentation
•Aplicação insere elementos em uma lista.•A lista é renderizada e manipulada na TV.•Não é casting!!
![Page 82: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/82.jpg)
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); } ...
![Page 83: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/83.jpg)
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; } }
Exemplo 3 - Mirror e Presentation
![Page 84: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/84.jpg)
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; } }
Exemplo 3 - Mirror e Presentation
android.media.MediaRouter não é app compact!!
![Page 85: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/85.jpg)
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; } }
Exemplo 3 - Mirror e Presentation
android.media.MediaRouter não é app compact!!
ROUTE_TYPE_LIVE_AUDIO
![Page 86: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/86.jpg)
Chrome Sender
![Page 87: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/87.jpg)
Chrome Sender
![Page 88: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/88.jpg)
Chrome Sender
![Page 89: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/89.jpg)
Developer Tools: <chromecast ip>:9222
![Page 90: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/90.jpg)
Developer Tools: <chromecast ip>:9222
![Page 91: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/91.jpg)
Developer Tools: <chromecast ip>:9222
• window.location.reload(true);
![Page 92: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/92.jpg)
Developer Tools: <chromecast ip>:9222
• window.location.reload(true);
• window.location.replace('http://myhost.com/receiver.html');
![Page 93: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/93.jpg)
FAQ
![Page 94: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/94.jpg)
FAQ
• Sender/Receiver: HTTPS.
![Page 95: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/95.jpg)
FAQ
• Sender/Receiver: HTTPS.
• URL do Receiver: HTTP em desenvolvimento, HTTPS em produção.
![Page 96: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/96.jpg)
FAQ
• Sender/Receiver: HTTPS.
• URL do Receiver: HTTP em desenvolvimento, HTTPS em produção.
• Múltiplas conexões ao receiver.
![Page 97: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/97.jpg)
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.
![Page 98: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/98.jpg)
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..
![Page 99: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/99.jpg)
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.
![Page 100: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/100.jpg)
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 :)
![Page 101: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/101.jpg)
Futuro
![Page 102: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/102.jpg)
Futuro
• Google TV?
![Page 103: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/103.jpg)
Futuro
• Google TV?
• Chrome OS: integração no Google Drive na build de desenvolvimento.
![Page 104: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/104.jpg)
Futuro
• Google TV?
• Chrome OS: integração no Google Drive na build de desenvolvimento.
• Conexão fora da mesma rede Wifi.
![Page 105: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/105.jpg)
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
![Page 106: Chromecast na Qcon RJ](https://reader034.vdocuments.site/reader034/viewer/2022050800/58f1b9e71a28ab87078b4569/html5/thumbnails/106.jpg)
Seu App na TV: Desenvolvimento para ChromeCast
Obrigado!! Cast your questions :)
Ivan de Aguirre !
Twitter: IvAguirre !
G+: plus.google.com/+IvanAguirreBr