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

1. Überblick

Google Cast-Logo

In diesem Codelab erfährst du, wie du eine App für einen benutzerdefinierten Webempfänger erstellst, die die Cast Live Breaks API verwendet.

Was ist Google Cast?

Mit Google Cast können Nutzer Inhalte von einem Mobilgerät auf einen Fernseher streamen. Nutzer können dann ihr Mobilgerät 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 anhand der Checkliste für das Google Cast-Design hinzufügen.

Die Checkliste für das Design von Google Cast enthält eine einfache und vorhersehbare Checkliste für alle unterstützten Plattformen.

Ziele

Wenn du dieses Codelab durchgearbeitet hast, kannst du einen Cast Receiver erstellen, der die Live-APIs nutzt.

Lerninhalte

  • Informationen zum Umgang mit Live-Videoinhalten in Google Cast
  • Die verschiedenen Livestreaming-Szenarien konfigurieren, die von Google Cast unterstützt werden
  • So fügst du deinem Livestream Programmdaten hinzu

Voraussetzungen

Plattform

  • Sie müssen über Vorkenntnisse in der Webentwicklung verfügen.
  • Frühere Erfahrung bei der Entwicklung von Cast-Sender- und -Empfänger-Apps.

Wie werden Sie dieses Tutorial verwenden?

Nur lesen Lesen und die Übungen abschließen

Wie würden Sie Ihre Erfahrungen mit der Entwicklung 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. Empfänger lokal bereitstellen

Damit Sie Ihren Webempfänger mit einem Übertragungsgerät verwenden können, muss es an einem Ort gehostet werden, an dem Ihr Übertragungsgerät eine Verbindung herstellen kann. Sollte Ihnen bereits ein Server zur Verfügung stehen, der HTTPS unterstützt, überspringen Sie die folgende Anleitung und merken Sie sich die URL, da Sie sie im nächsten Abschnitt benötigen.

Falls Ihnen kein Server zur Verfügung steht, können Sie Firebase Hosting oder ngrok verwenden.

Server ausführen

Nachdem Sie den Dienst Ihrer Wahl eingerichtet haben, rufen Sie app-start auf und starten Sie den Server.

Notieren Sie sich die URL für Ihren gehosteten Empfänger. Sie benötigen sie im nächsten Abschnitt.

4. Apps in der Cast-Entwicklerkonsole registrieren

Sie müssen Ihre Anwendung registrieren, um einen benutzerdefinierten Empfänger, wie in diesem Codelab integriert, auf Chromecast-Geräten ausführen zu können. Nachdem Sie Ihre Anwendung registriert haben, erhalten Sie eine Anwendungs-ID, die Ihre Senderanwendung verwenden muss, um API-Aufrufe auszuführen, 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 Anwendung hinzufügen“.

Screenshot des Bildschirms „New Receiver Application“ (Anwendung für neuen Empfänger), wobei die Option „Custom Receiver“ (Benutzerdefinierter Empfänger) hervorgehoben ist

Wählen Sie "Benutzerdefinierter Empfänger" aus.

Screenshot des Bildschirms "Neuer benutzerdefinierter Empfänger" mit einer URL, die jemand in das Feld "Anwendungs-URL des Empfängers" eingibt

Gib die Details des neuen Empfängers ein und verwende die URL, die du letztendlich erhalten hast

im letzten Abschnitt. Notieren Sie sich die App-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 Ihre Empfangs-App zugreifen kann. Nach der Veröffentlichung ist die Empfangs-App für alle Google Cast-Geräte verfügbar. Für dieses Codelab empfiehlt es sich, mit einer nicht veröffentlichten Empfänger-App zu arbeiten.

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

Klicke auf „Neues Gerät hinzufügen“.

Bild des Dialogfelds "Cast Receiver-Gerät hinzufügen"

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

Es dauert 5 bis 15 Minuten, bis der Empfänger und das Gerät für den Test bereit sind. Warten Sie 5 bis 15 Minuten und starten Sie das Übertragungsgerät neu.

5. Einen einfachen Livestream streamen

Bild eines Android-Smartphones, auf dem ein Video abgespielt wird. Unten, direkt über den Steuerelementen des Videoplayers, wird die Meldung „Übertragung ins Wohnzimmer“ angezeigt.Bild eines Bildschirms in voller Größe, auf dem dasselbe Video wiedergegeben wird

Bevor Sie mit diesem Codelab beginnen, kann es hilfreich sein, sich den Live-Entwicklerleitfaden anzusehen, der einen Überblick über die Live-APIs bietet.

Für den Absender verwenden wir das Cactool, um eine Streamingsitzung zu starten. Der Empfänger ist so konzipiert, dass er automatisch die Wiedergabe eines Livestreams startet.

Der Empfänger besteht aus drei Dateien. Eine einfache HTML-Datei namens receiver.html, die die Hauptstruktur der App enthält. Sie müssen diese Datei nicht ändern. Es gibt auch eine Datei namens receiver.js, die die gesamte Logik für den Empfänger enthält. Schließlich gibt es noch ein metadata_service.js, das später im Codelab verwendet wird, um den Erhalt von Programmübersichtsdaten zu simulieren.

Öffnen Sie als Erstes Cactool in Chrome. Geben Sie die App-ID des Empfängers ein, die Sie in der Cast SDK Developer Console erhalten haben, und klicken Sie auf Festlegen.

Das Web Receiver Cast Application Framework (CAF) muss angewiesen werden, dass die wiederzugebenden Inhalte ein Livestream sind. Ändern Sie dazu die Anwendung mit der folgenden Codezeile. Fügen Sie ihn dem Haupttext des Load-Interceptors in receiver.js hinzu:

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

Wenn Sie den Streamtyp auf LIVE festlegen, wird die Live-UI von CAF aktiviert. Das Web Receiver SDK springt automatisch zum Rand des Livestreams. Es wurden noch keine Daten für die Live-Programmübersicht hinzugefügt. Die Scrubbing-Leiste stellt daher die volle Länge des Suchbereichs des Streams dar.

Speichere die Änderungen in receiver.js und starte eine Streamingsitzung mit Cactool. Klicke dazu auf das Cast-Symbol und wähle ein Übertragungsgerät aus. Die Wiedergabe des Livestreams sollte sofort beginnen.

6. Programmübersichtsdaten hinzufügen

Die CAF-Unterstützung für Live-Inhalte umfasst jetzt auch die Anzeige von Programmübersichtsdaten in Empfänger- und Senderanwendungen. Content-Anbietern wird dringend empfohlen, Programmmetadaten in ihre Receiver-Anwendungen aufzunehmen, um die Nutzererfahrung zu verbessern, insbesondere bei lang andauernden Livestreams wie TV-Kanälen.

CAF unterstützt das Festlegen von Metadaten für mehrere Programme in einem einzelnen Stream. Durch Festlegen von Startzeitstempeln und Startdauer für MediaMetadata-Objekte aktualisiert der Empfänger automatisch die Metadaten des Absenders und das Overlay, basierend auf der aktuellen Position des Players im Stream. Im Folgenden finden Sie ein Beispiel für die APIs und ihre allgemeine Verwendung.

// 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 verwenden wir einen Beispiel-Metadatendienst, um die Metadaten für unseren Livestream bereitzustellen. Um eine Liste der Programmmetadaten zu erstellen, erstellen Sie einen Container. Das ContainerMetadata enthält eine Liste mit MediaMetadata-Objekten für einen einzelnen Medienstream. Jedes MediaMetadata-Objekt stellt einen einzelnen Abschnitt im Container dar. Wenn sich der Abspielkopf innerhalb des Rahmens eines bestimmten Abschnitts 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 für CAF bereitzustellen.

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

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

Fügen Sie außerdem einen Aufruf zur Funktion zum Laden der Anleitungsdaten im Load-Interceptor hinzu:

loadGuideData();

Speichere die Datei „receiver.js“ und starte eine Streamingsitzung. Start- und Endzeit des Programms sowie Titel sollten auf dem Bildschirm angezeigt werden.

Eine neue Medienstatusnachricht wird vom Empfänger an alle Absender gesendet, wenn der Abspielkopf in einen neuen Abschnitt im Container wechselt, damit die Absenderanwendungen ihre Benutzeroberfläche aktualisieren können. Es wird empfohlen, dass Empfängeranwendungen die Containermetadaten in einem Abfangprogramm für den Medienstatus aktualisieren, um weiterhin Programminformationen an die Absenderanwendungen senden zu können. In unserem Beispieldienst werden die aktuellen Programmmetadaten und die Metadaten der nächsten beiden Programme zurückgegeben. Wenn Sie die Metadaten für einen Stream aktualisieren möchten, erstellen Sie einen neuen Container und rufen Sie setContainerMetadata wie im vorherigen Beispiel auf.

7. Suche deaktivieren

Die meisten Videostreams bestehen aus Segmenten, die eine Reihe von Videoframes enthalten. Sofern nicht anders angegeben, ermöglicht CAF den Nutzern die Suche innerhalb dieser Segmente. Der Web Receiver kann dies festlegen, indem er einige verfügbare APIs aufruft.

Entfernen Sie im Load-Interceptor den von SEEK unterstützten Medienbefehl. Dadurch wird die Suche auf allen mobilen Sendern und Touchoberflächen deaktiviert. Fügen Sie den folgenden Code nach den Definitionen für die SDK-Instanzvariablen in receiver.js ein.

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

Um Sprachbefehle von Assistenten wie Ok Google, 60 Sekunden zurückspulen zu deaktivieren, sollten Sie die Suchfunktion verwenden. Dieser Interceptor wird bei jeder Suchanfrage aufgerufen. 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:

/**
 * 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.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // 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 seekRequestData;
    });

Speichere die Datei „receiver.js“ und starte eine Streamingsitzung. Die Suche ist dann nicht mehr möglich.

8. Glückwunsch

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

Weitere Informationen finden Sie im Entwicklerhandbuch für Livestreaming.