Share
Google Cast est une technologie qui permet aux utilisateurs d'envoyer du contenu en ligne à un appareil, tel qu'un Chromecast ou Android TV, connecté à un téléviseur. Une fois que le contenu est disponible sur le téléviseur, les utilisateurs peuvent le contrôler depuis leur appareil mobile ou leur ordinateur..
Dans ce didacticiel, vous apprendrez à créer une application de base compatible avec Cast pour Android à l'aide du kit Cast SDK v3, annoncé lors de la conférence Google I / O 2016..
Google Cast est construit autour de deux composants: le récepteur, qui est essentiellement une page Web affichée sur un périphérique de diffusion avec votre contenu, et l'expéditeur, qui est le programme client qui demande le média et contrôle la lecture..
Avant de pouvoir créer votre application émettrice, vous devez créer un compte sur la console Google Cast Developer, puis créer et configurer une nouvelle application réceptrice. Pour créer un compte, vous devrez payer des frais uniques de 5 $. Une fois votre compte créé, vous pouvez cliquer sur le bouton rouge. AJOUTER UNE NOUVELLE APPLICATION bouton pour créer une nouvelle application de récepteur.
Ensuite, vous aurez trois options: Récepteur personnalisé, Récepteur de média stylisé et Récepteur d'affichage à distance. Pour plus de simplicité, dans ce didacticiel, vous utiliserez un récepteur multimédia stylé..
Sur l'écran suivant, vous pourrez sélectionner certains paramètres de base pour votre récepteur, tels que le nom de l'application, une URL facultative pour une feuille de style CSS permettant de personnaliser l'aspect du récepteur et la possibilité d'activer le mode Invité et l'audio. seulement casting.
Une fois que vous avez frappé le bleu sauvegarder bouton, vous verrez apparaître un écran qui vous montrera les détails de base de votre nouvelle application de récepteur. Vous remarquerez que cet écran contient également votre nouveau ID d'application. Vous devrez utiliser cette valeur dans votre application Android..
Il est à noter que même si votre application de récepteur est créée, il peut prendre quelques heures pour être détectable par votre application d'expéditeur..
Afin de tester, vous devrez répertorier au moins un appareil de diffusion. Vous pouvez le faire à partir de la console du développeur Google Cast en cliquant sur le bouton rouge. AJOUTER UN NOUVEL APPAREIL bouton. Sur l'écran qui apparaît, vous pouvez entrer le numéro de série de votre appareil et une description pour le mettre en liste blanche pour le tester avec votre application récepteur..
À ce stade, vous devez créer un récepteur et un dispositif de test répertorié dans la liste blanche. Vous êtes donc prêt à créer une application d'expéditeur Android. Une fois que vous avez créé et publié votre application sur le Play Store, vous souhaitez revenir à la console Cast Developer pour publier votre récepteur, permettant ainsi à tout périphérique de diffusion d'être utilisé avec votre application d'expéditeur..
La première chose à faire dans votre application Android est d’inclure les bibliothèques Cast Framework et Media Router dans le répertoire les dépendances noeud dans votre build.gradle fichier.
compiler 'com.android.support:mediarouter-v7:24.1.1' compiler 'com.google.android.gms: play-services-cast-framework: 9.4.0'
Ensuite, vous voudrez enregistrer l’ID d’application que vous avez reçu lors de la création de votre récepteur dans votre strings.xml fichier.
(votre identifiant va ici)
La dernière étape du processus d'installation consiste à inclure l'autorisation Internet pour votre application. Ouvrir AndroidManifest.xml et incluez la ligne suivante avant votre application nœud.
Maintenant que votre configuration est terminée, vous pouvez inclure le bouton de routage multimédia dans votre application..
Le bouton de routage est l'icône de la barre d'outils d'une application, ce qui signifie généralement qu'une application prend en charge la diffusion pour l'utilisateur..
Pour que ce bouton apparaisse dans le dossier de votre application Barre d'outils, le plus simple est de l'inclure dans le fichier XML du menu pour votre Activité (il est également recommandé que cela aille dans tous les Activité dans votre application).
Ensuite, vous devrez initialiser cette nouvelle Élément du menu dans le onCreateOptionsMenu méthode de votre Activité.
@Override public boolean onCreateOptionsMenu (menu Menu) super.onCreateOptionsMenu (menu); getMenuInflater () .flate (R.menu.menu_main, menu); mMediaRouterButton = CastButtonFactory.setUpMediaRouteButton (getApplicationContext (), menu, R.id.media_route_menu_item); retourne vrai;
Une fois le bouton de route média initialisé, vous souhaiterez ajouter des écouteurs d’état à votre application pour la diffusion..
Bien qu'il y ait plusieurs auditeurs disponibles, il convient d'en discuter avec trois autres lorsque vous commencez à utiliser le framework Google Cast..
Accentsconagua
CastStateListener: Cet écouteur surveille l'état de diffusion actuel d'une application. Il est déclenché lorsque l'application est passée à DE LIAISON, CONNECTÉ, PAS CONNECTÉ, ou NO_DEVICES_AVAILABLE. AppVisibilityListener: Cet auditeur a deux méthodes: onAppEnteredForeground et onAppEnteredBackground. Ces méthodes sont appelées lorsque votre application a été mise en arrière-plan par votre utilisateur ou lorsque l'utilisateur a rouvert votre application, respectivement..SessionManagerListener: Le dernier auditeur que nous allons aborder est également le plus bavard. UNE Session est le cycle de vie de l'interaction de l'utilisateur avec un périphérique de diffusion, qui commence dès la connexion de l'utilisateur à un périphérique, est maintenu via la diffusion et se termine à la déconnexion de l'utilisateur. La structure Google Cast Android interagit avec le Session à travers le SessionManager objet.Ces trois auditeurs peuvent être associés au framework Google Cast comme suit: ce dans cet exemple est le Activité qui a mis en œuvre chacune des interfaces ci-dessus.
CastContext.getSharedInstance (this) .addCastStateListener (this); CastContext.getSharedInstance (this) .addAppVisibilityListener (this); CastContext.getSharedInstance (this) .getSessionManager (). AddSessionManagerListener (this);
Vous avez peut-être aussi remarqué que vous accédez à la SessionManager et cadre Cast en utilisant CastContext.getSharedInstance (Contexte). C'est parce que le CastContext, le point d'interaction principal entre votre application et le framework Cast, est initialisé paresseusement pour améliorer les performances de l'application.
Quand ton Activité n'est plus actif, vous devez vous rappeler de supprimer ces écouteurs.
CastContext.getSharedInstance (this) .removeAppVisibilityListener (this); CastContext.getSharedInstance (this) .removeCastStateListener (this); CastContext.getSharedInstance (this) .getSessionManager (). RemoveSessionManagerListener (this);
OptionsProvider Pour faire quelque chose avec le framework Cast, vous devrez créer une nouvelle classe qui s'étend OptionsProvider. Cette classe sera l'endroit où vous pourrez configurer diverses options pour votre application d'expéditeur..
Nous allons garder cela simple pour le moment et retourner un CastOptions objet de la getCastOptions méthode, qui permettra de reprendre les sessions enregistrées et de se reconnecter aux sessions en cours (bien que les deux soient déjà activées par défaut, elles sont fournies ici à titre d'exemple).
le CastOptions objet est également l'endroit où votre identifiant d'application destinataire est associé à votre expéditeur. Bien que la méthode getAdditionalSessionProviders doit être déclaré dans cette classe, nous pouvons l'ignorer en toute sécurité pour nos besoins.
public class CastOptionsProvider implémente OptionsProvider @Override public CastOptions getCastOptions (contexte du contexte) CastOptions castOptions = new CastOptions.Builder () .setResumeSavedSession (true) .setEnableReconnectionService (true) .setReceiverDocumentation construire(); renvoyer castOptions; @Override liste publiquegetAdditionalSessionProviders (contexte de contexte) return null;
Vous devrez également inclure cette classe dans votre AndroidManifest.xml déposer dans un méta-données tag sous votre application nœud.
À ce stade, votre application doit pouvoir trouver tous les appareils de casting inscrits sur la liste blanche et s'y connecter via votre application..
En fonction du thème que vous utilisez dans votre application (tel que Theme.AppCompat.Light.NoActionBar), vous avez peut-être remarqué des comportements étranges avec des couleurs dans la boîte de dialogue du dispositif de transtypage, tels qu'une police blanche et des icônes sur un fond blanc.
Vous pouvez également décider de personnaliser l'apparence de la boîte de dialogue pour l'adapter à votre application. Vous pouvez le faire en remplaçant les deux styles utilisés pour la boîte de dialogue Distribution: Theme.MediaRouter.Light.DarkControlPanel et Theme.MediaRouter.LightControlPanel. Par exemple, si vous utilisez une police blanche sur un fond blanc, vous pouvez inclure le code suivant dans votre styles.xml fichier pour changer les icônes et la couleur de la police pour être noir sur fond blanc.
Une fois que vous êtes connecté à un périphérique de diffusion, vous souhaiterez probablement laisser à vos utilisateurs le contenu de leur contenu. Heureusement, le SDK de Cast facilite grandement cette tâche. Dans votre application, vous souhaiterez déterminer si votre utilisateur est connecté à un appareil. Pour ce faire, assurez-vous que le SessionManager a un courant Session et que le courant Session a un RemoteMediaClient objet qui lui est associé.
if (CastContext.getSharedInstance (this) .getSessionManager (). getCurrentCastSession ()! = = null && CastContext.getSharedInstance (this) .getSessionManager (). getCurrentCastSession (). getRemoteMediaClient ()! = null)
Une fois que vous savez que l'application est associée à un RemoteMediaClient, vous voudrez créer un MediaInfo objet qui contient un lien vers le contenu distant que vous souhaitez lire, ainsi que les types de contenu et de diffusion en continu pour votre contenu multimédia. Quand MediaInfo est créé et rempli, vous pouvez appeler la méthode de chargement sur le RemoteMediaClient pour commencer à diffuser le contenu. Par exemple, le code suivant convertira un fichier vidéo sur le téléviseur.
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);
Les composants récepteur et interface utilisateur du Cast SDK utilisent un MediaMetadata objet pour stocker et référencer des informations sur le média en cours de lecture. Vous pouvez ajouter des valeurs à cet objet à l'aide des clés fournies par la classe, et vous pouvez ajouter des URL d'image à l'aide de la commande ajouter une image méthode.
MediaMetadata metadata = new MediaMetadata (MediaMetadata.MEDIA_TYPE_MOVIE); metadata.putString (MediaMetadata.KEY_TITLE, "Title"); metadata.putString (MediaMetadata.KEY_SUBTITLE, "Sous-titre"); metadata.addImage (nouvelle WebImage (Uri.parse (getString (R.string.movie_poster)))));
Une fois la MediaMetadata l'objet est créé, vous pouvez l'associer au contenu MediaInfo.
MediaInfo mediaInfo = new MediaInfo.Builder (getString (R.string.movie_link)) .setStreamType (MediaInfo.STREAM_TYPE_BUFFERED) .setContentType ("videos / mp4") .setMetadata (metadata) .build ();Alors que Cast SDK gère la logique de connexion et de diffusion du contenu à la télévision, il fournit également plusieurs composants d'interface utilisateur qui aident les développeurs à respecter les consignes de conception de l'interface utilisateur de Casting..
Lorsque votre utilisateur ouvre votre application pour la première fois, il est recommandé de lui indiquer que vous prenez en charge Google Cast. Vous pouvez le faire en incluant un IntroductionOverlay, qui mettra en surbrillance le bouton de diffusion lorsqu'il sera disponible pour la première fois.
Pour inclure le IntroductionOverlay, la première chose à faire est de l’ajouter en tant que variable membre en haut de votre activité principale.
private IntroductoryOverlay mIntroductoryOverlay;
Une fois que vous avez un objet commun pour la superposition, vous pouvez créer une méthode qui vérifiera si le bouton du routeur multimédia est affiché et, le cas échéant, affichera la superposition..
Ce composant est étoffé à l’aide d’un modèle de construction simple qui accepte un Chaîne pour le texte, un identifiant de ressource de couleur et quelques autres attributs de personnalisation. Plus souvent qu'autrement, vous voudrez également vous assurer que vous appelez setSingleTime (), de sorte que la superposition ne soit affichée qu'une seule fois pour l'utilisateur.
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) .setTitleText ("Introduction text") .setOverlayColor (R.color.colorPrimary) .setSingleTime () .setOnOverlayDismissedListener (nouvelle IntroductoryOverlay.OnOverlayDismissedListener ().) ; mIntroductoryOverlay.show ();); Maintenant que vous avez créé une méthode pour afficher la superposition, il vous suffira de l'appeler. Il y a deux points où vous devriez ajouter cette méthode: in onCreateOptionsMenu, et en onCastStateChanged de ton CastStateListener quand l'état n'est pas NO_DEVICES_AVAILABLE. Ceci gérera les deux éventualités du moment où le bouton de routage pourrait apparaître.
@Override public void onCastStateChanged (int newState) if (newState! = CastState.NO_DEVICES_AVAILABLE) showIntroductoryOverlay (); @Override public boolean onCreateOptionsMenu (menu Menu) super.onCreateOptionsMenu (menu); getMenuInflater () .flate (R.menu.menu_main, menu); mMediaRouterButton = CastButtonFactory.setUpMediaRouteButton (getApplicationContext (), menu, R.id.media_route_menu_item); showIntroductoryOverlay (); retourne vrai;
À ce stade, vous devriez pouvoir démarrer votre application et voir la superposition, comme indiqué dans la figure suivante. Si vous avez besoin de la revoir à des fins de test, vous pouvez effacer les données de votre application et les rouvrir..
Lors de la diffusion, vous souhaiterez pouvoir fournir un widget d'interface utilisateur simple permettant de contrôler le contenu sur le téléviseur de l'utilisateur. Google a rendu cela facile en fournissant le ExpandedControllerActivity classe dans le Cast SDK.
Pour utiliser cela, créez une nouvelle classe Java et étendez ExpandedControllerActivity. Ce tutoriel va en créer un appelé ExpandedControlsActivity. Une fois votre activité créée, mettez à jour onCreateOptionsMenu inclure le bouton de routage de casting dans la barre d'outils.
classe publique ExpandedControlsActivity étend ExpandedControllerActivity @Override public boolean onCreateOptionsMenu (menu Menu) super.onCreateOptionsMenu (menu); getMenuInflater () .flate (R.menu.menu_main, menu); CastButtonFactory.setUpMediaRouteButton (this, menu, R.id.media_route_menu_item); retourne vrai;
Ensuite, ouvrez votre OptionsProvider classe. Vous voudrez aller dans le getCastOptions méthode et créer un CastMediaOptions objet qui se rattache à votre ExpandedControllerActivity. Une fois votre CastMediaOptions l'objet est créé, vous pouvez l'associer au CastOptions élément renvoyé par la méthode.
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 (); renvoyer castOptions;
Enfin, pour obtenir un travail ExpandedControllerActivity, vous devrez l'inclure dans AndroidManifest.xml, ainsi.
Vous devriez remarquer que le activité noeud a un thème ensemble de propriétés. Ce style est utilisé pour personnaliser facultativement le ExpandedControllerActivity et les boutons qui sont affichés.
Le contrôleur est composé de quatre emplacements de bouton personnalisables, avec une bascule lecture / pause au milieu. En utilisant un nouveau style et des ressources de tableau, vous pouvez personnaliser les boutons qui apparaissent. Dans arrays.xml, J'ai ajouté un nouveau tableau qui définit l’emplacement 1 sur vide, l’emplacement 2 sur le bouton de rembobinage de 30 secondes, l’emplacement 3 (premier élément à droite de la bascule lecture / pause) sur l’avance rapide de 30 secondes et le dernier logement pour une bascule muet.
- @ 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
Vous pouvez ensuite associer ceci tableau avec votre Activité en créant votre nouveau style ressource et dépassant la castExpandedControllerStyle valeur avec un nouveau style qui s'étend CastExpandedController.
À ce stade, vous devriez être en mesure de cliquer sur l'image dans la boîte de dialogue de votre routeur pour que les médias préfixés ouvrent votre nouveau contrôleur. Activité, ou lancez-le vous-même depuis votre application avec un simple startActivity appel.
startActivity (nouvelle intention (this, ExpandedControlsActivity.class));
Lorsqu'un utilisateur diffuse du contenu sur son téléviseur, il est fort probable qu'il ne maintiendra pas votre application au premier plan ou que son téléphone ne soit pas déverrouillé. Lorsqu'ils s'éloignent de votre application, vous souhaitez leur fournir un moyen simple de contrôler le contenu de votre application. Vous pouvez le faire en ajoutant une notification à votre application lorsque celle-ci n'est pas au premier plan pour les appareils Lollipop et au-dessus, et Cast SDK gérera la création d'un écran de verrouillage. RemoteControlClient pour KitKat et les appareils antérieurs.
L’ajout de contrôles de notification / verrouillage de l’écran est assez simple, car tout est géré dans le getCastOptions méthode de votre OptionsProvider (CastOptionsProvider.java pour ce tutoriel).
Tout d'abord, vous devrez créer un ArrayList de chaînes qui contiendra les boutons que vous voulez pour vos contrôles. Ensuite, vous pouvez créer un int tableau contenant les index des boutons à afficher lorsque la notification est en mode compact.
Une fois que vous avez créé vos deux tableaux, vous allez créer un NotificationOptions objet qui lie les actions à la nouvelle notification et affecte un Activité à ouvrir lorsque la notification est sélectionnée. Pour cet exemple, nous allons simplement utiliser le ExpandedControlsActivity que nous avons créé dans la dernière section.
Enfin, vous pouvez ajouter la notification à votre CastMediaOptions.
listebuttonActions = 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 ();
Désormais, lorsque vos utilisateurs transmettent du contenu sur leur téléviseur et verrouillent l’écran ou s’éloignent de votre application, un message de notification leur permettant de contrôler le contenu sur le grand écran s’affiche alors qu’ils continuent à interagir avec leur téléphone. En cliquant sur la notification en dehors des commandes, votre application reviendra au premier plan avec la ExpandedControlsActivity, donner à vos utilisateurs un contrôle plus fin de leur expérience visuelle.
Le dernier widget d'interface utilisateur que vous allez découvrir dans ce didacticiel est le MiniControllerFragment. Cet élément peut être placé dans les fichiers de mise en forme de votre activité. Lorsque votre application diffuse du contenu, il devient automatiquement visible et constitue un contrôleur facilement accessible pour vos utilisateurs lorsqu'ils naviguent dans votre application. Bien que ce soit le dernier élément dont nous allons parler, il est également de loin le plus facile à mettre en œuvre. Vous devez simplement l’inclure dans vos fichiers de mise en page, comme.
Lorsque vous cliquez sur cet élément en dehors de la bascule lecture / pause, votre ExtendedControllerActivity sera mis en place, offrant à vos utilisateurs un accès facile au contenu de leur téléviseur.
Dans ce didacticiel, vous avez beaucoup appris sur le nouveau SDK Google Cast pour Android, sur les composants de l'interface utilisateur fournis et sur la création d'une application de récepteur stylée de base pour la diffusion. Ce que vous avez décrit ici vous aidera à créer les types d'applications de diffusion les plus courants. Google fournit également des fonctionnalités vous permettant de créer rapidement des jeux compatibles avec la diffusion et des applications de réception personnalisées..
