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

Google Cast-Logo

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 Google Cast-Design-Checkliste hinzufügen.

Die Checkliste für das Design von Google Cast soll es Nutzern der Cast-Nutzung auf allen unterstützten Plattformen erleichtern.

Ziele

Nach Abschluss dieses Codelabs hast du einen Cast Receiver erstellt, der die neuen Live-Funktionen nutzt.

Lerninhalte

  • Umgang mit Live-Videoinhalten in Cast
  • Hier erfahren Sie, wie Sie die verschiedenen von Google Cast unterstützten Szenarien für Livestreaming konfigurieren.
  • Programmdaten in Livestreams einfügen

Voraussetzungen

Plattform

  • Sie benötigen Vorkenntnisse in der Webentwicklung.
  • Vorherige Erfahrung mit dem Erstellen von Sender- und Empfängeranwendungen für Cast.

Wie werden Sie diese Anleitung verwenden?

Nur Lesen Lesen und lesen

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

Neuling Fortgeschrittener Anfänger Profi

2. Beispielcode abrufen

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

und entpacken Sie die heruntergeladene ZIP-Datei.

3. Empfänger lokal bereitstellen

Damit Sie Ihren Webempfänger mit einem Cast-Gerät verwenden können, muss es an einem Ort gehostet werden, an dem Ihr Cast-Gerät darauf zugreifen kann. Wenn Sie bereits einen Server haben, der HTTPS unterstützt, überspringen Sie die folgende Anleitung und schreiben Sie die URL, da Sie sie im nächsten Abschnitt benötigen.

Wenn Sie keinen Server zur Verfügung haben, können Sie Firebase Hosting oder ngrok verwenden.

Server ausführen

Nachdem du einen Dienst deiner Wahl eingerichtet hast, rufe app-start auf und starte deinen Server.

Notieren Sie sich die URL des gehosteten Empfängers. Sie benötigen ihn im nächsten Abschnitt.

4. Anwendung in der Cast Developer Console registrieren

Sie müssen Ihre Anwendung registrieren, um einen benutzerdefinierten Empfänger, wie in diesem Codelab erstellt, auf Chromecast-Geräten auszuführen. Nachdem Sie Ihre Anwendung registriert haben, erhalten Sie eine Anwendungs-ID, die Ihre Absenderanwendung zum Ausführen von API-Aufrufen verwenden muss, z. B. zum Starten einer Empfängeranwendung.

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

Klicken Sie auf „Neue App hinzufügen“.

Bild des Bildschirms „New Receiver Application“ (Neue Empfängeranwendung) mit markierter Option „Benutzerdefinierter Empfänger“

Wählen Sie „Benutzerdefinierter Empfänger“ aus.

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

Geben Sie die Details zum neuen Empfänger ein und verwenden Sie dabei die URL,

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

Sie müssen außerdem Ihr Google Cast-Gerät registrieren, damit es vor der Veröffentlichung auf die Empfängeranwendung zugreifen kann. Nachdem Sie die Receiver-App veröffentlicht haben, ist sie auf allen Google Cast-Geräten verfügbar. Für dieses Codelab sollten Sie eine nicht veröffentlichte Empfängeranwendung verwenden.

Abbildung 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ängergerät 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 kann 5 bis 15 Minuten dauern, bis der Empfänger und das Gerät für den Test bereit sind. Starten Sie das Cast-Gerät nach 5–15 Minuten neu.

5. Einen einfachen Livestream streamen

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

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

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

Der Empfänger besteht aus zwei Dateien. Eine einfache HTML-Datei mit dem Namen receiver.html, die den Cast-Kontext initialisiert, und einen Platzhalter für den Cast-Mediaplayer. Sie müssen diese Datei nicht ändern. Es gibt auch eine Datei mit dem Namen receiver.js, die alle unsere Logik für den Empfänger enthält.

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

Im Empfänger muss eine Logik hinzugefügt werden, um dem Cast Application Framework (CAF) mitzuteilen, dass der Stream live ist. Glücklicherweise ist dafür nur eine Zeile Code erforderlich. Fügen Sie dem Load-fänger in receiver.js die folgende Codezeile hinzu:

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

Wenn Sie den Streamtyp auf LIVE festlegen, wird die Live-Benutzeroberfläche von CAF aktiviert. In diesem Szenario springt CAF beim Beitritt des Streams automatisch zum Live-Edge des Streams. Wir haben noch keine Programmübersichtsdaten angegeben. Die Scrubbing-Leiste stellt daher die gesamte Länge des Suchbereichs eines Streams dar.

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 "Streamen" aus. Der Livestream sollte sofort abgespielt werden.

6. Programmübersicht hinzufügen

Die neue Unterstützung von Live-Inhalten in CAF umfasst nun auch die Anzeige von Programmübersichtsdaten auf dem Bildschirm in Apps von Empfängern und Absendern. Inhaltsanbieter sollten unbedingt Programmiermetadaten in ihre Empfängeranwendungen aufnehmen, um die Verwendung für Endnutzer zu verbessern, insbesondere für langlebige Livestreams wie TV-Kanäle.

Sie können CAF jetzt die Metadaten für mehrere Programme in einem einzigen Stream bereitstellen. Durch das Festlegen von Startzeitstempeln und -dauern für MediaMetadata-Objekte aktualisiert der Empfänger automatisch die Metadaten, die bei Absendern und Empfängern angezeigt werden, basierend auf der aktuellen Position 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;

In diesem 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 der Grenzen 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 der Funktion außerdem einen Aufruf für das Laden der Führungsdaten im Load Achsenabschnitt hinzu:

loadGuideData();

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

Wenn der Abspielkopf zu einem neuen Abschnitt im Container wechselt, erhält der Empfänger eine neue Medienstatusnachricht. Daher ist es sinnvoll, 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 zwei Programme zurückgegeben. Um die Metadaten für einen Stream zu aktualisieren, erstellen Sie einfach einen neuen Container und rufen setContainerMetadata wie im obigen Beispiel auf.

7. Suche deaktivieren

Die meisten Videostreams bestehen aus Segmenten, die eine Reihe von Videoframes enthalten. Sofern nicht anders angegeben, erlaubt 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);

Als Nächstes müssen wir Sprachbefehle deaktivieren, damit Zuschauer im Stream nicht vorbeispringen können, zum Beispiel „Hey Google, um 60 Sekunden zurückspulen“. Um die Sprachsuche zu deaktivieren, fügen wir einen Suchabfangen hinzu. Dieser Listener wird immer dann aufgerufen, wenn eine Suchanfrage gestellt wird. Wenn der von SEEK unterstützte Medienbefehl deaktiviert ist, lehnt der Interceptor 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 Livestreaming.