Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Google Play-Dienste: Google Cast v3 und Medien

by
Read Time:14 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Google Cast ist eine Technologie, mit der Benutzer Online-Inhalte an ein Gerät wie Chromecast oder Android TV senden können, das an einen Fernseher angeschlossen ist. Sobald der Inhalt auf dem Fernseher verfügbar ist, können Benutzer ihn von ihrem mobilen Gerät oder Computer aus steuern.

In diesem Tutorial erfahren Sie, wie Sie mit dem Cast SDK v3, das während der Google I/O-Konferenz 2016 angekündigt wurde, eine grundlegende Cast-fähige Anwendung für Android erstellen.

Cast Console Setup

Google Cast besteht aus zwei Komponenten: dem Empfänger, bei dem es sich im Wesentlichen um eine Webseite handelt, die auf einem Casting-Gerät mit Ihren Inhalten angezeigt wird, und dem Absender, dem Client-Programm, das Medien anfordert und die Wiedergabe steuert.

Bevor Sie Ihre Absenderanwendung erstellen können, müssen Sie ein Konto in der Google Cast Developer Console registrieren und anschließend eine neue Empfängeranwendung erstellen und konfigurieren. Um ein Konto zu registrieren, müssen Sie eine einmalige Gebühr von 5 USD zahlen. Sobald Ihr Konto erstellt wurde, können Sie auf die rote Schaltfläche NEUE ANWENDUNG HINZUFÜGEN klicken, um eine neue Empfängeranwendung zu erstellen.

Als Nächstes haben Sie drei Optionen: Benutzerdefinierter Empfänger, Styled Media Receiver und Remote Display Receiver. In diesem Tutorial verwenden Sie der Einfachheit halber einen Styled Media Receiver.

New receiver application typesNew receiver application typesNew receiver application types

Auf dem nächsten Bildschirm können Sie einige Grundeinstellungen für Ihren Receiver auswählen, wie z. B. den Anwendungsnamen, eine optionale URL für ein CSS-Stylesheet, um das Aussehen des Receivers anzupassen, und die Möglichkeit, den Gastmodus und das reine Audio-Casting zu aktivieren.

Setup options for a new styled media receiverSetup options for a new styled media receiverSetup options for a new styled media receiver

Sobald Sie auf die blaue Schaltfläche Speichern klicken, wird ein Bildschirm angezeigt, auf dem die grundlegenden Details Ihrer neuen Empfänger-App angezeigt werden. Sie werden feststellen, dass dieser Bildschirm auch Ihre neue Anwendungs-ID enthält. Sie müssen diesen Wert in Ihrer Android-Anwendung verwenden.

Screen showing information for a newly created receiverScreen showing information for a newly created receiverScreen showing information for a newly created receiver

Es ist erwähnenswert, dass es trotz der Erstellung Ihrer Empfänger-App einige Stunden dauern kann, bis Ihre Absender-Anwendung sie erkennt.

Zum Testen müssen Sie mindestens ein Casting-Gerät auf die weiße Liste setzen. Sie können dies über die Google Cast Developer Console tun, indem Sie auf die rote Schaltfläche NEUES GERÄT HINZUFÜGEN klicken. Auf dem angezeigten Bildschirm können Sie die Seriennummer Ihres Geräts und eine Beschreibung eingeben, um es zum Testen mit Ihrer Empfängeranwendung auf die weiße Liste zu setzen.

Dialog for white-listing physical casting devicesDialog for white-listing physical casting devicesDialog for white-listing physical casting devices

Zu diesem Zeitpunkt sollten Sie einen Empfänger erstellen und ein Testgerät auf die weiße Liste setzen, damit Sie mit dem Erstellen einer Android-Absender-App beginnen können. Wenn Sie Ihre Anwendung im Play Store erstellt und veröffentlicht haben, möchten Sie zur Cast Developer Console zurückkehren, um Ihren Receiver zu veröffentlichen, sodass jedes Casting-Gerät mit Ihrer Absender-App verwendet werden kann.

Android-Setup

Das erste, was Sie in Ihrer Android-App tun müssen, ist, die Cast Framework- und Media Router-Bibliotheken unter dem dependencies-Knoten in Ihre build.gradle-Datei aufzunehmen.

Als Nächstes möchten Sie die Anwendungs-ID, die Sie beim Erstellen Ihres Empfängers erhalten haben, in Ihrer Datei strings.xml speichern.

Der letzte Schritt im Einrichtungsprozess besteht darin, die Internetberechtigung für Ihre Anwendung einzuschließen. Öffnen Sie AndroidManifest.xml und fügen Sie die folgende Zeile vor Ihrem application-Knoten ein.

Nachdem Sie die Einrichtung abgeschlossen haben, können Sie die Schaltfläche für die Medienroute in Ihre Anwendung aufnehmen.

Anzeigen einer Routing-Schaltfläche und Herstellen einer Verbindung zu Cast-Geräten

Die Routing-Schaltfläche ist das Symbol in der Symbolleiste einer Anwendung, das im Allgemeinen anzeigt, dass eine App das Casting für den Benutzer unterstützt.

Media router buttonMedia router buttonMedia router button

Damit diese Schaltfläche in Toolbar Ihrer Anwendung angezeigt wird, können Sie sie am einfachsten in die XML-Menüdatei für Ihre Aktivity aufnehmen (es wird auch empfohlen, diese in jede Aktivity in Ihrer App aufzunehmen).

Als Nächstes müssen Sie dieses neue MenuItem in der onCreateOptionsMenu-Methode Ihrer Aktivity initialisieren.

Sobald Ihre Schaltfläche für die Medienroute initialisiert ist, möchten Sie Ihrer Anwendung Status-Listener zum Casting hinzufügen.

Verfügbare Listener

Während mehrere Listener verfügbar sind, gibt es drei, die es wert sind, besprochen zu werden, wenn Sie mit der Verwendung des Google Cast-Frameworks beginnen.

  • CastStateListener: Dieser Listener überwacht den aktuellen Casting-Status einer App. Es wird ausgelöst, wenn die App auf CONNECTING, CONNECTED, NOT_CONNECTED oder NO_DEVICES_AVAILABLE umgeschaltet hat.
  • AppVisibilityListener: Dieser Listener verfügt über zwei Methoden: onAppEnteredForeground und onAppEnteredBackground. Diese Methoden werden aufgerufen, wenn Ihre App von Ihrem Benutzer im Hintergrund ausgeführt wurde oder wenn der Benutzer Ihre Anwendung erneut geöffnet hat.
  • SessionManagerListener: Der letzte Listener, über den wir sprechen werden, ist auch der ausführlichste. Eine Session ist der Lebenszyklus der Benutzerinteraktion mit einem Casting-Gerät, der beginnt, wenn der Benutzer eine Verbindung zu einem Gerät hergestellt hat, durch Casting verwaltet wird und endet, wenn der Benutzer die Verbindung getrennt hat. Das Android-Framework von Google Cast interagiert mit Session über das SessionManager-Objekt.

Diese drei Listener können wie folgt mit dem Google Cast-Framework verknüpft werden, wobei this in diesem Beispiel die Aktivity ist, die jede der oben genannten Schnittstellen implementiert hat.

Möglicherweise haben Sie auch bemerkt, dass Sie mit CastContext.getSharedInstance(Context) auf das SessionManager- und Cast-Framework zugreifen. Dies liegt daran, dass der CastContext, der Hauptinteraktionspunkt zwischen Ihrer App und dem Cast-Framework, für eine verbesserte App-Leistung träge initialisiert wird.

Wenn Ihre Aktivity nicht mehr aktiv ist, müssen Sie daran denken, diese Listener zu entfernen.

Erstellen eines OptionsProviders

Um etwas mit dem Cast-Framework zu tun, müssen Sie eine neue Klasse erstellen, die OptionsProvider erweitert. In dieser Klasse können Sie verschiedene Optionen für Ihre Absender-App konfigurieren.

Wir werden dies vorerst einfach halten und einfach ein CastOptions-Objekt von der getCastOptions-Methode zurückgeben, mit dem gespeicherte Sitzungen fortgesetzt und die Verbindung zu bereits laufenden Sitzungen wiederhergestellt werden kann (obwohl beide bereits standardmäßig aktiviert sind, werden sie hier als bereitgestellt Beispiele).

Im CastOptions-Objekt ist auch Ihre Empfänger-App-ID Ihrem Absender zugeordnet. Obwohl die Methode getAdditionalSessionProviders in dieser Klasse deklariert werden muss, können wir sie für unsere Zwecke ignorieren.

Sie müssen diese Klasse auch in Ihre AndroidManifest.xml-Datei in einem meta-data-Tag unter Ihrem application-Knoten aufnehmen.

Zu diesem Zeitpunkt sollte Ihre Anwendung in der Lage sein, Casting-Geräte auf der weißen Liste zu finden und über Ihre Anwendung eine Verbindung zu ihnen herzustellen.

Routing dialog when connected to a casting device but not castingRouting dialog when connected to a casting device but not castingRouting dialog when connected to a casting device but not casting

Routing-Dialog-Styling

Abhängig von dem Thema, das Sie in Ihrer App verwenden (z. B. Theme.AppCompat.Light.NoActionBar), haben Sie möglicherweise einige seltsame Verhaltensweisen mit Farben im Dialogfeld des Casting-Geräts festgestellt, z. B. weiße Schrift und Symbole auf weißem Hintergrund.

Routing dialog styles issueRouting dialog styles issueRouting dialog styles issue

Sie können auch festlegen, dass das Dialogfeld an Ihre Anwendung angepasst werden soll. Sie können dies tun, indem Sie die beiden für das Dialogfeld "Besetzung" verwendeten Stile überschreiben: Theme.MediaRouter.Light.DarkControlPanel und Theme.MediaRouter.LightControlPanel. Wenn Sie beispielsweise auf weiße Schrift auf weißem Hintergrund stoßen, können Sie den folgenden Code in Ihre Datei styles.xml aufnehmen, um die Symbole und die Schriftfarbe so zu ändern, dass sie auf weißem Hintergrund schwarz sind.

Casting von Inhalten

Sobald Sie eine Verbindung zu einem Casting-Gerät hergestellt haben, möchten Sie wahrscheinlich, dass Ihre Benutzer Inhalte darauf übertragen. Glücklicherweise macht das Cast SDK dies unglaublich einfach. In Ihrer App möchten Sie feststellen, ob Ihr Benutzer eine Verbindung zu einem Gerät hergestellt hat. Stellen Sie dazu sicher, dass SessionManager eine aktuelle Session  und der aktuellen Session ein RemoteMediaClient-Objekt zugeordnet ist.

Sobald Sie wissen, dass die Anwendung einem RemoteMediaClient zugeordnet ist, möchten Sie ein MediaInfo-Objekt erstellen, das einen Link zu dem Remote-Inhalt enthält, den Sie abspielen möchten, sowie zu den Streaming- und Inhaltstypen für Ihre Medien. Wenn MediaInfo erstellt und gefüllt wird, können Sie die Lademethode auf dem RemoteMediaClient aufrufen, um mit dem Casting des Inhalts zu beginnen. Mit dem folgenden Code wird beispielsweise eine Videodatei auf den Fernseher übertragen.

Routing dialog when connected to a deviceRouting dialog when connected to a deviceRouting dialog when connected to a device

Metadata

Die Empfänger- und UI-Komponenten im Cast SDK verwenden ein MediaMetadata-Objekt zum Speichern und Referenzieren von Informationen zu den aktuell wiedergegebenen Medien. Sie können diesem Objekt mithilfe der von der Klasse bereitgestellten Schlüssel Werte hinzufügen und mithilfe der addImage-Methode Bild-URLs hinzufügen.

Sobald das MediaMetadata-Objekt erstellt wurde, können Sie es der MediaInfo des Inhalts zuordnen.

UI-Komponenten

Das Cast SDK übernimmt zwar die Logik zum Verbinden und Casting von Inhalten mit dem Fernseher, bietet jedoch auch mehrere UI-Komponenten, mit denen Entwickler die Casting-UI-Designrichtlinien erfüllen können.

Einführungsüberlagerung

Wenn Ihr Nutzer Ihre Anwendung zum ersten Mal öffnet, wird empfohlen, dass Sie ihn darüber informieren, dass Sie Google Cast unterstützen. Sie können dies tun, indem Sie ein IntroductoryOverlay einfügen, das die Cast-Schaltfläche hervorhebt, sobald sie zum ersten Mal verfügbar ist.

Um das IntroductoryOverlay einzuschließen, müssen Sie es zunächst als Mitgliedsvariable oben in Ihrer Hauptaktivität hinzufügen.

Sobald Sie ein gemeinsames Objekt für das Overlay haben, können Sie eine Methode erstellen, mit der überprüft wird, ob die Schaltfläche für den Medienrouter angezeigt wird, und ob das Overlay angezeigt wird.

Diese Komponente wird mithilfe eines einfachen Builder-Musters ausgearbeitet, das eine String für den Text, eine Farbressourcen-ID und einige andere Anpassungsattribute akzeptiert. In den meisten Fällen sollten Sie auch sicherstellen, dass Sie setSingleTime() aufrufen, damit das Overlay für den Benutzer immer nur einmal angezeigt wird.

Nachdem Sie eine Methode zum Anzeigen des Overlays erstellt haben, müssen Sie sie nur noch aufrufen. Es gibt zwei Punkte, an denen Sie diese Methode hinzufügen sollten: in onCreateOptionsMenu und in onCastStateChanged von Ihrem CastStateListener, wenn der Status nicht NO_DEVICES_AVAILABLE ist. Dies behandelt beide Eventualitäten, wenn die Routing-Schaltfläche angezeigt werden könnte.

Zu diesem Zeitpunkt sollten Sie in der Lage sein, Ihre App zu starten und die Überlagerung anzuzeigen, wie in der nächsten Abbildung gezeigt. Wenn Sie es zu Testzwecken erneut anzeigen müssen, können Sie die Daten Ihrer Anwendung löschen und erneut öffnen.

IntroductoryOverlay exampleIntroductoryOverlay exampleIntroductoryOverlay example

Erweiterte Steuerelemente

Während des Castings möchten Sie in der Lage sein, ein einfaches UI-Widget zur Steuerung von Inhalten auf dem Fernseher des Benutzers bereitzustellen. Google hat dies durch die Bereitstellung der ExpandedControllerActivity-Klasse im Cast SDK vereinfacht.

Erstellen Sie dazu eine neue Java-Klasse und erweitern Sie ExpandedControllerActivity. In diesem Tutorial wird eine mit dem Namen ExpandedControlsActivity erstellt. Sobald Ihre Aktivität erstellt wurde, aktualisieren Sie onCreateOptionsMenu, um die Schaltfläche für das Casting-Routing in die Symbolleiste aufzunehmen.

Öffnen Sie als Nächstes Ihre OptionsProvider-Klasse. Sie sollten in die getCastOptions-Methode gehen und ein CastMediaOptions-Objekt erstellen, das mit Ihrer ExpandedControllerActivity verknüpft ist. Sobald Ihr CastMediaOptions-Objekt erstellt wurde, können Sie es dem CastOptions-Element zuordnen, das von der Methode zurückgegeben wird.

Um eine funktionierende ExpandedControllerActivity zu erhalten, müssen Sie sie wie folgt in AndroidManifest.xml aufnehmen.

Sie sollten beachten, dass für den aktivity-Knoten eine theme-Eigenschaft festgelegt ist. Dieser Stil wird verwendet, um optional die ExpandedControllerActivity und die angezeigten Schaltflächen anzupassen.

Der Controller besteht aus vier anpassbaren Tastenfeldern mit einem Wiedergabe- / Pausenschalter in der Mitte. Mithilfe eines neuen Stils und einer Array-Ressource können Sie anpassen, welche Schaltflächen angezeigt werden. In arrays.xml habe ich ein neues array hinzugefügt, das Steckplatz 1 auf leer setzt, Steckplatz 2 auf die 30-Sekunden-Rückspultaste, Steckplatz 3 (erstes Element rechts neben dem Wiedergabe-/Pausenschalter), um 30 Sekunden vorzuspulen, und Der letzte Slot, an dem ein Stummschalten ausgeführt wird.

Sie können dieses array dann Ihrer Aktivity zuordnen, indem Sie Ihre neue style-Ressource erstellen und den Wert castExpandedControllerStyle mit einem neuen style überschreiben, der CastExpandedController erweitert.

Zu diesem Zeitpunkt sollten Sie in der Lage sein, auf das Bild in Ihrem Router-Dialogfeld für gegossene Medien zu klicken, um Ihre neue Controller-Aktivity zu öffnen, oder es selbst in Ihrer Anwendung mit einem einfachen startActivity-Aufruf zu starten.

ExpandedControllerActivity exampleExpandedControllerActivity exampleExpandedControllerActivity example

Steuerelemente für Benachrichtigung/Sperrbildschirm

Wenn ein Benutzer Inhalte auf seinen Fernseher überträgt, besteht eine gute Chance, dass er Ihre App nicht im Vordergrund hält oder sein Telefon entsperrt. Wenn sie von Ihrer App weg navigieren, möchten Sie ihnen eine einfache Möglichkeit bieten, den Inhalt Ihrer App zu steuern. Sie können dies tun, indem Sie Ihrer App eine Benachrichtigung hinzufügen, wenn diese für Lollipop-Geräte und höher nicht im Vordergrund steht. Das Cast SDK übernimmt die Erstellung eines RemoteControlClient-Sperrbildschirms für KitKat und frühere Geräte.

Das Hinzufügen von Steuerelementen für Benachrichtigungs-/Sperrbildschirme ist recht einfach, da alles in der Methode getCastOptions Ihres OptionsProviders (CastOptionsProvider.java für dieses Tutorial) behandelt wird.

Zunächst müssen Sie eine ArrayList mit Zeichenfolgen erstellen, die die Schaltflächen enthält, die Sie für Ihre Steuerelemente benötigen. Als Nächstes können Sie ein int-Array erstellen, das die Indizes der Schaltflächen enthält, die angezeigt werden sollen, wenn sich die Benachrichtigung im kompakten Modus befindet.

Sobald Sie Ihre beiden Arrays erstellt haben, erstellen Sie ein NotificationOptions-Objekt, das die Aktionen an die neue Benachrichtigung bindet, und weisen eine Aktivity zu, die geöffnet werden soll, wenn die Benachrichtigung ausgewählt wird. In diesem Beispiel verwenden wir einfach die ExpandedControlsActivity, die wir im letzten Abschnitt erstellt haben.

Schließlich können Sie die Benachrichtigung zu Ihren CastMediaOptions hinzufügen.

Wenn Ihre Benutzer nun Inhalte auf ihre Fernseher übertragen und den Bildschirm sperren oder von Ihrer App weg navigieren, wird eine Benachrichtigung angezeigt, mit der sie den Inhalt auf dem großen Bildschirm steuern können, während sie weiterhin mit ihrem Telefon interagieren. Wenn Sie außerhalb der Steuerelemente auf die Benachrichtigung klicken, wird Ihre App mit der ExpandedControlsActivity wieder in den Vordergrund gerückt, sodass Ihre Benutzer ihre Anzeigeerfahrung genauer steuern können.

Notification on a lock screen example in LollipopNotification on a lock screen example in LollipopNotification on a lock screen example in Lollipop

Mini-Controller

Das letzte UI-Widget, das Sie in diesem Tutorial kennenlernen, ist das MiniControllerFragment. Dieses Element kann in Ihre Aktivitätslayoutdateien eingefügt werden. Wenn Ihre App Inhalte überträgt, wird es automatisch sichtbar und bietet Ihren Benutzern beim Durchsuchen Ihrer App einen leicht zugänglichen Controller. Obwohl dies die letzte Komponente ist, die wir diskutieren werden, ist sie bei weitem auch am einfachsten zu implementieren. Sie müssen es einfach so in Ihre Layoutdateien aufnehmen.

Wenn Sie außerhalb des Wiedergabe-/Pausenschalters auf dieses Element klicken, wird Ihre ExtendedControllerActivity aufgerufen, sodass Ihre Benutzer leicht auf die Inhalte ihres Fernsehgeräts zugreifen können.

MiniControllerFragment exampleMiniControllerFragment exampleMiniControllerFragment example

Abschluss

In diesem Tutorial haben Sie viel über das neue Google Cast SDK für Android, die darin enthaltenen UI-Komponenten und das Erstellen einer grundlegenden Empfängeranwendung für das Casting gelernt. Was Sie hier behandelt haben, hilft Ihnen beim Erstellen der gängigsten Arten von Casting-Anwendungen. Google bietet jedoch auch Funktionen, mit denen Sie schnell Cast-fähige Spiele und benutzerdefinierte Empfängeranwendungen erstellen können.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.