Fehler bei Cast Receiver-Apps beheben

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

1. Übersicht

Google Cast-Logo

In diesem Codelab erfahren Sie, wie Sie den Cast Debug Logger zu Ihrer vorhandenen App für benutzerdefinierte Webempfänger hinzufügen.

Was ist Google Cast?

Mit dem Google Cast SDK kann Ihre App Inhalte wiedergeben und die Wiedergabe auf für Google Cast optimierten Geräten steuern. Sie enthält die erforderlichen UI-Komponenten gemäß der Google Cast-Design-Checkliste.

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

Ziele

Wenn Sie dieses Codelab abgeschlossen haben, ist ein benutzerdefinierter Webempfänger in die Cast Debug-Protokollierung eingebunden.

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

Lerninhalte

  • So richten Sie Ihre Umgebung für die Entwicklung mit Web Receiver ein.
  • So integrieren Sie den Debug-Logger in Ihren Cast-Empfänger

Voraussetzungen

Plattform

  • Sie sollten bereits mit Cast gearbeitet haben und verstehen, wie ein Cast Web Receiver funktioniert.
  • Sie benötigen Vorkenntnisse in der Webentwicklung.
  • Außerdem benötigst du Vorkenntnisse zum Fernsehen.

Wie werden Sie diese Anleitung verwenden?

Nur Lesen Lesen und lesen

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

Neuling Leicht fortgeschrittener Profi

Wie würdest du deine Erfahrung beim Fernsehen 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 App registrieren, um einen benutzerdefinierten Web Receiver (wie in diesem Codelab erstellt) 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. zum Starten einer Empfängeranwendung.

Bild der Cast 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 Felds „URL der Empfängeranwendung“ im Dialogfeld „Neuer benutzerdefinierter Empfänger“ wird ausgefüllt.

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

Google Chrome-Logo

Wir warten, bis unser neuer Web Receiver für den Test bereit ist. Sehen wir uns einmal an, wie eine fertige Web Receiver-App aussieht. Der Empfänger, den wir erstellen, kann Medien mit adaptivem Bitrate-Streaming wiedergeben.

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

Abbildung des Tabs „Cast Connect & amp; Logger Controls“ im Befehls- und Steuertool (CaC)

  1. Verwenden Sie die standardmäßige CC1AD845-Empfänger-ID und klicken Sie auf die Schaltfläche SET APP ID.
  2. Klicken Sie links oben auf das Cast-Symbol und wählen Sie Ihr Google Cast-fähiges Gerät aus.

Abbildung des Tabs „Cast Connect & amp; Logger Controls“ im Befehls- und Steuertool (CaC), das zeigt, dass es mit einer Empfänger-App verbunden ist

  1. Gehen Sie oben zum Tab LOAD MEDIA.

Abbildung des Tabs „Load Media“ des Befehls und der Steuerung (CaC)

  1. Ändern Sie das Optionsfeld für den Anfragetyp in LOAD.
  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 wiedergegeben, um zu zeigen, wie die grundlegenden Receiver-Funktionen unter Verwendung des Standardempfängers aussehen.

6. Startprojekt vorbereiten

Wir müssen die heruntergeladene Start-App für Google Cast unterstützen. Hier sind einige Google Cast-Begriffe, die wir in diesem Codelab verwenden werden:

  • Eine Absender-App wird auf einem Mobilgerät oder Laptop ausgeführt.
  • Eine Empfänger-App wird auf Google Cast- oder Android TV-Geräten ausgeführt.

Jetzt können Sie mit Ihrem bevorzugten Texteditor auf das Startprojekt aufbauen:

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

Hinweis: Während Sie dieses Codelab durcharbeiten, sollte http-server Ihre Änderungen übernehmen. Ist dies nicht der Fall, versuchen Sie, http-server zu beenden und neu zu starten.

App-Design

Die Empfänger-App initialisiert die Streaming-Sitzung und bleibt im Stand-by-Modus, bis eine LOAD-Anfrage (z. B. der Befehl zur Wiedergabe eines Medieninhalts) von einem Absender eingeht.

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

index.html

Diese HTML-Datei enthält die gesamte Benutzeroberfläche unserer Empfänger-App.

Empfänger.js

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

Häufig gestellte Fragen

7. Einbindung in die CastDebugLogger API

Mit dem Cast Receiver SDK haben Entwickler eine weitere Möglichkeit, mit der CastDebugLogger API Fehler in der Receiver-App zu beheben.

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

Initialisierung

Füge das folgende Skript in das Tag <head> der Empfänger-App ein, und zwar direkt nach dem Web Receiver SDK-Skript in index.html:

<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 der Datei js/receiver.js oben und unter der Datei playerManager die Instanz CastDebugLogger auf 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 die Debugging-Protokollierung aktiviert ist, wird auf dem Empfänger ein Overlay von DEBUG MODE angezeigt.

Bild eines Videos, das mit der Meldung „FEHLERMODUS“ vor einem roten Hintergrund oben links im Rahmen angezeigt wird

Player-Ereignisse protokollieren

Mit CastDebugLogger kannst du Spielerereignisse, die vom Cast Web Receiver SDK ausgelöst werden, ganz einfach protokollieren und die Ereignisdaten mit verschiedenen Logger-Ebenen protokollieren. Für die loggerLevelByEvents-Konfiguration sind cast.framework.events.EventType und cast.framework.events.category erforderlich, um die zu protokollierenden Ereignisse anzugeben.

Fügen Sie unter dem Ereignis-Listener READY Folgendes ein, um zu protokollieren, wann die CORE-Ereignisse des Players ausgelöst oder eine mediaStatus-Änderung gesendet 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
};

Logeinträge und benutzerdefinierte Tags

Mit der CastDebugLogger API können Sie Lognachrichten mit verschiedenen Farben auf dem Debug-Overlay des Empfängers erstellen. 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.

Wenn Sie Logs in Aktion sehen möchten, fügen Sie Logs zum LOAD-Abfangdienst hinzu.

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 festlegen, welche Meldungen im Debug-Overlay angezeigt werden, indem Sie für jedes benutzerdefinierte Tag die Protokollebene in loggerLevelByTags festlegen. Wenn Sie beispielsweise ein benutzerdefiniertes Tag mit der Log-Ebene cast.framework.LoggerLevel.DEBUG aktivieren, werden alle Nachrichten mit den Fehler-, Warn-, Informations- und Fehlerbehebungsprotokoll-Meldungen angezeigt. Ein weiteres Beispiel: Wenn Sie ein benutzerdefiniertes Tag mit der Ebene WARNING aktivieren, werden nur Fehler- und Logmeldungen angezeigt.

Die loggerLevelByTags-Konfiguration ist optional. Wenn ein benutzerdefiniertes Tag nicht für seine Logger-Ebene konfiguriert ist, werden alle Protokollmeldungen auf dem 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 Debug-Logger für die Übertragung bietet dem Empfänger ein Overlay für die Fehlerbehebung. Verwenden Sie showDebugLogs, um das Debug-Overlay umzuschalten, und clearDebugLogs, um Lognachrichten im 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 Debugging-Protokollmeldungen auf einem durchscheinenden Hintergrund über einem Videoframe

9. Command and Control Tool (CaC) verwenden

Übersicht

Mit dem Command and Control (CaC)-Tool können Sie Ihre Protokolle erfassen und das Debug-Overlay steuern.

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

Neue Cast-Verbindung starten:

  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 Empfänger-ID.
  3. Medien aus der Absender-App werden geladen und Protokollmeldungen werden im Tool angezeigt.

So nehmen Sie an einer bestehenden Streamingsitzung teil:

  1. Rufen Sie die laufende Cast-Sitzungs-ID mit dem Receiver oder 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 „Cast Connect & amp; Logger Controls“ im Befehls- und Steuertool (CaC), um die Sitzung fortzusetzen

  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 werden im Tool angezeigt.

Ausprobieren

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

  1. Öffnen Sie das CaC-Tool.

Abbildung des Tabs „Cast Connect & amp; Logger Controls“ im Befehls- und Steuertool (CaC)

  1. Geben Sie die Empfänger-App-ID Ihrer Beispiel-App ein und klicken Sie auf die Schaltfläche SET APP ID.
  2. Klicken Sie links oben auf das Cast-Symbol und wählen Sie Ihr für Google Cast optimiertes Gerät aus, um den Receiver zu öffnen.

Abbildung des Tabs „Cast Connect & amp; Logger Controls“ im Befehls- und Steuertool (CaC), das zeigt, dass es mit einer Empfänger-App verbunden ist

  1. Gehen Sie oben zum Tab LOAD MEDIA.

Abbildung des Tabs „Load Media“ des Befehls und der Steuerung (CaC)

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

Abbildung des Tabs „Cast Connect & amp; Logger Controls“ im Befehls- und Steuertool (CaC) mit Lognachrichten im unteren Bereich

  1. Ein Beispielvideo sollte jetzt auf Ihrem Gerät wiedergegeben werden. Die Protokolle aus den vorherigen Schritten sollten unten auf dem Tab „Lognachrichten“ angezeigt werden.

Mit den folgenden Funktionen können Sie Logs untersuchen und den Empfänger 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 Debug-Overlay auf dem Empfänger zu sehen.
  • Aktualisieren Sie die Empfänger-App mit der Schaltfläche CLEAR CACHE AND STOP und übertragen Sie sie noch einmal.

10. Glückwunsch

Jetzt wissen Sie, wie Sie die Cast Debug Logger.

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