Live-Support zu einem Cast-Empfänger hinzufügen

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

1. Übersicht

Logo: Google Cast

In diesem Codelab erfährst du, wie du mit der Cast Live Breaks API eine benutzerdefinierte Web-Receiver-App erstellst.

Was ist Google Cast?

Mit Google Cast können Nutzer Inhalte von einem Mobilgerät auf einen Fernseher streamen. Nutzer können ihr Mobilgerät dann als Fernbedienung für die Medienwiedergabe auf dem Fernseher verwenden.

Mit dem Google Cast SDK können Sie Ihre App erweitern, um einen Fernseher oder ein Soundsystem zu steuern. Mit dem Cast SDK können Sie die erforderlichen UI-Komponenten gemäß der Checkliste für das Google Cast-Design hinzufügen.

Die Checkliste für das Google Cast-Design soll dafür sorgen, dass Cast auf allen unterstützten Plattformen einfach und vorhersehbar funktioniert.

Ziele

Wenn du dieses Codelab abgeschlossen hast, hast du einen Cast Receiver erstellt, der die neuen Live-Funktionen nutzt.

Lerninhalte

  • Hier erfahren Sie, wie Sie mit Live-Videoinhalten in Google Cast umgehen.
  • Hier erfährst du, wie du verschiedene Szenarien für Livestreaming konfigurierst.
  • Programmdaten zum Livestream hinzufügen

Voraussetzungen

  • Der aktuelle Google Chrome-Browser
  • Node Package Manager
  • Ein Google Cast-Gerät wie Chromecast oder Android TV, das mit Internetzugang konfiguriert ist.
  • Fernseher oder Monitor mit HDMI-Eingang oder Google Home Hub

Plattform

  • Dafür benötigen Sie Vorkenntnisse in der Webentwicklung.
  • Frühere Erfahrung mit der Erstellung von Sender- und Empfängeranwendungen für Cast.

Wie verwenden Sie diese Anleitung?

Nur durchlesen Lies dir die Übungen durch

Wie würden Sie Ihre Erfahrungen im Erstellen von Webanwendungen bewerten?

Neuling Fortgeschritten Profi

2. Beispielcode abrufen

Sie können den gesamten Beispielcode auf Ihren Computer herunterladen...

und entpacken Sie die heruntergeladene ZIP-Datei.

3. Receiver lokal bereitstellen

Damit Sie Ihren Receiver mit einem Übertragungsgerät verwenden können, muss es an einem Ort gehostet werden, an dem Ihr Übertragungsgerät ihn erreichen kann. Wenn Sie bereits einen Server haben, der HTTPS unterstützt, überspringen Sie einfach die folgende Anleitung. Merken Sie sich einfach die URL. Sie benötigen sie im nächsten Abschnitt.

Falls Ihnen kein Server zur Verfügung steht, ist das kein Problem. Sie können node.js, das Knotenmodul http-server und ngrok, installieren.

npm install -g http-server
npm install -g ngrok

Server ausführen

Wenn Sie http-server verwenden, gehen Sie in der Konsole so vor:

cd app-done
http-server

Sie sollten dann Folgendes sehen:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

Beachten Sie den verwendeten lokalen Port und führen Sie folgende Schritte in einem neuen Terminal aus, um den lokalen Empfänger über ngrok über HTTPS freizugeben:

ngrok http 8080

Dadurch wird ein ngrok-Tunnel zu Ihrem lokalen HTTP-Server eingerichtet. Dadurch erhalten Sie einen global verfügbaren HTTPS-gesicherten Endpunkt, den Sie im nächsten Schritt verwenden können (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

Sowohl ngrok als auch http-server sollten während des Codelabs weiter ausgeführt werden. Alle lokal vorgenommenen Änderungen sind sofort verfügbar.

4. Anwendung in der Cast Developer Console registrieren

Sie müssen Ihre Anwendung registrieren, um einen in diesem Codelab integrierten benutzerdefinierten Empfänger auf Chromecast-Geräten ausführen zu können. Nachdem Sie Ihre Anwendung registriert haben, erhalten Sie eine Anwendungs-ID, die Ihre Absenderanwendung zum Ausführen von API-Aufrufen verwenden muss, z. B. um eine Empfängeranwendung zu starten.

Bild der Google Cast SDK Developer Console mit hervorgehobener Schaltfläche „Neue App hinzufügen“

Klicken Sie auf "Neue App hinzufügen".

Bild der Seite „App für neuen Empfänger“ mit markierter Option „Benutzerdefinierter Empfänger“

Wählen Sie „Benutzerdefinierter Empfänger“ aus – so wird er erstellt.

Bild des Bildschirms „Neuer benutzerdefinierter Empfänger“ mit einer URL, die jemand in das Feld „App-URL des Empfängers“ eingibt

Gib die Details des neuen Empfängers ein und verwende dabei die URL,

im letzten Abschnitt. Merken Sie sich die Anwendungs-ID, die dem neuen Empfänger zugewiesen ist.

Außerdem müssen Sie Ihr Google Cast-Gerät registrieren, damit es vor der Veröffentlichung auf die Empfängeranwendung zugreifen kann. Nachdem Sie die Empfängeranwendung veröffentlicht haben, ist sie auf allen Google Cast-Geräten verfügbar. Für dieses Codelab solltest du mit einer nicht veröffentlichten Empfängeranwendung arbeiten.

Bild der Google Cast SDK Developer Console mit hervorgehobener Schaltfläche „Neues Gerät hinzufügen“

Klicken Sie auf „Neues Gerät hinzufügen“.

Bild des Dialogfelds "Cast-Empfänger hinzufügen"

Geben Sie die Seriennummer auf der Rückseite Ihres Übertragungsgeräts ein und geben Sie ihr einen aussagekräftigen Namen. Sie können die Seriennummer auch finden, indem Sie Ihren Bildschirm über die Google Cast SDK Developer Console in Chrome streamen.

Es dauert 5–15 Minuten, bis der Empfänger und das Gerät für den Test bereit sind. Nachdem Sie 5 bis 15 Minuten gewartet haben, müssen Sie Ihr Übertragungsgerät neu starten.

5. Einfachen Livestream übertragen

Bild eines Android-Smartphones, das ein Video abspielt. Die Nachricht „Ins Wohnzimmer streamen“ wird direkt über den Steuerelementen des Videoplayers unten angezeigt.Bild eines Bildschirms in Originalgröße, in dem dasselbe Video wiedergegeben wird

Bevor Sie mit diesem Codelab beginnen, ist es möglicherweise hilfreich, sich den Live-Entwicklerleitfaden mit einer Übersicht über die neuen Funktionen anzusehen.

Für den Absender verwenden wir zur Fehlerbehebung die Fehlerbehebung beim CAF-Empfänger. Der Empfänger ist so konzipiert, dass er automatisch einen Livestream startet.

Der Empfänger besteht aus zwei Dateien. Eine einfache HTML-Datei namens receiver.html zum Initialisieren des Cast-Kontexts sowie einen Platzhalter für den Cast Media Player. Sie müssen diese Datei nicht ändern. Es gibt auch eine Datei namens receiver.js, die alle unsere Logik für den Empfänger enthält.

Öffnen Sie zuerst den Websender in Chrome. Geben Sie die Empfänger-App-ID ein, die Sie in der Cast SDK Developer Console erhalten haben, und klicken Sie auf „Festlegen“.

Im Empfänger müssen wir eine Logik hinzufügen, um dem Cast Application Framework (CAF) mitzuteilen, dass der Stream live ist. Glücklicherweise ist dafür nur eine einzige Codezeile erforderlich. Fügen Sie dem Load fanger in receiver.js die folgende Codezeile hinzu:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

Wenn der Streamtyp auf LIVE festgelegt wird, wird die Live-UI von CAF aktiviert. In diesem Szenario springt CAF beim Beitritt des Streams automatisch zum Live-Edge des Streams. Wir haben noch keine Programmübersichtsdaten festgelegt, daher zeigt die Scrubbing-Leiste die gesamte Länge des Suchbereichs eines Streams an.

Speichere deine Änderungen in receiver.js und starte eine Streamingsitzung auf dem Websender. Klicke dazu mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und wähle dann „Streamen“ aus. Der Livestream wird sofort abgespielt.

6. Programmübersichtsdaten hinzufügen

Die neue Unterstützung für Liveinhalte in CAF umfasst nun auch die Anzeige von Programmübersichtsdaten auf dem Bildschirm in Apps von Empfängern und Absendern. Es wird dringend empfohlen, Contentanbieter in ihre Receiver-Anwendungen aufzunehmen, um die Nutzererfahrung zu verbessern. Das gilt insbesondere für Livestreams mit langer Laufzeit wie TV-Kanäle.

Du kannst CAF jetzt die Metadaten für mehrere Programme in einem einzigen Stream bereitstellen. Wenn Zeitstempel und Dauer für MediaMetadata-Objekte festgelegt werden, aktualisiert der Empfänger automatisch die Metadaten auf den Absendern und Empfängern basierend auf dem aktuellen Standort des Players im Stream.

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

Für dieses Codelab nutzen wir einen Beispiel-Metadatendienst, um die Metadaten für unseren Livestream bereitzustellen. Um eine Liste der Programmmetadaten zu erstellen, müssen Sie zuerst einen Container erstellen. Ein Container enthält eine Liste von MediaMetadata-Objekten für einen einzelnen Medienstream. Jedes „MediaMetadata“-Objekt stellt einen einzelnen Abschnitt im Container dar. Wenn sich der Abspielkopf innerhalb eines bestimmten Bereichs befindet, werden seine Metadaten automatisch in den Medienstatus kopiert. Fügen Sie der Datei receiver.js den folgenden Code hinzu, um die Beispielmetadaten aus unserem Dienst herunterzuladen und den Container in CAF bereitzustellen:

/**
 * Gets the current program guide data from our Google Cloud Function
 * @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
 */
function loadGuideData() {
  return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
      .then((response) => response.json())
      .then(function(data) {
        const containerMetadata =
          new cast.framework.messages.ContainerMetadata();
        containerMetadata.sections = data;

        playerManager.getQueueManager().setContainerMetadata(containerMetadata);
      });
}

Fügen Sie außerdem der Funktion einen Aufruf zum Laden der Führungsdaten im Load-Abfangprogramm hinzu:

loadGuideData();

Speichern Sie die Datei receiver.js und starten Sie eine Streamingsitzung. Start, Ende und Titel des Programms sollten auf dem Bildschirm angezeigt werden.

Wenn der Abspielkopf in einen neuen Bereich im Container wechselt, erhält der Empfänger eine neue Medienstatusnachricht. Daher kann es sinnvoll sein, die Containermetadaten in einem Medienstatus-Abfangkonto zu aktualisieren, damit immer aktuelle Programminformationen verfügbar sind. In unserem Beispieldienst werden die aktuellen Metadaten des Programms und die Metadaten der nächsten beiden Programme zurückgegeben. Wenn Sie die Metadaten für einen Stream aktualisieren möchten, erstellen Sie einfach einen neuen Container und rufen setContainerMetadata wie im Beispiel oben auf.

7. Suche wird deaktiviert

Die meisten Videostreams bestehen aus Segmenten mit verschiedenen Videoframes. Sofern nicht anders angegeben, ermöglicht CAF Nutzern die Suche innerhalb dieser Segmente. Um die Suche zu deaktivieren, müssen wir unserem Empfänger zwei Code-Snippets hinzufügen.

Entfernen Sie im Ladeabfangen den von SEEK unterstützten Medienbefehl. Dadurch wird die Suche auf allen mobilen Absender- und Touch-Oberflächen deaktiviert.

playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);

Im nächsten Schritt müssen Sie verhindern, dass Betrachter den Stream überspringen, z. B. „Hey Google, spule 60 Sekunden zurück“.' Um die Sprachsuche zu deaktivieren, fügen wir einen Abfangdienst hinzu. Dieser Abfangen wird jedes Mal aufgerufen, wenn eine Suchanfrage gestellt wird. Wenn der von SEEK unterstützte Medienbefehl deaktiviert ist, lehnt der Abfangen die Suchanfrage ab. Fügen Sie der Datei receiver.js das folgende Code-Snippet hinzu:

/**
 * Seek a seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 * @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK,
    (seekData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
      cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekData;
    }
);

Speichern Sie die Datei receiver.js und starten Sie eine Streamingsitzung. Du solltest nicht mehr im Livestream suchen können.

8. Glückwunsch

Jetzt wissen Sie, wie Sie mit dem aktuellen Cast Receiver SDK eine benutzerdefinierte Empfängeranwendung erstellen.

Weitere Informationen finden Sie im Entwicklerleitfaden für das Livestreaming.