Google Play Services Google Cast v3 e Media

Google Cast è una tecnologia che consente agli utenti di inviare contenuti online a un dispositivo, ad esempio un Chromecast o Android TV, collegato a un televisore. Una volta che il contenuto è disponibile sul televisore, gli utenti possono controllarlo dal proprio dispositivo mobile o computer. 

In questo tutorial, imparerai come creare un'applicazione compatibile con Cast per Android utilizzando Cast SDK v3, che è stata annunciata durante la conferenza Google I / O 2016.

Impostazione della Console di Cast

Google Cast si basa su due componenti: il ricevente, che è essenzialmente una pagina Web visualizzata su un dispositivo di trasmissione con il tuo contenuto, e il mittente, che è il programma client che richiede il supporto e controlla la riproduzione. 

Prima di poter creare l'applicazione per il mittente, è necessario registrare un account nella Console per gli sviluppatori Google Cast, quindi creare e configurare una nuova applicazione di ricezione. Per registrare un account, dovrai pagare una commissione una tantum di $ 5. Una volta creato il tuo account, puoi fare clic sul rosso AGGIUNGI NUOVA APPLICAZIONE pulsante per creare una nuova applicazione di ricezione. 

Quindi, avrai tre opzioni: Ricevitore personalizzato, Ricevitore multimediale stilizzato e Ricevitore display remoto. Per semplicità, in questo tutorial utilizzerai un ricevitore multimediale in stile.

Nella schermata successiva, sarete in grado di selezionare alcune impostazioni di base per il vostro ricevitore, come il nome dell'applicazione, un URL opzionale per un foglio di stile CSS per personalizzare l'aspetto del ricevitore e la possibilità di abilitare la modalità ospite e audio- solo casting. 

Una volta che hai colpito il blu Salvare pulsante, ti verrà presentata una schermata che ti mostra i dettagli di base della tua nuova app ricevente. Noterai che questa schermata contiene anche il tuo nuovo ID applicazione. Dovrai utilizzare questo valore nella tua applicazione Android.

Vale la pena notare che anche se l'app ricevente è stata creata, potrebbero essere necessarie alcune ore per essere rilevate dall'applicazione del mittente. 

Per testare, dovrai elencare almeno una periferica di casting. Puoi farlo dalla Google Developer Console facendo clic sul rosso AGGIUNTA NUOVO DISPOSITIVO pulsante. Sullo schermo che appare, è possibile inserire il numero di serie del dispositivo e una descrizione in white-list per testare con l'applicazione ricevente.

A questo punto, dovresti creare un ricevitore e un dispositivo di prova elencato in bianco, quindi sei pronto per iniziare a creare un'app di Android. Dopo aver creato e pubblicato la tua applicazione sul Play Store, ti consigliamo di tornare alla Cast Developer Console per pubblicare il tuo ricevitore, consentendo l'utilizzo di qualsiasi dispositivo di trasmissione con la tua app di invio.

Installazione Android

La prima cosa che devi fare nella tua app per Android è includere le librerie Cast Framework e Media Router sotto il dipendenze nodo nel tuo build.gradle file.

compila 'com.android.support:mediarouter-v7:24.1.1' compila 'com.google.android.gms: play-services-cast-framework: 9.4.0'

Successivamente, dovrai memorizzare l'ID dell'applicazione che ti è stato dato quando crei il tuo ricevitore nel tuo strings.xml file.

(il tuo ID va qui)

Il passaggio finale del processo di installazione include l'autorizzazione Internet per la tua applicazione. Aperto AndroidManifest.xml e includi la seguente riga prima del tuo applicazione nodo.

Ora che la configurazione è terminata, è possibile passare a includere il pulsante del percorso multimediale nell'applicazione.

Visualizzazione di un pulsante di routing e connessione a dispositivi di trasmissione

Il pulsante di instradamento è l'icona nella barra degli strumenti di un'applicazione che generalmente indica che un'app supporta il casting per l'utente. 

Per far apparire questo pulsante nella tua applicazione Toolbar, il modo più semplice è includerlo nel file XML del menu per il tuo Attività (Si raccomanda anche che questo entri in tutti Attività nella tua app).

   

Successivamente, sarà necessario inizializzare questo nuovo Elemento del menu nel onCreateOptionsMenu metodo del tuo Attività

@Override public boolean onCreateOptionsMenu (Menu menu) super.onCreateOptionsMenu (menu); getMenuInflater (). inflate (R.menu.menu_main, menu); mMediaRouterButton = CastButtonFactory.setUpMediaRouteButton (getApplicationContext (), menu, R.id.media_route_menu_item); ritorna vero; 

Una volta inizializzato il pulsante del percorso multimediale, dovrai aggiungere i listener di stato alla tua richiesta di casting.

Ascoltatori disponibili

Sebbene siano disponibili più listener, ci sono tre aspetti che valuterà quando inizi a utilizzare il framework Google Cast. 

  • CastStateListener: Questo listener monitora lo stato di trasmissione corrente di un'app. Viene attivato quando l'app è passata a COLLEGAMENTO, COLLEGATO, NON COLLEGATO, o NO_DEVICES_AVAILABLE
  • AppVisibilityListener: Questo listener ha due metodi: onAppEnteredForeground e onAppEnteredBackground. Questi metodi vengono chiamati quando l'app è stata eseguita in background dall'utente o quando l'utente ha riaperto l'applicazione, rispettivamente.
  • SessionManagerListener: L'ascoltatore finale che esamineremo è anche il più dettagliato. UN Sessione è il ciclo di vita dell'interazione dell'utente con un dispositivo di trasmissione, a partire dal momento in cui l'utente si è connesso a un dispositivo, gestito tramite casting e terminato quando l'utente si è disconnesso. Il framework Google Cast Android interagisce con Sessione tramite la SessionManager oggetto.

Questi tre listener possono essere associati al framework Google Cast come, dove Questo in questo esempio è il Attività che ha implementato ciascuna delle suddette interfacce.

CastContext.getSharedInstance (questo) .addCastStateListener (questo); CastContext.getSharedInstance (questo) .addAppVisibilityListener (questo); . CastContext.getSharedInstance (questo) .getSessionManager () addSessionManagerListener (questo);

Potresti aver notato anche che accedi al SessionManager e Cast framework usando CastContext.getSharedInstance (Context). Questo perché il CastContext, il principale punto di interazione tra la tua app e il framework Cast è inizializzato pigramente per migliorare le prestazioni delle app. 

Quando il tuo Attività non è più attivo, dovrai ricordarti di rimuovere questi ascoltatori.

CastContext.getSharedInstance (questo) .removeAppVisibilityListener (questo); CastContext.getSharedInstance (questo) .removeCastStateListener (questo); . CastContext.getSharedInstance (questo) .getSessionManager () removeSessionManagerListener (questo);

Creare un OptionsProvider

Per fare qualsiasi cosa con il framework Cast, dovrai creare una nuova classe che si estenda OptionsProvider. Questa classe sarà dove è possibile configurare varie opzioni per l'app del mittente. 

Manterremo questo semplice per ora e restituiremo a CastOptions oggetto dal getCastOptions metodo, che consentirà la ripresa delle sessioni salvate e la riconnessione alle sessioni già in corso (sebbene entrambe siano già abilitate per impostazione predefinita, vengono qui fornite come esempi). 

Il CastOptions l'oggetto è anche il luogo in cui l'ID dell'app ricevente è associato al mittente. Sebbene il metodo getAdditionalSessionProviders deve essere dichiarato in questa classe, possiamo tranquillamente ignorarlo per i nostri scopi.

public class CastOptionsProvider implementa OptionsProvider @Override public CastOptions getCastOptions (Contesto contesto) CastOptions castOptions = new CastOptions.Builder () .setResumeSavedSession (true) .setEnableReconnectionService (true) .setReceiverApplicationId (context.getString (R.string.cast_app_id)). costruire(); return castOptions;  @Override elenco pubblico getAdditionalSessionProviders (Context context) return null; 

Dovrai anche includere questa classe nel tuo AndroidManifest.xml file all'interno di a meta-dati etichetta sotto il tuo applicazione nodo.

A questo punto, la tua applicazione dovrebbe essere in grado di trovare tutti i dispositivi di casting elencati in bianco e connettersi ad essi attraverso la tua applicazione.

Stile di dialogo di routing

A seconda del tema che stai utilizzando nella tua app (come ad esempio Theme.AppCompat.Light.NoActionBar), potresti aver notato alcuni strani comportamenti con i colori nella finestra di dialogo del dispositivo di trasmissione, come caratteri bianchi e icone su uno sfondo bianco. 

Potresti anche decidere di personalizzare la modalità di visualizzazione della finestra di dialogo con la tua applicazione. Puoi farlo sostituendo i due stili usati per la finestra di dialogo Cast: Theme.MediaRouter.Light.DarkControlPanel e Theme.MediaRouter.LightControlPanel. Ad esempio, se stai utilizzando font bianchi su sfondo bianco, puoi includere il seguente codice nel tuo styles.xml file per cambiare le icone e il colore del font in nero su sfondo bianco.

 

Casting Content

Dopo esserti collegato a un dispositivo di trasmissione, probabilmente lascerai che i tuoi utenti trasmettano contenuti su di esso. Fortunatamente, l'SDK Cast lo rende incredibilmente facile da fare. Nella tua app, vorrai determinare se il tuo utente si è connesso a un dispositivo, cosa che può essere fatta assicurandosi che il SessionManager ha una corrente Sessione e quella corrente Sessione ha un RemoteMediaClient oggetto ad esso associato.

if (CastContext.getSharedInstance (this) .getSessionManager (). getCurrentCastSession ()! = null && CastContext.getSharedInstance (this) .getSessionManager (). getCurrentCastSession (). getRemoteMediaClient ()! = null) 

Una volta che sai che l'applicazione è associata a RemoteMediaClient, vorrete creare un MediaInfo oggetto che contiene un collegamento al contenuto remoto che si desidera riprodurre, nonché i tipi di streaming e di contenuto per i file multimediali. quando MediaInfo viene creato e popolato, puoi chiamare il metodo di caricamento su RemoteMediaClient per iniziare a trasmettere il contenuto. Ad esempio, il codice seguente trasmetterà un file video al televisore.

RemoteMediaClient remoteMediaClient = CastContext.getSharedInstance (this) .getSessionManager (). GetCurrentCastSession (). GetRemoteMediaClient (); MediaInfo mediaInfo = new MediaInfo.Builder (getString (R.string.movie_link)) .setStreamType (MediaInfo.STREAM_TYPE_BUFFERED) .setContentType ("videos / mp4") .build (); remoteMediaClient.load (mediaInfo, true, 0);

Metadati

Il ricevitore e i componenti dell'interfaccia utente in Cast SDK utilizzano a MediaMetadata oggetto per la memorizzazione e la referenziazione delle informazioni sul supporto attualmente in riproduzione. È possibile aggiungere valori a questo oggetto utilizzando le chiavi fornite dalla classe ed è possibile aggiungere URL immagine utilizzando il Aggiungi immagine metodo.

MediaMetadata metadata = new MediaMetadata (MediaMetadata.MEDIA_TYPE_MOVIE); metadata.putString (MediaMetadata.KEY_TITLE, "Titolo"); metadata.putString (MediaMetadata.KEY_SUBTITLE, "Sottotitolo"); metadata.addImage (new WebImage (Uri.parse (getString (R.string.movie_poster)))));

Una volta il MediaMetadata oggetto viene creato, è possibile associarlo con il contenuto MediaInfo.

MediaInfo mediaInfo = new MediaInfo.Builder (getString (R.string.movie_link)) .setStreamType (MediaInfo.STREAM_TYPE_BUFFERED) .setContentType ("videos / mp4") .setMetadata (metadata) .build ();

Componenti dell'interfaccia utente

Mentre Cast SDK gestisce la logica per collegare e trasmettere contenuti al televisore, fornisce anche più componenti dell'interfaccia utente che aiutano gli sviluppatori a soddisfare le linee guida sulla progettazione dell'interfaccia utente di Casting.. 

Sovrapposizione introduttiva

Quando l'utente apre la tua applicazione per la prima volta, ti consigliamo di comunicargli che supporti Google Cast. Puoi farlo includendo un IntroductoryOverlay, che evidenzierà il pulsante di cast non appena sarà disponibile per la prima volta. 

Per includere il IntroductoryOverlay, la prima cosa che vorrai fare è aggiungerla come variabile membro nella parte superiore della tua attività principale.

IntroductoryOverlay privato mIntroductoryOverlay;

Una volta che hai un oggetto comune per l'overlay, puoi creare un metodo che controllerà se il pulsante del router multimediale è mostrato, e se mostrato mostrerà la sovrapposizione. 

Questo componente è realizzato utilizzando un semplice modello di builder che accetterà un Stringa per il testo, un ID di risorsa colore e alcuni altri attributi di personalizzazione. Più spesso, vorrete anche assicurarvi di chiamare setSingleTime (), in modo che la sovrapposizione venga sempre mostrata una sola volta per l'utente.

private void showIntroductoryOverlay () if (mIntroductoryOverlay! = null) mIntroductoryOverlay.remove ();  if ((mMediaRouterButton! = null) && mMediaRouterButton.isVisible ()) new Handler (). post (new Runnable () @Override public void run () mIntroductoryOverlay = new IntroductoryOverlay.Builder (MainActivity.this, mMediaRouterButton) .setTitleText ("Testo di introduzione") .setOverlayColor (R.color.colorPrimary) .setSingleTime () .setOnOverlayDismissedListener (new IntroductoryOverlay.OnOverlayDismissedListener () @Override public void onOverlayDismissed () mIntroductoryOverlay = null;) .build () ; mIntroductoryOverlay.show ();); 

Ora che hai creato un metodo per visualizzare l'overlay, dovrai semplicemente chiamarlo. Ci sono due punti in cui dovresti aggiungere questo metodo: in onCreateOptionsMenu, e in onCastStateChanged dal tuo CastStateListener quando lo stato non lo è NO_DEVICES_AVAILABLE. Questo gestirà entrambi i casi in cui potrebbe apparire il pulsante di routing.

@Override public void onCastStateChanged (int newState) if (newState! = CastState.NO_DEVICES_AVAILABLE) showIntroductoryOverlay ();  @Override public boolean onCreateOptionsMenu (Menu menu) super.onCreateOptionsMenu (menu); getMenuInflater (). inflate (R.menu.menu_main, menu); mMediaRouterButton = CastButtonFactory.setUpMediaRouteButton (getApplicationContext (), menu, R.id.media_route_menu_item); showIntroductoryOverlay (); ritorna vero; 

A questo punto, dovresti essere in grado di avviare la tua app e vedere l'overlay, come mostrato nella figura successiva. Se è necessario visualizzarlo di nuovo a scopo di test, è possibile cancellare i dati dell'applicazione e riaprire.

Controlli espansi

Durante la trasmissione, vorrai essere in grado di fornire un semplice widget dell'interfaccia utente per il controllo dei contenuti sulla televisione dell'utente. Google lo ha reso semplice fornendo il ExpandedControllerActivity classe all'interno di Cast SDK. 

Per usarlo, crea una nuova classe Java ed estendi ExpandedControllerActivity. Questo tutorial ne creerà uno chiamato ExpandedControlsActivity. Una volta creata la tua attività, aggiorna onCreateOptionsMenu per includere il pulsante di instradamento dei casting all'interno della barra degli strumenti.

public class ExpandedControlsActivity estende ExpandedControllerActivity @Override public boolean onCreateOptionsMenu (Menu menu) super.onCreateOptionsMenu (menu); getMenuInflater (). inflate (R.menu.menu_main, menu); CastButtonFactory.setUpMediaRouteButton (questo, menu, R.id.media_route_menu_item); ritorna vero; 

Quindi, apri il tuo OptionsProvider classe. Vuoi andare nel getCastOptions metodo e creare a CastMediaOptions oggetto che si lega al tuo ExpandedControllerActivity. Una volta il tuo CastMediaOptions oggetto viene creato, è possibile associarlo con il CastOptions elemento che viene restituito dal metodo.

CastMediaOptions mediaOptions = new CastMediaOptions.Builder () .setExpandedControllerActivityClassName (ExpandedControlsActivity.class.getName ()) .build (); CastOptions castOptions = new CastOptions.Builder () .setResumeSavedSession (true) .setEnableReconnectionService (true) .setReceiverApplicationId (context.getString (R.string.cast_app_id)) .setCastMediaOptions (mediaOptions) .build (); return castOptions;

Finalmente, per avere un lavoro ExpandedControllerActivity, dovrai includerlo AndroidManifest.xml, così.

     

Dovresti notare che il attività il nodo ha a tema insieme di proprietà. Questo stile è usato per personalizzare opzionalmente il ExpandedControllerActivity e i pulsanti che vengono visualizzati. 

Il controller è composto da quattro slot per pulsanti personalizzabili, con un interruttore di riproduzione / pausa nel mezzo. Utilizzando un nuovo stile e risorse di array, è possibile personalizzare i pulsanti visualizzati. Nel arrays.xml, Ho aggiunto un nuovo schieramento che imposta lo slot 1 su vuoto, lo slot 2 sul pulsante di riavvolgimento di 30 secondi, lo slot 3 (il primo elemento a destra della levetta di riproduzione / pausa) per avanzare rapidamente di 30 secondi e l'ultimo slot per ospitare un interruttore silenzioso. 

   @ Id / cast_button_type_empty @ id / cast_button_type_rewind_30_seconds @ id / cast_button_type_forward_30_seconds @ Id / cast_button_type_mute_toggle  

È quindi possibile associarlo schieramento con il tuo Attività creando il tuo nuovo stile risorsa e sovrascrivere il castExpandedControllerStyle valore con un nuovo stile quello si estende CastExpandedController.

 

A questo punto, dovresti essere in grado di fare clic sull'immagine nella finestra di dialogo del router per i media casted per aprire il tuo nuovo controller Attività, o lanciarlo da solo all'interno dell'applicazione con un semplice startActivity chiamata.

startActivity (new Intent (this, ExpandedControlsActivity.class));

Notifiche / Controlli blocco schermo

Quando un utente trasmette contenuti alla propria TV, è probabile che non mantengano l'app in primo piano o il telefono sbloccato. Quando escono dalla tua app, vorrai fornire un modo semplice per controllare il contenuto della tua app. Puoi farlo aggiungendo una notifica alla tua app quando non è in primo piano per Lollipop e sopra i dispositivi e Cast SDK gestirà la creazione di una schermata di blocco RemoteControlClient per KitKat e dispositivi precedenti.

Aggiungere controlli di notifica / blocco schermo è piuttosto semplice, poiché è tutto gestito nel getCastOptions metodo del tuo OptionsProvider (CastOptionsProvider.java per questo tutorial). 

Per prima cosa, dovrai creare un Lista di array di stringhe che conterranno i pulsanti che desideri per i tuoi controlli. Successivamente, è possibile creare un int array che conterrà gli indici dei pulsanti che si desidera visualizzare quando la notifica è in modalità compatta. 

Una volta creati i tuoi due array, ne creerai uno NotificationOptions oggetto che lega le azioni alla nuova notifica e assegna un Attività da aprire quando viene selezionata la notifica. Per questo esempio, useremo semplicemente il ExpandedControlsActivity che abbiamo creato nell'ultima sezione. 

Infine, puoi aggiungere la notifica al tuo CastMediaOptions

Elenco buttonActions = new ArrayList <> (); buttonActions.add (MediaIntentReceiver.ACTION_TOGGLE_PLAYBACK); buttonActions.add (MediaIntentReceiver.ACTION_STOP_CASTING); int [] compatButtonActionsIndicies = new int [] 0, 1; NotificationOptions notificationOptions = new NotificationOptions.Builder () .setActions (buttonActions, compatButtonActionsIndicies) .setTargetActivityClassName (ExpandedControlsActivity.class.getName ()) .build (); CastMediaOptions mediaOptions = new CastMediaOptions.Builder () .setNotificationOptions (notificationOptions) .setExpandedControllerActivityClassName (ExpandedControlsActivity.class.getName ()) .build ();

Ora, quando i tuoi utenti trasmettono contenuti ai loro televisori e bloccano lo schermo o si allontanano dalla tua app, viene visualizzata una notifica che consente loro di controllare il contenuto sul grande schermo mentre continuano a interagire con il telefono. Facendo clic sulla notifica all'esterno dei controlli, la tua app tornerà in primo piano con ExpandedControlsActivity, dando agli utenti un controllo più approfondito della loro esperienza di visualizzazione.

Mini controller

L'ultimo widget UI che imparerai in questo tutorial è il MiniControllerFragment. Questo elemento può essere inserito nei file di layout dell'attività e quando l'app trasmette contenuti, diventerà automaticamente visibile e fornirà un controller facilmente accessibile agli utenti mentre navigano nella tua app. Sebbene questo sia l'ultimo componente di cui discuteremo, è anche di gran lunga il più facile da implementare. Devi semplicemente includerlo nei tuoi file di layout, in questo modo.

Quando fai clic su questo elemento ovunque al di fuori del commutatore di riproduzione / pausa, il tuo ExtendedControllerActivity sarà allevato, dando ai tuoi utenti un facile accesso ai contenuti sul loro televisore.

Conclusione

In questo tutorial hai imparato molto sul nuovo SDK di Google Cast per Android, sui componenti dell'interfaccia utente forniti al suo interno e su come creare un'applicazione ricevente di base per il casting. Quello che hai illustrato qui ti aiuterà a creare i tipi più comuni di applicazioni di casting, anche se Google offre anche funzionalità che ti consentiranno di creare rapidamente giochi compatibili con Cast e applicazioni di ricezione personalizzate.