Share
Google Cast is een technologie waarmee gebruikers online inhoud kunnen verzenden naar een apparaat, zoals een Chromecast of Android TV, dat is verbonden met een televisie. Zodra de inhoud beschikbaar is op de televisie, kunnen gebruikers deze vanaf hun mobiele apparaat of computer besturen.
In deze zelfstudie leert u hoe u een standaard Cast-app voor Android kunt maken met de Cast SDK v3, die tijdens de 2016 Google I / O-conferentie werd aangekondigd.
Google Cast is opgebouwd rond twee componenten: de ontvanger, die in wezen een webpagina is die wordt weergegeven op een castingapparaat met uw inhoud, en de afzender, het clientprogramma dat om media en besturingselementen vraagt.
Voordat u uw afzenderapp kunt maken, moet u een account registreren in de Google Cast-ontwikkelaarsconsole en vervolgens een nieuwe ontvangerstoepassing maken en configureren. Om een account te registreren, moet je een eenmalige vergoeding van $ 5 betalen. Zodra uw account is aangemaakt, kunt u op het rode klikken NIEUWE APPLICATIE TOEVOEGEN om een nieuwe ontvanger-applicatie te maken.
Vervolgens hebt u drie opties: aangepaste ontvanger, gestileerde media-ontvanger en externe display-ontvanger. Voor de eenvoud gebruik je in deze tutorial een Styled Media Receiver.
Op het volgende scherm kunt u enkele basisinstellingen voor uw ontvanger selecteren, zoals de naam van de toepassing, een optionele URL voor een CSS-stijlblad om het uiterlijk van de ontvanger aan te passen en de mogelijkheid om de gastmodus en audio-instellingen in te schakelen. alleen gieten.
Als je eenmaal in het blauw bent geraakt Opslaan knop, krijgt u een scherm te zien met de basisgegevens van uw nieuwe ontvanger-app. U zult merken dat dit scherm ook uw nieuwe bevat Applicatie ID. U moet deze waarde gebruiken in uw Android-applicatie.
Het is vermeldenswaard dat hoewel je ontvanger-app is gemaakt, het enkele uren kan duren voordat je zender kan worden gevonden.
Om te kunnen testen, moet je ten minste één casting-apparaat white-listen. U kunt dit doen vanuit de Google Cast-ontwikkelaarsconsole door op het rode pictogram te klikken VOEG NIEUWE APPARAAT TOE knop. Op het scherm dat verschijnt, kunt u het serienummer van uw apparaat en een beschrijving invoeren om het op de witte lijst te zetten voor testen met uw ontvanger.
Op dit punt moet u een ontvanger hebben gemaakt en een testapparaat in de witte lijst hebben geplaatst, dus u bent er helemaal klaar voor om een Android-afzenderapp te bouwen. Wanneer u uw toepassing in de Play Store hebt gemaakt en gepubliceerd, wilt u terugkeren naar de Cast-ontwikkelaarsconsole om uw ontvanger te publiceren, zodat elk castingapparaat kan worden gebruikt met uw afzenderapp.
Het eerste dat u in uw Android-app moet doen, zijn de Cast Framework- en Media Router-bibliotheken onder de afhankelijkheden knooppunt in uw build.gradle het dossier.
compileer 'com.android.support:mediarouter-v7:24.1.1' compileer 'com.google.android.gms: afspeelservices-cast-framework: 9.4.0'
Vervolgens wil je de applicatie-ID opslaan die je hebt gekregen bij het maken van je ontvanger in je strings.xml het dossier.
(uw ID komt hier)
De laatste stap in het installatieproces is inclusief de internettoestemming voor uw toepassing. Open AndroidManifest.xml en neem de volgende regel op voor je toepassing knooppunt.
Nu uw instellingen zijn voltooid, kunt u doorgaan naar het opnemen van de knop mediaroute in uw toepassing.
De routing-knop is het pictogram in de werkbalk van een toepassing dat over het algemeen betekent dat een app casting voor de gebruiker ondersteunt.
Om deze knop te laten verschijnen in je programma's Toolbar, de eenvoudigste manier is om het op te nemen in het menu XML-bestand voor uw Activiteit (het is ook aan te raden om deze in elke Activiteit in je app).
Vervolgens moet u dit nieuwe initialiseren Menu onderdeel in de onCreateOptionsMenu methode van uw Activiteit.
@Override public boolean onCreateOptionsMenu (Menu menu) super.onCreateOptionsMenu (menu); getMenuInflater (). oppompen (R.menu.menu_hoofd, menu); mMediaRouterButton = CastButtonFactory.setUpMediaRouteButton (getApplicationContext (), menu, R.id.media_route_menu_item); geef waar terug;
Nadat uw mediaroutknop is geïnitialiseerd, wilt u luisteraars van de status toevoegen aan uw toepassing voor casting.
Hoewel er meerdere listeners beschikbaar zijn, zijn er drie mogelijkheden om te bespreken terwijl u het Google Cast-framework begint te gebruiken.
Accentsconagua
CastStateListener: Deze luisteraar controleert de huidige casting-status van een app. Het wordt geactiveerd wanneer de app is overgeschakeld naar AANSLUITING, VERBONDEN, NIET VERBONDEN, of NO_DEVICES_AVAILABLE. AppVisibilityListener: Deze luisteraar heeft twee methoden: onAppEnteredForeground en onAppEnteredBackground. Deze methoden worden aangeroepen wanneer uw app door uw gebruiker als achtergrond is gebruikt of wanneer de gebruiker uw toepassing respectievelijk opnieuw heeft geopend.SessionManagerListener: De laatste luisteraar die we zullen bespreken, is ook de meest uitgebreide. EEN Sessie is de levenscyclus van gebruikersinteractie met een castingapparaat, beginnend wanneer de gebruiker verbinding heeft gemaakt met een apparaat, onderhouden door casten en eindigt wanneer de gebruiker de verbinding heeft verbroken. Het Google Cast Android-framework werkt samen met de Sessie door het SessionManager voorwerp.Deze drie luisteraars kunnen op dezelfde manier worden geassocieerd met het Google Cast-framework deze in dit voorbeeld is de Activiteit die elk van de bovenstaande interfaces heeft geïmplementeerd.
CastContext.getSharedInstance (de) .addCastStateListener (deze); CastContext.getSharedInstance (de) .addAppVisibilityListener (deze); . CastContext.getSharedInstance (this) .getSessionManager () addSessionManagerListener (this);
Je hebt misschien ook gemerkt dat je toegang hebt tot de SessionManager en Cast framework met CastContext.getSharedInstance (Context). Dit komt omdat het CastContext, Het belangrijkste interactiepunt tussen uw app en het Cast-framework wordt lui geïnitialiseerd voor verbeterde app-prestaties.
Wanneer je Activiteit is niet langer actief, je moet onthouden om deze luisteraars te verwijderen.
CastContext.getSharedInstance (de) .removeAppVisibilityListener (deze); CastContext.getSharedInstance (de) .removeCastStateListener (deze); . CastContext.getSharedInstance (this) .getSessionManager () removeSessionManagerListener (this);
OptionsProvider Als u iets met het Cast-framework wilt doen, moet u een nieuwe klasse maken die wordt uitgebreid OptionsProvider. In deze les kunt u verschillende opties voor uw afzender-app configureren.
We houden dit eenvoudig voor nu en geven gewoon een terug CastOptions object van de getCastOptions methode, die het hervatten van opgeslagen sessies mogelijk maakt en opnieuw verbinding maakt met sessies die al aan de gang zijn (hoewel beide standaard al zijn ingeschakeld, worden ze hier als voorbeelden gegeven).
De CastOptions object is ook waar uw ontvanger-app-ID aan uw afzender is gekoppeld. Hoewel de methode getAdditionalSessionProviders moet in deze klasse worden vermeld, we kunnen het veilig negeren voor onze doeleinden.
public class CastOptionsProvider implementeert OptionsProvider @Override openbare CastOptions getCastOptions (contextcontext) CastOptions castOptions = nieuwe CastOptions.Builder () .setResumeSavedSession (true) .setEnableReconnectionService (true) .setReceiverApplicationId (context.getString (R.string.cast_app_id)). bouwen(); terugkeer castOptions; @Overige openbare lijstgetAdditionalSessionProviders (Context-context) return null;
U moet deze klasse ook opnemen in uw AndroidManifest.xml bestand binnen een meta-data tag onder jouw toepassing knooppunt.
Op dit punt moet uw toepassing in staat zijn om alle op de witte lijst vermelde castingapparaten te vinden en er verbinding mee te maken via uw applicatie.
Afhankelijk van het thema dat u in uw app gebruikt (zoals Theme.AppCompat.Light.NoActionBar), hebt u misschien een vreemd gedrag opgemerkt met kleuren in het dialoogvenster met het gietapparaat, zoals een wit lettertype en pictogrammen op een witte achtergrond.
U kunt ook besluiten dat u wilt aanpassen hoe het dialoogvenster lijkt te passen in uw toepassing. U kunt dit doen door de twee stijlen te overschrijven die worden gebruikt voor het Cast-dialoogvenster: Theme.MediaRouter.Light.DarkControlPanel en Theme.MediaRouter.LightControlPanel. Als u bijvoorbeeld een wit lettertype tegen een witte achtergrond tegenkomt, kunt u de volgende code opnemen in uw styles.xml bestand om de pictogrammen en de tekenkleur zwart te maken op de witte achtergrond.
Nadat je verbinding hebt gemaakt met een castingapparaat, wil je waarschijnlijk je gebruikers content laten casten. Gelukkig maakt de Cast SDK dit ongelooflijk gemakkelijk om te doen. In uw app wilt u bepalen of uw gebruiker verbinding heeft gemaakt met een apparaat, wat kan worden gedaan door ervoor te zorgen dat de SessionManager heeft een stroom Sessie en dat de stroom Sessie heeft een RemoteMediaClient object geassocieerd met het.
if (CastContext.getSharedInstance (this) .getSessionManager (). getCurrentCastSession ()! = null && CastContext.getSharedInstance (this) .getSessionManager (). getCurrentCastSession (). getRemoteMediaClient ()! = null)
Zodra u weet dat de toepassing is gekoppeld aan een RemoteMediaClient, je wilt een maken Media informatie object dat een koppeling bevat naar de externe inhoud die u wilt afspelen, evenals de streaming- en inhoudstypen voor uw media. Wanneer Media informatie is gemaakt en gevuld, kunt u de methode voor laden op de RemoteMediaClient om de inhoud te casten. De volgende code werpt bijvoorbeeld een videobestand naar de televisie.
RemoteMediaClient remoteMediaClient = CastContext.getSharedInstance (this) .getSessionManager (). GetCurrentCastSession (). GetRemoteMediaClient (); MediaInfo mediaInfo = nieuwe MediaInfo.Builder (getString (R.string.movie_link)) .setStreamType (MediaInfo.STREAM_TYPE_BUFFERED) .setContentType ("videos / mp4") .build (); remoteMediaClient.load (mediaInfo, true, 0);
De ontvanger en UI-componenten in de Cast SDK gebruiken a MediaMetadata object voor het opslaan en verwijzen van informatie over de media die momenteel wordt afgespeeld. U kunt waarden aan dit object toevoegen met behulp van sleutels die door de klasse worden geleverd, en u kunt afbeeldings-URL's toevoegen met behulp van de Voeg afbeelding toe methode.
MediaMetadata metadata = nieuwe MediaMetadata (MediaMetadata.MEDIA_TYPE_MOVIE); metadata.putString (MediaMetadata.KEY_TITLE, "Title"); metadata.putString (MediaMetadata.KEY_SUBTITLE, "Subtitle"); metadata.addImage (nieuwe WebImage (Uri.parse (getString (R.string.movie_poster))));
Zodra de MediaMetadata object is gemaakt, u kunt het koppelen aan de inhoud Media informatie.
MediaInfo mediaInfo = nieuwe MediaInfo.Builder (getString (R.string.movie_link)) .setStreamType (MediaInfo.STREAM_TYPE_BUFFERED) .setContentType ("videos / mp4") .setMetadata (metadata) .build ();Hoewel de Cast SDK de logica verwerkt voor het verbinden en casten van inhoud naar de televisie, biedt deze ook meerdere UI-componenten die ontwikkelaars helpen de ontwerprichtlijnen voor Casting UI te halen..
Wanneer uw gebruiker uw app voor het eerst opent, is het raadzaam hem te laten weten dat u Google Cast ondersteunt. U kunt dit doen door een IntroductoryOverlay, waarmee de knop Cast wordt gemarkeerd zodra deze voor de eerste keer beschikbaar wordt.
Om de IntroductoryOverlay, het eerste dat u wilt doen is het toevoegen als een ledvariabele bovenaan uw hoofdactiviteit.
private IntroductoryOverlay mIntroductoryOverlay;
Nadat u een gemeenschappelijk object voor de overlay hebt gemaakt, kunt u een methode maken die controleert of de knop voor de mediarouter wordt weergegeven. Als deze wordt weergegeven, wordt de overlay weergegeven.
Dit onderdeel is uitgewerkt met een eenvoudig bouwerspatroon dat a accepteert Draad voor de tekst, een kleurresource-ID en enkele andere aanpassingsattributen. Vaker wel dan niet, wil je ook ervoor zorgen dat je belt setSingleTime (), zodat de overlay slechts één keer voor de gebruiker wordt getoond.
private void showIntroductoryOverlay () if (mIntroductoryOverlay! = null) mIntroductoryOverlay.remove (); if ((mMediaRouterButton! = null) && mMediaRouterButton.isVisible ()) nieuwe Handler (). post (nieuw Runnable () @Override public void run () mIntroductoryOverlay = new IntroductoryOverlay.Builder (MainActivity.this, mMediaRouterButton) .setTitleText ("introductietekst") .setOverlayColor (R.color.colorPrimary) .setSingleTime () .setOnOverlayDismissedListener (new IntroductoryOverlay.OnOverlayDismissedListener () @Override public void onOverlayDismissed () mIntroductoryOverlay = null;) .build () ; mIntroductoryOverlay.show ();); Nu u een methode hebt gemaakt om de overlay weer te geven, hoeft u hem alleen maar te bellen. Er zijn twee punten waarop u deze methode moet toevoegen: in onCreateOptionsMenu, en in onCastStateChanged van jouw CastStateListener wanneer de staat dat niet is NO_DEVICES_AVAILABLE. Hiermee wordt zowel het onvoorziene feit behandeld als wanneer de routeknop zou kunnen verschijnen.
@Override public void onCastStateChanged (int newState) if (newState! = CastState.NO_DEVICES_AVAILABLE) showIntroductoryOverlay (); @Override public boolean onCreateOptionsMenu (Menu menu) super.onCreateOptionsMenu (menu); getMenuInflater (). oppompen (R.menu.menu_hoofd, menu); mMediaRouterButton = CastButtonFactory.setUpMediaRouteButton (getApplicationContext (), menu, R.id.media_route_menu_item); showIntroductoryOverlay (); geef waar terug;
Op dit punt zou je je app moeten kunnen opstarten en de overlay kunnen zien, zoals te zien in de volgende afbeelding. Als u het opnieuw wilt bekijken voor testdoeleinden, kunt u de gegevens van uw toepassing wissen en opnieuw openen.
Tijdens het casten, wil je een eenvoudige UI-widget kunnen bieden voor het besturen van inhoud op de televisie van de gebruiker. Google heeft dit eenvoudig gemaakt door het ExpandedControllerActivity klasse in de Cast SDK.
Om dit te gebruiken, maakt u een nieuwe Java-klasse en breidt u deze uit ExpandedControllerActivity. Deze tutorial zal een aangemaakte maken ExpandedControlsActivity. Zodra uw activiteit is aangemaakt, update onCreateOptionsMenu om de castingrouteringsknop op te nemen in de werkbalk.
public class ExpandedControlsActivity breidt ExpandedControllerActivity uit @Override public boolean onCreateOptionsMenu (Menu menu) super.onCreateOptionsMenu (menu); getMenuInflater (). oppompen (R.menu.menu_hoofd, menu); CastButtonFactory.setUpMediaRouteButton (dit, menu, R.id.media_route_menu_item); geef waar terug;
Open vervolgens je OptionsProvider klasse. Je wilt naar de getCastOptions methode en maak een CastMediaOptions object dat aansluit op jouw ExpandedControllerActivity. Zodra je CastMediaOptions object is gemaakt, u kunt het koppelen aan de CastOptions item dat door de methode wordt geretourneerd.
CastMediaOptions mediaOptions = nieuwe CastMediaOptions.Builder () .setExpandedControllerActivityClassName (ExpandedControlsActivity.class.getName ()) .build (); CastOptions castOptions = nieuwe CastOptions.Builder () .setResumeSavedSession (true) .setEnableReconnectionService (true) .setReceiverApplicationId (context.getString (R.string.cast_app_id)) .setCastMediaOptions (mediaOptions) .build (); terugkeer castOptions;
Eindelijk om aan de slag te gaan ExpandedControllerActivity, je moet het opnemen in AndroidManifest.xml, zoals zo.
Je zou moeten opmerken dat de activiteit knoop heeft een thema eigenschap ingesteld. Deze stijl wordt gebruikt om de optie eventueel aan te passen ExpandedControllerActivity en de knoppen die worden weergegeven.
De controller bestaat uit vier aanpasbare knoppengleuven, met een play / pause-schakeling in het midden. Met behulp van een nieuwe stijl en arraymiddelen kunt u aanpassen welke knoppen verschijnen. In arrays.xml, Ik heb een nieuwe toegevoegd rangschikking die zet slot 1 in op leeg, slot 2 op de terugspoelknop van 30 seconden, slot 3 (eerste item aan de rechterkant van de play / pause-schakelaar) om snel 30 seconden vooruit te spoelen, en het laatste slot om een muteknop te hosten.
- @ 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
U kunt dit dan associëren rangschikking met uw Activiteit door je nieuwe te maken stijl bron en het overschrijven van de castExpandedControllerStyle waarde met een nieuwe stijl dat breidt zich uit CastExpandedController.
Op dit punt moet u op de afbeelding in uw routendialoogvenster voor gegoten media kunnen klikken om uw nieuwe controller te openen Activiteit, of start het zelf vanuit uw applicatie met een simpele startActivity telefoontje.
startActivity (nieuwe Intent (this, ExpandedControlsActivity.class));
Wanneer een gebruiker content op hun tv cast, is de kans groot dat ze uw app niet op de voorgrond houden of dat hun telefoon wordt ontgrendeld. Wanneer ze weg van uw app navigeren, wilt u hen een eenvoudige manier bieden om de inhoud van uw app te beheren. U kunt dit doen door een melding aan uw app toe te voegen wanneer deze zich niet op de voorgrond bevindt voor Lollipop- en hoger-apparaten, en de Cast-SDK zal een vergrendelingsscherm maken RemoteControlClient voor KitKat en eerdere apparaten.
Het toevoegen van meldings- / vergrendelschermbedieningen is tamelijk eenvoudig, omdat het allemaal wordt afgehandeld in de getCastOptions methode van uw OptionsProvider (CastOptionsProvider.java voor deze tutorial).
Eerst moet u een maken ArrayList van tekenreeksen die de knoppen bevatten die u voor uw besturingselementen wilt gebruiken. Vervolgens kunt u een maken int array die de indices van de knoppen bevat die u wilt weergeven wanneer de melding zich in de compacte modus bevindt.
Nadat u uw twee arrays hebt gemaakt, maakt u een NotificationOptions object dat de acties aan de nieuwe melding bindt en een toewijst Activiteit worden geopend wanneer de melding is geselecteerd. Voor dit voorbeeld gebruiken we eenvoudig de ExpandedControlsActivity die we in de laatste sectie hebben gemaakt.
Ten slotte kunt u de melding toevoegen aan uw CastMediaOptions.
LijstbuttonActions = nieuwe 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 = nieuwe CastMediaOptions.Builder () .setNotificationOptions (notificationOptions) .setExpandedControllerActivityClassName (ExpandedControlsActivity.class.getName ()) .build ();
Nu, wanneer uw gebruikers inhoud naar hun televisies casten en het scherm vergrendelen of weg van uw app navigeren, verschijnt er een melding waarmee ze de inhoud op het grote scherm kunnen bedienen terwijl ze blijven communiceren met hun telefoon. Als u op de melding buiten de besturingselementen klikt, wordt uw app weer op de voorgrond geplaatst met de ExpandedControlsActivity, uw gebruikers een fijnmaziger controle geven over hun kijkervaring.
De laatste UI-widget waarover je meer te weten komt in deze tutorial is de MiniControllerFragment. Dit item kan in uw activiteitslay-outbestanden worden geplaatst en wanneer uw app inhoud cast, wordt deze automatisch zichtbaar en biedt deze een gemakkelijk bereikbare controller voor uw gebruikers terwijl ze door uw app bladeren. Hoewel dit het laatste onderdeel is dat we zullen bespreken, is het ook verreweg het gemakkelijkst te implementeren. U hoeft het alleen maar op te nemen in uw lay-outbestanden.
Wanneer u ergens buiten de schakelknop afspelen / pauzeren op dit item klikt, wordt uw ExtendedControllerActivity wordt naar voren gebracht, waardoor uw gebruikers eenvoudig toegang hebben tot de inhoud op hun televisie.
In deze zelfstudie heb je veel geleerd over de nieuwe Google Cast SDK voor Android, de UI-componenten die erin worden geleverd en hoe je een standaard opgemaakte ontvanger kunt maken voor casting. Wat je hier hebt behandeld, helpt je bij het bouwen van de meest voorkomende soorten casting-apps, hoewel Google ook functies biedt waarmee je snel Cast-games en aangepaste ontvanger-apps kunt maken.
