Benutzerdefinierten Web-Receiver erstellen

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 eine benutzerdefinierte Web-Receiver-App erstellst, um Inhalte auf für Google Cast optimierten Geräten wiederzugeben.

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 oder ihren Chrome-Browser dann als Fernbedienung für die Medienwiedergabe auf dem Fernseher verwenden.

Mit dem Google Cast SDK kann Ihre App Geräte steuern, die für Google Cast optimiert sind, beispielsweise einen Fernseher oder ein Soundsystem. Das Cast SDK stellt Ihnen die erforderlichen UI-Komponenten gemäß der Google Cast-Design-Checkliste zur Verfügung.

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

Ziele

Wenn Sie dieses Codelab abgeschlossen haben, steht Ihnen eine HTML5-App zur Verfügung. Sie können als Ihr eigener benutzerdefinierter Empfänger Videos auf für Google Cast optimierten Geräten wiedergeben.

Lerninhalte

  • Einrichtung für die Empfängerentwicklung
  • Die Grundlagen eines für Google Cast optimierten Empfängers, der auf dem Cast Application Framework basiert.
  • So erhalten Sie ein gestreamtes Video
  • So binden Sie den Debug-Logger ein.
  • Empfänger für Smart Displays optimieren

Voraussetzungen

Plattform

  • Dafür benötigen Sie Vorkenntnisse in der Webentwicklung.
  • Außerdem benötigst du Vorkenntnisse zum Fernsehen.

Wie verwenden Sie diese Anleitung?

Nur durchlesen Lies dir die Übungen durch

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

Anfänger Fortgeschritten Profi

Wie würdest du deine Erfahrung mit dem Fernsehen 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 die folgende Anleitung und schreiben Sie die URL, da Sie sie im nächsten Abschnitt benötigen.

Wenn du keinen Server zur Verfügung hast, 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-start
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, der Ihnen einen global verfügbaren HTTPS-gesicherten Endpunkt zuweist, 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.

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 Receiver 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. Beispiel-App ausführen

Google Chrome-Logo

Während wir darauf warten, dass unsere neue Empfängeranwendung zum Testen bereit ist, sehen wir uns an, wie eine fertige Beispiel-App für Empfänger aussieht. Der Empfänger, der erstellt wird, kann Medien mit Streaming mit adaptiver Bitrate wiedergeben. Hierfür werden Beispielinhalte verwendet, die für das dynamische adaptive Streaming über HTTP (DASH) codiert sind.

Öffnen Sie in Ihrem Browser das Command and Control (CaC)-Tool.

Bild des Tabs „Cast Connect“ und der Logger-Steuerung im CaC-Tool (Command and Control)

  1. Sie sollten das CaC-Tool sehen.
  2. Verwenden Sie die Standard-Beispiel-ID des Empfängers und klicken Sie auf die Schaltfläche „App-ID festlegen“.
  3. Klicken Sie oben links auf das Cast-Symbol und wählen Sie Ihr Google Cast-Gerät aus.

Bild des Tabs „Cast Connect“ und der Logger-Steuerung des Befehls and Control Tool (CaC), der darauf hinweist, dass es mit einer Receiver App verbunden ist

  1. Gehen Sie oben zum Tab „Medien laden“.

Bild des Tabs „Medien laden“ im Command and Control (CaC)-Tool

  1. Klicken Sie auf die Schaltfläche „Nach Inhalt laden“, um ein Beispielvideo abzuspielen.
  2. Das Video wird auf Ihrem Google Cast-Gerät abgespielt, um die grundlegende Funktionalität des Empfängers mit dem Standardempfänger zu zeigen.

6. Startprojekt vorbereiten

Wir müssen die heruntergeladene Start-App für Google Cast unterstützen. Im Folgenden finden Sie einige Begriffe von Google Cast, die wir in diesem Codelab verwenden werden:

  • eine Absender-App auf einem Mobilgerät oder Laptop ausgeführt wird,
  • Eine Empfänger-App wird auf dem Google Cast-Gerät ausgeführt.

Jetzt können Sie mit Ihrem bevorzugten Texteditor auf dem Projekt „Starter“ aufbauen:

  1. Wählen Sie das Verzeichnis Ordnersymbolapp-start aus dem Beispielcode-Download aus.
  2. js/receiver.js und index.html öffnen

Hinweis: Während Sie dieses Codelab durcharbeiten, sollte http-server von Ihnen vorgenommene Änderungen übernehmen. Wenn dies der Fall ist, versuchen Sie, http-server zu beenden und neu zu starten.

App-Design

Die Empfänger-App initialisiert die Streaming-Sitzung und wartet, bis eine LOAD-Anfrage (mit anderen Worten: der Befehl zur Wiedergabe eines Medienelements) von einem Absender eingeht.

Die App besteht aus einer Hauptansicht (in index.html definiert) und einer JavaScript-Datei namens js/receiver.js, die die gesamte Logik für unseren Empfänger enthält.

index.html

Diese HTML-Datei enthält die Benutzeroberfläche der Empfänger-App. Diese ist vorerst leer und wird im Code-Lab hinzugefügt.

Empfänger.js

Dieses Skript verwaltet die gesamte Logik für unsere Receiver-App. Im Moment ist es nur eine leere Datei, aber wir werden daraus einen voll funktionsfähigen Cast-Empfänger mit wenigen Codezeilen im nächsten Abschnitt machen.

7. Einen einfachen Cast-Empfänger

Ein grundlegender Cast-Empfänger initialisiert die Sitzung beim Start. Dies ist erforderlich, um allen verbundenen Absenderanwendungen mitzuteilen, dass der Empfänger erfolgreich gestartet wurde. Außerdem ist das neue SDK vorkonfiguriert, um Streaming-Medien mit adaptiver Bitrate (mithilfe von DASH, HLS und Smooth Streaming) und einfache MP4-Dateien zu verarbeiten. Probieren Sie es aus.

Initialisierung

Fügen Sie index.html im Header den folgenden Code hinzu:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

Fügen Sie den folgenden Code in index.html <body> vor dem <footer> ein: receiver.js, wird geladen, um dem Empfänger-SDK ausreichend Speicherplatz für die standardmäßige Empfänger-UI bereitzustellen, die mit dem soeben hinzugefügten Skript versendet wird.

<cast-media-player></cast-media-player>

Nun müssen wir das SDK in js/receiver.js initialisieren. Es besteht aus:

  • Sie beziehen sich auf CastReceiverContext, Ihren primären Einstiegspunkt für das gesamte Receiver SDK
  • Speicherung eines Verweises auf PlayerManager, die Wiedergabe von Objekten und Bereitstellung aller Hooks, die du zum Anschließen deiner eigenen benutzerdefinierten Logik benötigst
  • Initialisierung des SDK durch Aufruf von start() für CastReceiverContext

Fügen Sie js/receiver.js Folgendes hinzu:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. Grundlegende Videoinhalte streamen

In diesem Codelab kannst du mit dem CaC-Tool deinen brandneuen Receiver ausprobieren.

Öffnen Sie in Ihrem Webbrowser das Command and Control (CaC)-Tool.

Bild des Tabs „Cast Connect“ und der Logger-Steuerung im CaC-Tool (Command and Control)

Ersetzen Sie Ihre eigene App-ID, die zuvor im Feld registriert wurde. Klicken Sie dann auf „App-ID festlegen“. Dadurch wird das Tool angewiesen, den Receiver beim Start der Sitzung zu verwenden.

Medien streamen

Wenn Sie Medien auf einem Übertragungsgerät abspielen möchten, müssen folgende Voraussetzungen erfüllt sein:

  1. Der Absender erstellt über das Cast SDK ein MediaInfo-Objekt vom Typ JSON, mit dem ein Mediaplan modelliert wird.
  2. Der Absender stellt eine Verbindung zum Übertragungsgerät her, um die Empfängeranwendung zu starten.
  3. Der Empfänger lädt das MediaInfo-Objekt über eine LOAD-Anfrage, um den Inhalt wiederzugeben.
  4. Der Empfänger überwacht und verfolgt den Medienstatus.
  5. Der Absender sendet Wiedergabebefehle an den Empfänger, um die Wiedergabe basierend auf Nutzerinteraktionen mit der Absender-App zu steuern.

In diesem ersten grundlegenden Versuch wird MediaInfo mit einer spielbaren Asset-URL gefüllt, die unter MediaInfo.contentUrl gespeichert wird.

Ein wirklicher Absender verwendet eine anwendungsspezifische Medienkennung in MediaInfo.contentId. Der Empfänger verwendet die contentId als Kennung, um entsprechende Back-End-API-Aufrufe durchzuführen, um die tatsächliche Asset-URL aufzulösen und auf MediaInfo.contentUrl. zu setzen. Der Empfänger verarbeitet auch Aufgaben wie die DRM-Lizenzerwerb oder das Einschleusen von Informationen zu Werbeunterbrechungen.

Im nächsten Abschnitt wird der Empfänger auf ähnliche Weise erweitert. Klicke zunächst auf das Cast-Symbol und wähle dein Gerät aus, um den Empfänger zu öffnen.

Bild des Tabs „Cast Connect“ und der Logger-Steuerung des Befehls and Control Tool (CaC), der darauf hinweist, dass es mit einer Receiver App verbunden ist

Wechseln Sie zum Tab „Medien laden“ und klicken Sie auf die Schaltfläche „Nach Inhalt laden“. Der Empfänger sollte die Beispielinhalte abspielen.

Bild des Tabs „Medien laden“ im Command and Control (CaC)-Tool

Das Receiver SDK ist also sofort einsatzbereit:

  • Streamingsitzung wird initialisiert
  • Eingehende LOAD-Anfragen von Absendern verarbeiten, die spielbare Assets enthalten
  • Stelle eine einfache Player-Benutzeroberfläche bereit, die auf dem großen Bildschirm angezeigt werden kann.

Sehen Sie sich das CaC-Tool und den zugehörigen Code an, bevor Sie mit dem nächsten Abschnitt fortfahren. In diesem Abschnitt wird der Empfänger erweitert, sodass er mit einer einfachen Beispiel-API sprechen kann, um eingehende LOAD-Anfragen von Absendern zu erfüllen.

9. In eine externe API einbinden

Gemäß der Art und Weise, wie die meisten Entwickler in Echtzeit mit ihren Cast-Empfängern in realen Anwendungen interagieren, ändern wir unseren Empfänger so, dass LOAD-Anfragen verarbeitet werden, die auf den gewünschten Medieninhalt anhand ihres API-Schlüssels verweisen, anstatt eine abspielbare Asset-URL zu senden.

Dies geschieht in der Regel aus folgenden Gründen:

  • Der Absender kennt die Inhalts-URL möglicherweise nicht.
  • Die Cast-Anwendung ist so konzipiert, dass sie die Authentifizierung, andere Geschäftslogiken oder API-Aufrufe direkt auf dem Empfänger verarbeitet.

Diese Funktion ist hauptsächlich in der Methode PlayerManager setMessageInterceptor() implementiert. Dadurch können Sie eingehende Nachrichten nach Typ abfangen und ändern, bevor sie den internen Nachrichten-Handler des SDKs erreichen. In diesem Abschnitt geht es um LOAD-Anfragen, für die wir Folgendes tun:

  • Lesen Sie die eingehende LOAD-Anfrage und ihre benutzerdefinierten contentId.
  • Rufe die API GET auf, um das streambare Asset anhand seines contentId zu suchen.
  • Ändern Sie die LOAD-Anfrage mit der URL des Streams.
  • Ändern Sie das MediaInformation-Objekt, um die Parameter für den Streamtyp festzulegen.
  • Übergeben Sie die Anfrage zur Wiedergabe an das SDK oder lehnen Sie den Befehl ab, wenn die Medien nicht gesucht werden können.

In der bereitgestellten Beispiel-API werden die SDK-Hooks zum Anpassen gängiger Empfängeraufgaben präsentiert. Gleichzeitig ist die API jedoch standardmäßig einsatzbereit.

Beispiel-API

Rufen Sie in Ihrem Browser die Seite https://storage.googleapis.com/cpe-sample-media/content.json auf und sehen Sie sich unseren Beispielvideokatalog an. Die Inhalte enthalten URLs für Posterbilder im PNG-Format sowie DASH- und HLS-Streams. Die DASH- und HLS-Streams verweisen auf abgeleitete Video- und Audioquellen, die in fragmentierten MP4-Containern gespeichert sind.

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

Im nächsten Schritt wird der Schlüssel jedes Eintrags (z. B. bbb, fbb_ad) der URL des Streams zugeordnet, nachdem der Empfänger mit einer LOAD-Anfrage aufgerufen wurde.

Anfrage LOAD abfangen

In diesem Schritt erstellen wir einen Load fanger mit einer Funktion, die eine XHR-Anfrage an die gehostete Datei JSON sendet. Sobald die Datei JSON abgerufen wurde, parsen wir den Inhalt und legen die Metadaten fest. In den folgenden Abschnitten passen wir die MediaInformation-Parameter an, um den Inhaltstyp anzugeben.

Fügen Sie der Datei js/receiver.js direkt vor dem Aufruf von context.start() den folgenden Code hinzu.

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

Im nächsten Abschnitt wird beschrieben, wie die media-Property der Ladeanfrage für DASH-Inhalte konfiguriert wird.

DASH-Beispielinhalt der API verwenden

Nachdem wir das Abfangen von Daten vorbereitet haben, legen wir dem Inhaltstyp den Receiver fest. Der Empfänger erhält die URL der Masterplaylist und den Stream-MIME-Typ. Fügen Sie der Datei js/Receiver.js im LOAD-Abfangprogramm Promise() den folgenden Code hinzu:

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

Wenn Sie diesen Schritt abgeschlossen haben, können Sie mit dem Test fortfahren und versuchen, den DASH-Inhalt zu laden. Wenn Sie stattdessen das Laden mit HLS-Inhalten testen möchten, fahren Sie mit dem nächsten Schritt fort.

HLS-Beispielinhalt der Beispiel-API verwenden

Die Beispiel-API enthält HLS-Inhalte sowie DASH. Neben dem Festlegen von contentType wie im vorherigen Schritt benötigt die Ladeanfrage einige zusätzliche Properties, um die HLS-Beispiel-URLs der Beispiel-API zu verwenden. Wenn der Empfänger für die Wiedergabe von HLS-Streams konfiguriert ist, wird als Transportcontainer (TS) als Standardtyp erwartet. Wenn nur die Property contentUrl geändert wird, versucht der Empfänger, die MP4-Beispieldateien im TS-Format zu öffnen. In der Ladeanfrage sollte das Objekt MediaInformation mit zusätzlichen Eigenschaften geändert werden, damit der Empfänger weiß, dass der Inhalt vom Typ MP4 und nicht vom Typ "TS" ist. Fügen Sie der Datei „js/Receiver.js“ im Load fanger folgenden Code hinzu, um die Attribute contentUrl und contentType zu ändern. Fügen Sie außerdem die Properties HlsSegmentFormat und HlsVideoSegmentFormat hinzu.

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

Testen

Öffnen Sie noch einmal das Command and Control (CaC) Tool und legen Sie Ihre App-ID auf die App-ID des Empfängers fest. Wählen Sie Ihr Gerät über das Cast-Symbol aus.

Gehen Sie zum Tab „Medien laden“. Dieses Mal löschen Sie den Text im Feld „Content-URL“ neben der Schaltfläche „Nach Inhalt laden“. Dadurch wird unsere Anwendung gezwungen, eine LOAD-Anfrage zu senden, die nur den Verweis contentId auf unsere Medien enthält.

Bild des Tabs „Medien laden“ im Command and Control (CaC)-Tool

Wenn alles gut mit Ihren Änderungen am Empfänger funktioniert hat, sollte das Abfangen das MediaInfo-Objekt so gestalten, dass es vom SDK auf dem Bildschirm wiedergegeben werden kann.

Klicken Sie auf die Schaltfläche "Nach Inhalt laden", um zu sehen, ob Ihre Medien korrekt wiedergegeben werden. Sie können die Content-ID in der Datei content.json durch eine andere ID ersetzen.

10. Für Smart Displays optimieren

Smart Displays sind Geräte mit Touchfunktion, über die Empfängeranwendungen die Steuerung per Touchscreen unterstützen.

In diesem Abschnitt wird erläutert, wie du die Empfängeranwendung auf Smart Displays optimieren und die Player-Steuerelemente anpassen kannst.

Auf UI-Steuerelemente zugreifen

Das UI-Steuerungsobjekt für Smart Displays kann über cast.framework.ui.Controls.GetInstance() aufgerufen werden. Fügen Sie der Datei js/receiver.js über context.start() den folgenden Code hinzu:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

Wenn du das Element „lt-cast-media-player&gt“ nicht verwendest, musst du touchScreenOptimizedApp in CastReceiverOptions festlegen. In diesem Codelab verwenden wir das Element „lt-cast-media-player&gt“.

context.start({ touchScreenOptimizedApp: true });

Jeder Anzeigenfläche werden auf Grundlage von MetadataType und MediaStatus.supportedMediaCommands Standardsteuerungsschaltflächen zugewiesen.

Videosteuerelemente

Bei MetadataType.MOVIE, MetadataType.TV_SHOW und MetadataType.GENERIC wird das UI-Steuerelemente-Objekt für Smart Displays wie im folgenden Beispiel angezeigt.

Bild eines Videos, das mit UI-Steuerelementen eingeblendet wird

  1. --playback-logo-image
  2. MediaMetadata.subtitle
  3. MediaMetadata.title
  4. MediaStatus.currentTime
  5. MediaInformation.duration
  6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
  7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
  8. PLAY/PAUSE
  9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
  10. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

Audiosteuerung

Bei MetadataType.MUSIC_TRACK wird das UI-Steuerungsobjekt für Smart Displays so angezeigt:

Bild von Musik, die über UI-Steuerelemente gespielt wird

  1. --playback-logo-image
  2. MusicTrackMediaMetadata.albumName
  3. MusicTrackMediaMetadata.title
  4. MusicTrackMediaMetadata.albumArtist
  5. MusicTrackMediaMetadata.images[0]
  6. MediaStatus.currentTime
  7. MediaInformation.duration
  8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
  9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
  10. PLAY/PAUSE
  11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
  12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Unterstützte Medienbefehle aktualisieren

Das UI-Steuerelemente-Objekt bestimmt auch anhand von MediaStatus.supportedMediaCommands, ob ein ControlsButton angezeigt wird oder nicht.

Wenn der Wert von supportedMediaCommands gleich ALL_BASIC_MEDIA ist, wird das Standardsteuerelementeslayout so angezeigt:

Bild der Steuerelemente des Mediaplayers: Fortschrittsanzeige, Schaltfläche „Wiedergabe“ und Schaltflächen „Vorwärts springen“ und „Zurückspulen“

Wenn der Wert von supportedMediaCommands gleich ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT ist, wird das Standardsteuerelementeslayout so angezeigt:

Bild der Steuerelemente des Mediaplayers: Fortschrittsanzeige, Schaltfläche „Abspielen“ und „Zurückspulen“ und „Vorheriges Video springen“ und Schaltflächen „Nächstes Video“ >

Wenn der Wert „supportedMediaCommands“ gleich PAUSE | QUEUE_PREV | QUEUE_NEXT ist, wird das Standardsteuerelementeslayout so angezeigt:

Bild der Steuerelemente des Mediaplayers: Fortschrittsanzeige, Schaltfläche „Wiedergabe“ und Schaltflächen „Zurück zur Warteschlange“ und „Nächstes Video in der Warteschlange“ sind aktiviert.

Wenn Text-Tracks verfügbar sind, wird die Untertitel-Schaltfläche immer bei SLOT_1 angezeigt.

Bild der Steuerelemente des Mediaplayers: Fortschrittsanzeige, Schaltfläche „Wiedergeben“ und Schaltflächen „Zurück“ und „Zurück“ und „Weiter“ sowie Schaltflächen „Untertitel“ aktiviert

Wenn Sie den Wert von supportedMediaCommands nach dem Start eines Empfängerkontexts dynamisch ändern möchten, können Sie PlayerManager.setSupportedMediaCommands aufrufen und den Wert überschreiben. Sie können auch einen neuen Befehl mit addSupportedMediaCommands hinzufügen oder einen vorhandenen Befehl mit removeSupportedMediaCommands entfernen.

Steuerungsschaltflächen anpassen

Sie können die Steuerelemente mithilfe von PlayerDataBinder anpassen. Fügen Sie den folgenden Code in Ihre js/receiver.js-Datei unter „touchControls“ ein, um die erste Anzeigenfläche Ihrer Steuerelemente festzulegen:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. Mediensuche auf Smart Displays einrichten

Media Browsing ist eine Funktion des CAF-Receivers, mit der Nutzer zusätzliche Inhalte auf Touchgeräten entdecken können. Für die Implementierung verwenden Sie PlayerDataBinder, um die BrowseContent-UI festzulegen. Anschließend können Sie ihn anhand der Inhalte, die Sie präsentieren möchten, mit BrowseItems füllen.

Inhalte durchsuchen

Hier ein Beispiel für die UI von BrowseContent und ihre Eigenschaften:

Bild der BrowsingContent-UI mit zwei Video-Thumbnails und einem Drittel

  1. BrowseContent.title
  2. BrowseContent.items

Seitenverhältnis

Verwenden Sie targetAspectRatio property, um das beste Seitenverhältnis für Ihre Bild-Assets auszuwählen. Das CAF Receiver SDK unterstützt drei Seitenverhältnisse: SQUARE_1_TO_1, PORTRAIT_2_TO_3 und LANDSCAPE_16_TO_9.

Artikel durchsuchen

Verwenden Sie BrowseItem, um Titel, Untertitel, Dauer und Bild für jedes Element anzuzeigen:

Bild der BrowsingContent-UI mit zwei Video-Thumbnails und einem Drittel

  1. BrowseItem.image
  2. BrowseItem.duration
  3. BrowseItem.title
  4. BrowseItem.subtitle

Daten zur Mediasuche festlegen

Du kannst eine Liste mit Medieninhalten zum Surfen zur Verfügung stellen, indem du setBrowseContent aufrufst. Fügen Sie der Datei js/receiver.js unter dem playerDataBinder und im MEDIA_CHANGED-Ereignis-Listener den folgenden Code hinzu, um die Elemente zum Durchsuchen mit dem Titel "Nächstes Video" festzulegen.

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

Durch Klicken auf ein Media-Suchelement wird das LOAD-Abfangen ausgelöst. Fügen Sie den folgenden Code zu Ihrem LOAD-Abfangprogramm hinzu, um request.media.contentId der request.media.entity aus dem Media Browsing-Element zuzuordnen:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

Du kannst das BrowseContent-Objekt auch auf null setzen, um die Media Browsing-UI zu entfernen.

12. Debugging-Empfänger-Apps

Mit dem Cast Receiver SDK haben Entwickler eine weitere Option, mit der sie Fehler in Apps von Empfängern ganz einfach beheben können. Dafür werden die CastDebugLogger API und das CaC-Tool (Companion) genutzt, um Protokolle zu erstellen.

Initialisierung

Fügen Sie das CastDebugLogger-Quellskript in die Datei „index.html“ ein, um die API einzubinden. Die Quelle sollte im Tag <head> nach der Deklaration des Cast Receiver SDK deklariert werden.

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

Fügen Sie in js/receiver.js am Anfang der Datei und unter dem playerManager den folgenden Code ein, um die Instanz CastDebugLogger abzurufen und den Logger zu aktivieren:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

Wenn der Debug-Logger aktiviert ist, wird auf dem Empfänger ein Overlay mit DEBUG MODE angezeigt.

Bild eines Videos, das mit einer Nachricht im DEBUG MODE (vor dem roten Hintergrund) links oben im Frame wiedergegeben wird

Spielerereignisse protokollieren

Mit CastDebugLogger kannst du Spielerereignisse, die vom CAF Receiver SDK ausgelöst werden, ganz einfach protokollieren und verschiedene Ereignisprotokollierungsebenen verwenden. In der loggerLevelByEvents-Konfiguration wird mit cast.framework.events.EventType und cast.framework.events.category angegeben, welche Ereignisse protokolliert werden.

Füge den folgenden Code unter der Deklaration castDebugLogger ein, um zu protokollieren, wann ein CORE-Ereignis eines Spielers ausgelöst oder eine mediaStatus-Änderung übertragen wird:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

Meldungen und benutzerdefinierte Tags protokollieren

Mit der CastDebugLogger API können Sie Protokollmeldungen erstellen, die auf dem Empfänger-Overlay zur Fehlerbehebung in verschiedenen Farben angezeigt werden. Folgende Logmethoden sind verfügbar, sortiert von der höchsten zur niedrigsten Priorität:

  • castDebugLogger.error(custom_tag, message);
  • castDebugLogger.warn(custom_tag, message);
  • castDebugLogger.info(custom_tag, message);
  • castDebugLogger.debug(custom_tag, message);

Der erste Parameter für jede Protokollmethode ist ein benutzerdefiniertes Tag. Das kann ein beliebiger String sein, der für Sie aussagekräftig ist. CastDebugLogger verwendet Tags, um die Logs zu filtern. Die Verwendung von Tags wird weiter unten ausführlich erläutert. Der zweite Parameter ist die Lognachricht.

Fügen Sie dem LOAD-Abfangprogramm Logs hinzu, um Logs in Aktion zu sehen.

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

Sie können steuern, welche Nachrichten im Debug-Overlay angezeigt werden. Legen Sie dazu für jedes benutzerdefinierte Tag die Protokollebene in loggerLevelByTags fest. Wenn Sie beispielsweise ein benutzerdefiniertes Tag mit der Protokollebene cast.framework.LoggerLevel.DEBUG aktivieren, werden alle Nachrichten angezeigt, die mit Fehler-, Warn-, Informations- und Fehlerbehebungsprotokolleinträgen hinzugefügt wurden. Wenn Sie ein benutzerdefiniertes Tag auf der Ebene WARNING aktivieren, werden nur Fehler- und Logmeldungen angezeigt.

Die Konfiguration von loggerLevelByTags ist optional. Wenn kein benutzerdefiniertes Tag für seine Logger-Ebene konfiguriert ist, werden alle Protokollmeldungen im Debug-Overlay angezeigt.

Fügen Sie unter dem Ereignis-Logger CORE den folgenden Code ein:

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

Overlay zur Fehlerbehebung

Der Cast Debug Logger bietet ein Overlay für Fehlerbehebung auf dem Empfänger, um Ihre benutzerdefinierten Protokollnachrichten auf dem Übertragungsgerät anzuzeigen. Verwenden Sie showDebugLogs, um das Debug-Overlay zu aktivieren, und clearDebugLogs, um Protokollmeldungen für das Overlay zu löschen.

Fügen Sie den folgenden Code hinzu, um eine Vorschau des Debug-Overlays auf Ihrem Empfänger zu sehen.

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

Bild mit dem Debug-Overlay, einer Liste von Debug-Protokollnachrichten auf einem durchscheinenden Hintergrund über einem Videoframe

13. Glückwunsch

Jetzt wissen Sie, wie Sie mit dem Cast Web Receiver SDK eine benutzerdefinierte Webanwendung erstellen.

Weitere Informationen finden Sie im Entwicklerleitfaden Web Receiver.