Fehler bei Cast Receiver-Apps beheben

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

1. Übersicht

Logo: Google Cast

In diesem Codelab erfahren Sie, wie Sie den Cast Debug Logger zu Ihrer vorhandenen benutzerdefinierten Web Receiver App hinzufügen.

Was ist Google Cast?

Mit dem Google Cast SDK kann Ihre App Inhalte auf Google Cast-fähigen Geräten wiedergeben und die Wiedergabe steuern. Die erforderlichen UI-Komponenten basieren auf der Checkliste für das Google Cast-Design.

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 Sie dieses Codelab abgeschlossen haben, ist ein benutzerdefinierter Webempfänger in den Cast Debug Logger integriert.

Weitere Informationen und weitere Informationen finden Sie im Leitfaden zur Fehlerbehebung für den Logging-Debugger.

Lerninhalte

  • Umgebung für die Entwicklung mit Web Receiver einrichten
  • So binden Sie den Debug-Logger in Ihren Cast-Empfänger ein

Voraussetzungen

Plattform

  • Sie sollten Erfahrung mit Cast haben und wissen, wie ein Cast Web Receiver funktioniert.
  • 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 Webempfänger mit einem Übertragungsgerät verwenden können, muss es dort gehostet werden, wo Ihr Übertragungsgerät es 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 oder Ihr Projekt mit einem Dienst wie Firebase Hosting hosten.

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 erstellten benutzerdefinierten Web Receiver 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 Cast 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 Felds „App-URL des Empfängers“ im Dialogfeld „Neuer benutzerdefinierter Empfänger“

Geben Sie die Details des neuen Empfängers ein und verwenden Sie dabei die URL aus dem letzten Bereich. 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. Beispiel-App ausführen

Google Chrome-Logo

Während wir darauf warten, dass unser neuer Web Receiver zum Testen bereit ist, wollen wir uns noch einmal ansehen, wie eine beispielhafte Web Receiver App aussieht. Der Empfänger, der erstellt wird, kann Medien über das Streaming mit adaptiver Bitrate wiedergeben.

  1. Ö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. Verwenden Sie die standardmäßige CC1AD845-Empfänger-ID und klicken Sie auf die Schaltfläche SET APP ID.
  2. Klicken Sie oben links auf das Cast-Symbol und wählen Sie Ihr für Google Cast optimiertes 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 LOAD MEDIA.

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

  1. Wählen Sie das Optionsfeld für den Anfragetyp in LOAD aus.
  2. Klicken Sie auf die Schaltfläche SEND REQUEST, um ein Beispielvideo abzuspielen.
  3. Das Video wird auf Ihrem Google Cast-fähigen 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- oder Android TV-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. Ist dies nicht der Fall, versuchen Sie, http-server zu beenden und neu zu starten.

App-Design

Die Receiver-App initialisiert die Streamingsitzung und bleibt im Status, bis eine LOAD-Anfrage von einem Absender eingeht, z. B. der Befehl zur Wiedergabe eines Medieninhalts.

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 gesamte Benutzeroberfläche der Empfänger-App.

Empfänger.js

Dieses Skript verwaltet die gesamte Logik für unsere Empfänger-App.

Häufig gestellte Fragen

7. Integration in die CastDebugLogger API

Das Cast Receiver SDK bietet Entwicklern eine weitere Option, mit der sie Fehler in der Empfänger-App ganz einfach mit der CastDebugLogger API beheben können.

Weitere Informationen und weitere Informationen finden Sie im Leitfaden zur Fehlerbehebung für den Logging-Debugger.

Initialisierung

Fügen Sie das folgende Skript im Tag <head> der Empfänger-App direkt nach dem Web Receiver SDK-Skript in index.html ein:

<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>

Rufen Sie in js/receiver.js am Anfang der Datei und unter dem playerManager die CastDebugLogger-Instanz ab und aktivieren Sie den Logger in einem READY-Ereignis-Listener:

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 von 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 Cast Web Receiver SDK ausgelöst werden, ganz einfach protokollieren und verschiedene Ereignisprotokollierungsebenen verwenden. Die Konfiguration loggerLevelByEvents erfordert cast.framework.events.EventType und cast.framework.events.category, um die zu protokollierenden Ereignisse anzugeben.

Fügen Sie unter dem Ereignis-Listener READY Folgendes ein, um zu protokollieren, wann CORE-Ereignisse des Players ausgelöst oder eine mediaStatus-Änderung übertragen wird:

...

// 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. Verwenden Sie die folgenden Protokollmethoden, beginnend mit der höchsten bis niedrigsten Priorität:

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

Für jede Protokollmethode sollte der erste Parameter ein benutzerdefiniertes Tag und der zweite Parameter die Lognachricht sein. Das Tag kann ein beliebiger String sein, der für Sie hilfreich ist.

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

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

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. Ein weiteres Beispiel: Wenn Sie ein benutzerdefiniertes Tag auf WARNING-Ebene 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 Aufruf loggerLevelByEvents Folgendes hinzu:

...

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

...

8. Debug-Overlay verwenden

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

Fügen Sie dem Ereignis-Listener READY Folgendes hinzu, um sich eine Vorschau des Debug-Overlays auf dem Empfänger anzusehen:

// 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);

      // 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

9. Das Command-and-Control-Tool (CaC) verwenden

Übersicht

Mit dem Command and Control (CaC)-Tool werden Ihre Protokolle erfasst und das Debug-Overlay gesteuert.

Es gibt zwei Möglichkeiten, den Receiver mit dem CaC-Tool zu verbinden:

So starten Sie eine neue Cast-Verbindung:

  1. Öffnen Sie das CaC-Tool, legen Sie die App-ID des Empfängers fest und klicken Sie auf das Cast-Symbol, um auf den Empfänger zu streamen.
  2. Übertragen Sie eine separate Absender-App auf dasselbe Gerät mit derselben App-ID des Empfängers.
  3. Medien aus der Absender-App werden geladen und Protokollnachrichten werden im Tool angezeigt.

So nehmen Sie an einer bestehenden Cast-Sitzung teil:

  1. Rufen Sie die laufende Cast-Sitzungs-ID über das Receiver SDK oder das Sender SDK ab. Geben Sie auf der Empfängerseite Folgendes ein, um die Sitzungs-ID in der Chrome Remote Debugger-Konsole abzurufen:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Alternativ können Sie die Sitzungs-ID von einem verbundenen Websender abrufen. Gehen Sie dazu so vor:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

Bild des Tabs &quot;Cast Connect & Logger Controls&quot; zum Fortsetzen der Sitzung im CaC-Tool (Command and Control).

  1. Geben Sie die Sitzungs-ID in das CaC-Tool ein und klicken Sie auf die Schaltfläche RESUME.
  2. Das Cast-Symbol sollte verbunden sein und Protokollmeldungen für das Tool anzeigen.

Vorschläge

Als Nächstes verwenden wir das CaC-Tool, um Protokolle auf Ihrem Beispielempfänger zu sehen.

  1. Öffnen Sie das CaC-Tool.

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

  1. Geben Sie die Empfänger-ID der Beispiel-App ein und klicken Sie auf die Schaltfläche SET APP ID.
  2. Klicken Sie oben links auf das Cast-Symbol und wählen Sie Ihr für Google Cast optimiertes Gerät aus, um den Receiver 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

  1. Gehen Sie oben zum Tab LOAD MEDIA.

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

  1. Wählen Sie das Optionsfeld für den Anfragetyp in LOAD aus.
  2. Klicken Sie auf die Schaltfläche SEND REQUEST, um ein Beispielvideo abzuspielen.

Bild des Tabs „Cast Connect“ und der Logger-Steuerung im Command- und Control-Tool (CaC) mit Logmeldungen im unteren Bereich.

  1. Auf Ihrem Gerät sollte jetzt ein Beispielvideo abgespielt werden. Die Protokolle aus den vorherigen Schritten sollten auf dem Tab „Protokolle“ unten im Tool angezeigt werden.

Probieren Sie die folgenden Funktionen aus, um Protokolle zu untersuchen und den Empfänger zu steuern:

  • Klicken Sie auf den Tab MEDIA INFO oder MEDIA STATUS, um die Medieninformationen und den Medienstatus aufzurufen.
  • Klicken Sie auf die Schaltfläche SHOW OVERLAY, um ein Debugging-Overlay auf dem Empfänger zu sehen.
  • Laden Sie die Empfänger-App über die Schaltfläche CLEAR CACHE AND STOP neu und streamen Sie dann noch einmal.

10. Glückwunsch

Jetzt wissen Sie, wie Sie den Cast Debug Logger mithilfe des aktuellen Cast Receiver SDK zu Ihrer für Cast optimierten Web Receiver App hinzufügen.

Weitere Informationen finden Sie in den Entwicklerleitfäden Cast Debug Logger und Command and Control (CaC) Tool.