1. Übersicht
In diesem Codelab erfahren Sie, wie Sie eine benutzerdefinierte Web Receiver-App erstellen, 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 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 basierend auf der Google Cast-Design-Checkliste hinzufügen.
Die Google Cast-Design-Checkliste soll dafür sorgen, dass die Cast-User Experience auf allen unterstützten Plattformen einfach und vorhersehbar ist.
Ziele
Nach Abschluss dieses Codelabs haben Sie einen Cast-Receiver erstellt, der die Live-APIs nutzt.
Lerninhalte
- Umgang mit Livevideoinhalten in Google Cast
- So konfigurieren Sie die verschiedenen von Google Cast unterstützten Livestreamingszenarien.
- Programm-Daten zu deinem Livestream hinzufügen
Voraussetzungen
- Die aktuelle Version des Browsers Google Chrome.
- Ein HTTPS-Hostingdienst wie Firebase Hosting oder ngrok.
- Ein Google Cast-Gerät wie ein Chromecast oder Android TV, das für den Internetzugriff konfiguriert ist.
- Einen Fernseher oder Monitor mit HDMI-Eingang oder einen Google Home Hub
Erfahrung
- Sie benötigen Vorkenntnisse in der Webentwicklung.
- Sie haben bereits Cast-Sender- und ‑Empfängeranwendungen entwickelt.
Wie werden Sie diese Anleitung verwenden?
Wie würden Sie Ihre Erfahrung mit der Entwicklung von Web-Apps bewerten?
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 du deinen Web Receiver mit einem Google Cast-Gerät verwenden kannst, muss er an einem Ort gehostet werden, an dem dein Google Cast-Gerät ihn erreichen kann. Wenn Sie bereits einen Server haben, der HTTPS unterstützt, überspringen Sie die folgenden Anweisungen und notieren Sie sich 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 Sie den gewünschten Dienst 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. Anwendung in der Cast Developer Console registrieren
Sie müssen Ihre Anwendung registrieren, um einen benutzerdefinierten Receiver, wie in diesem Codelab beschrieben, auf Chromecast-Geräten ausführen zu können. Nachdem Sie Ihre Anwendung registriert haben, erhalten Sie eine Anwendungs-ID, die Ihre Senderanwendung für API-Aufrufe verwenden muss, z. B. zum Starten einer Empfängeranwendung.
Klicken Sie auf „Neue Anwendung hinzufügen“.
Wählen Sie „Benutzerdefinierter Receiver“ aus. Das ist der Receiver, den wir erstellen.
Geben Sie die Details des neuen Empfängers ein. Verwenden Sie dabei die URL, die Sie erhalten haben.
im letzten Abschnitt. Notieren Sie sich die Anwendungs-ID, die Ihrem neuen Empfänger zugewiesen wurde.
Außerdem müssen Sie Ihr Google Cast-Gerät registrieren, damit es auf Ihre Receiver-Anwendung zugreifen kann, bevor Sie sie veröffentlichen. Sobald Sie Ihre Empfängeranwendung veröffentlicht haben, ist sie für alle Google Cast-Geräte verfügbar. Für dieses Codelab wird empfohlen, mit einer unveröffentlichten Empfängeranwendung zu arbeiten.
Klicken Sie auf „Neues Gerät hinzufügen“.
Gib die Seriennummer ein, die auf der Rückseite deines Cast-Geräts aufgedruckt ist, und gib dem Gerät einen aussagekräftigen Namen. Sie können die Seriennummer auch finden, indem Sie Ihren Bildschirm in Chrome spiegeln, wenn Sie auf die Google Cast SDK Developer Console zugreifen.
Es dauert 5 bis 15 Minuten, bis der Empfänger und das Gerät für den Test bereit sind. Nach 5 bis 15 Minuten musst du dein Cast-Gerät neu starten.
5. Einfachen Livestream streamen
Bevor Sie mit diesem Codelab beginnen, sollten Sie sich den Live-Entwicklerleitfaden ansehen, der einen Überblick über die Live-APIs bietet.
Als Absender verwenden wir Cactool, um eine Cast-Sitzung zu starten. Der Empfänger ist so konzipiert, dass er automatisch mit der Wiedergabe eines Livestreams beginnt.
Der Receiver 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. Außerdem gibt es eine Datei namens receiver.js, die die gesamte Logik für den Receiver enthält. Schließlich gibt es auch ein metadata_service.js, das später im Codelab verwendet wird, um das Abrufen von Programminformationen zu simulieren.
Öffnen Sie zuerst das Cactool in Chrome. Geben Sie die Receiver Application ID ein, die Sie in der Cast SDK Developer Console erhalten haben, und klicken Sie auf Set (Festlegen).
Das Web Receiver Cast Application Framework (CAF) muss darüber informiert werden, dass es sich bei den abzuspielenden Inhalten um einen Livestream handelt. Ändern Sie dazu die Anwendung mit der folgenden Codezeile. Fügen Sie ihn dem Hauptteil des Load-Interceptors in receiver.js hinzu:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Wenn du den Streamtyp auf LIVE festlegst, wird die Live-Benutzeroberfläche von CAF aktiviert. Das Web Receiver SDK springt automatisch zum Live-Edge des Streams. Es wurden noch keine Daten zum Live-Programmguide hinzugefügt. Daher stellt die Scrubbing-Leiste die gesamte Länge des Streams dar, die gesucht werden kann.
Speichere deine Änderungen an receiver.js und starte eine Cast-Sitzung im Cactool, indem du auf das Cast-Symbol klickst und ein Zielgerät für das Streaming auswählst. Der Livestream sollte sofort wiedergegeben werden.
6. Programmdaten hinzufügen
Die Unterstützung von CAF für Live-Inhalte umfasst jetzt auch die Anzeige von Programminformationen in Empfänger- und Senderanwendungen. Inhalteanbieter werden dringend gebeten, Programmierungsmetadaten in ihre Empfängeranwendungen aufzunehmen, um die Nutzerfreundlichkeit zu verbessern, insbesondere bei langen Livestreams wie TV-Kanälen.
CAF unterstützt das Festlegen von Metadaten für mehrere Programme in einem einzelnen Stream. Wenn Sie Startzeitstempel und ‑dauern für MediaMetadata-Objekte festlegen, aktualisiert der Empfänger die auf Absendern und im Overlay angezeigten Metadaten automatisch basierend auf der aktuellen Position des Players im Stream. Unten 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. Erstellen Sie einen Container, um eine Liste mit Programmmetadaten zu erstellen. ContainerMetadata enthält eine Liste von MediaMetadata-Objekten für einen einzelnen Media-Stream. Jedes MediaMetadata-Objekt stellt einen einzelnen Bereich im Container dar. Wenn sich der Abspielkopf innerhalb der Grenzen eines bestimmten Abschnitts befindet, werden die zugehörigen Metadaten automatisch in den Media-Status kopiert. Fügen Sie der Datei receiver.js den folgenden Code hinzu, um die Beispielmetadaten von 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 der Funktion zum Laden der Guide-Daten in den Lade-Interceptor ein:
loadGuideData();
Speichern Sie die Datei receiver.js und starten Sie eine Cast-Sitzung. Auf dem Bildschirm sollten die Startzeit, die Endzeit und der Titel der Sendung angezeigt werden.
Wenn der Playhead zu einem neuen Abschnitt im Container wechselt, wird vom Empfänger eine neue Statusmeldung für die Medien an alle Absender gesendet, damit die Absenderanwendungen ihre Benutzeroberfläche aktualisieren können. Es wird empfohlen, dass Empfängeranwendungen die Containermetadaten in einem Media Status Interceptor aktualisieren, um weiterhin Programminformationen an die Senderanwendungen zu senden. In unserem Beispieldienst geben wir die Metadaten des aktuellen Programms sowie die Metadaten der nächsten beiden Programme zurück. 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, können Nutzer in diesen Segmenten suchen. Der Web Receiver kann dies durch Aufrufen einiger verfügbarer APIs angeben.
Entfernen Sie im Load-Interceptor den Befehl für Medien, die SEEK unterstützen. Dadurch wird die Suche auf allen mobilen Sender- und Touch-Oberflä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);
Wenn du Assistant-basierte Sprachbefehle zum Suchen deaktivieren möchtest, z. B. Ok Google, spule 60 Sekunden zurück, solltest du den Seek-Interceptor verwenden. Dieser Interceptor wird jedes Mal aufgerufen, wenn eine Suchanfrage gestellt wird. Wenn der unterstützte Media-Befehl SEEK deaktiviert ist, lehnt der Interceptor die Seek-Anfrage 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;
});
Speichern Sie die Datei receiver.js und starten Sie eine Cast-Sitzung. Sie sollten im Livestream nicht mehr vorspulen können.
8. Glückwunsch
Jetzt wissen Sie, wie Sie mit dem neuesten Cast Receiver SDK eine benutzerdefinierte Empfängeranwendung erstellen.
Weitere Informationen finden Sie im Entwicklerleitfaden für Livestreaming.