Fehler bei Cast Receiver-Apps beheben

1. Überblick

Google Cast-Logo

In diesem Codelab erfährst du, wie du das Cast Debug Logger zu deiner vorhandenen benutzerdefinierten Web-Receiver-App hinzufügen kannst.

Was ist Google Cast?

Mit dem Google Cast SDK können Sie mit Ihrer App Inhalte abspielen und die Wiedergabe auf für Google Cast optimierten Geräten steuern. Sie finden dort die erforderlichen UI-Komponenten basierend auf der Checkliste für das Google Cast-Design.

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

Ziele

Wenn Sie dieses Codelab abgeschlossen haben, ist Ihr benutzerdefinierter Web-Receiver in den Cast Debug Logger integriert.

Weitere Informationen und Details finden Sie im Cast Debug Logger-Handbuch.

Lerninhalte

  • Hier erfahren Sie, wie Sie Ihre Umgebung für die Web Receiver-Entwicklung einrichten.
  • Integrieren des Debug Loggers in Ihren Cast Receiver

Voraussetzungen

Plattform

  • Sie sollten mit Cast vertraut sein und wissen, wie der Cast Web Receiver funktioniert.
  • Sie müssen über Vorkenntnisse in der Webentwicklung verfügen.
  • Außerdem benötigst du Vorkenntnisse im Fernsehen.

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

Wie würdest du deine Erfahrung mit 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. 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 Webempfänger wie in diesem Codelab 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 Cast Developer Console mit hervorgehobener Schaltfläche „Add New Application“

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

Google Chrome-Logo

Während wir warten, bis der neue Web Receiver zum Testen bereit ist, sehen wir uns nun eine fertige Beispiel-App für Web Receiver an. Der Receiver, den wir erstellen, kann Medien mithilfe von Adaptive Bitrate Streaming wiedergeben.

  1. Öffnen Sie in Ihrem Browser das Befehls- und Kontrolltool (CaC).

Bild der Registerkarte "Cast Connect & Logger Controls" des Command and Control (CaC)-Tools

  1. Verwende die standardmäßige CC1AD845-Empfänger-ID und klicke auf die Schaltfläche SET APP ID.
  2. Klicke oben links auf das Cast-Symbol und wähle dein für Google Cast optimiertes Gerät aus.

Bild der Registerkarte „Cast Connect & Logger Controls“ des Command and Control (CaC)-Tools, das anzeigt, dass es mit einer Empfänger-App verbunden ist

  1. Gehen Sie oben zum Tab LOAD MEDIA.

Bild des Tabs "Load Media" (Medien laden) des Command and Control (CaC)-Tools

  1. Ändern Sie das Optionsfeld für den Anfragetyp in LOAD.
  2. Klicke auf die Schaltfläche SEND REQUEST, um ein Beispielvideo abzuspielen.
  3. Das Video wird auf Ihrem für Google Cast optimierten Gerät abgespielt, um zu zeigen, wie der Standardempfänger funktioniert.

6. Startprojekt vorbereiten

Wir müssen der heruntergeladenen Start-App Unterstützung für Google Cast hinzufügen. Hier sind einige Google Cast-Terminologie, die wir in diesem Codelab verwenden werden:

  • eine Absender-App auf einem Mobilgerät oder Laptop
  • Ein Receiver muss auf dem Google Cast- oder Android TV-Gerät ausgeführt werden.

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

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

Hinweis: Während du dieses Codelab durcharbeitest, sollte http-server die von dir vorgenommenen Änderungen übernehmen. Falls nicht, beende http-server und starte ihn neu.

App-Design

Die Empfänger-App initialisiert die Übertragungssitzung und wartet, bis eine LOAD-Anfrage von einem Sender eingeht, z. B. der Befehl zur Wiedergabe eines Medienelements.

Die App besteht aus einer Hauptansicht, die in index.html definiert ist, und einer JavaScript-Datei namens js/receiver.js, die die gesamte Logik für den Betrieb des Empfängers enthält.

index.html

Diese HTML-Datei enthält die gesamte Benutzeroberfläche für unsere Empfänger-App.

receiver.js

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

Häufig gestellte Fragen

7. In die CastDebugLogger API einbinden

Das Cast Receiver SDK bietet Entwicklern eine weitere Option zur einfachen Fehlerbehebung in Ihrer Empfänger-App mithilfe der CastDebugLogger API.

Weitere Informationen und Details finden Sie im Cast Debug Logger-Handbuch.

Initialisierung

Füge das folgende Skript in index.html in das <head>-Tag deiner Empfänger-App direkt nach dem Web Receiver SDK-Skript 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 die Debug-Protokollierung aktiviert ist, wird auf dem Empfänger ein Overlay von DEBUG MODE angezeigt.

Bild eines Videos, das mit der Meldung „FEHLERMODUS“ auf rotem Hintergrund in der oberen linken Ecke des Frames angezeigt wird

Player-Ereignisse protokollieren

Mit CastDebugLogger können Sie ganz einfach Player-Ereignisse protokollieren, die vom Cast Web Receiver SDK ausgelöst werden, und die Ereignisdaten mithilfe verschiedener Protokollierungsebenen protokollieren. Die loggerLevelByEvents-Konfiguration verwendet cast.framework.events.EventType und cast.framework.events.category, um die zu protokollierenden Ereignisse anzugeben.

Füge unter dem Event-Listener READY Folgendes hinzu, um zu protokollieren, wenn die 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
};

Logeinträge und benutzerdefinierte Tags

Mit der CastDebugLogger API können Sie Protokollmeldungen erstellen, die in verschiedenen Farben im Debug-Overlay des Empfängers angezeigt werden. Verwenden Sie die folgenden Logmethoden, in der Reihenfolge 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);

Bei jeder Logmethode sollte der erste Parameter ein benutzerdefiniertes Tag und der zweite Parameter die Lognachricht sein. Das Tag kann ein beliebiger String sein, den Sie nützlich finden.

Damit Logs in Aktion angezeigt werden, fügen Sie dem LOAD-Interceptor Logs 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 in loggerLevelByTags die Protokollebene festlegen. Wenn Sie beispielsweise ein benutzerdefiniertes Tag mit der Logebene cast.framework.LoggerLevel.DEBUG aktivieren, werden alle Meldungen angezeigt, die mit Fehler-, Warn-, Info- und Debug-Protokollmeldungen hinzugefügt wurden. Ein weiteres Beispiel ist, dass durch das Aktivieren eines benutzerdefinierten Tags auf der Ebene WARNING nur Fehler- und Warnbenachrichtigungen angezeigt werden.

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

Fügen Sie unter dem loggerLevelByEvents-Aufruf Folgendes hinzu:

...

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

...

8. Fehlerbehebungs-Overlay verwenden

Das Cast-Debugging-Logger stellt auf dem Empfänger ein Debug-Overlay bereit, um Ihre benutzerdefinierten Protokollnachrichten anzuzeigen. Verwenden Sie showDebugLogs, um das Debug-Overlay umzuschalten, und clearDebugLogs, um Protokollmeldungen im Overlay zu löschen.

Fügen Sie dem Event-Listener READY Folgendes hinzu, um 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 Debug-Overlay, einer Liste von Debug-Protokollmeldungen auf einem durchscheinenden Hintergrund über einem Videoframe

9. Befehl und Steuerung (CaC) verwenden

Überblick

Das Befehls- und Steuerungstool erfasst Ihre Protokolle und steuert das Debug-Overlay.

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

So stellen Sie eine neue Cast-Verbindung her:

  1. Öffne das CaC-Tool, lege die App-ID des Empfängers fest und klicke auf das Cast-Symbol, um auf den Empfänger zu streamen.
  2. Streamen Sie eine separate Absender-App auf dasselbe Gerät mit derselben Empfänger-App-ID.
  3. Laden Sie Medien aus der Sender-App. Im Tool werden Protokollnachrichten angezeigt.

So nehmen Sie an einer bereits gestreamten Sitzung teil:

  1. Rufe die ID der laufenden Cast-Sitzung mit dem Receiver-SDK oder dem Sender SDK ab. Geben Sie auf der Empfängerseite Folgendes ein, um die Sitzungs-ID in der Chrome Remote Debugger-Konsole zu erhalten:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Alternativ können Sie mit der folgenden Methode die Sitzungs-ID von einem verbundenen Web-Absender abrufen:

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

Bild des Tabs &quot;Cast Connect & Logger Steuerelemente&quot; des Command and Control (CaC)-Tools zum Fortsetzen der Sitzung

  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 Logmeldungen im Tool anzeigen.

Vorschläge

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

  1. Öffnen Sie das CaC-Tool.

Bild der Registerkarte &quot;Cast Connect & Logger Controls&quot; des Command and Control (CaC)-Tools

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

Bild der Registerkarte „Cast Connect & Logger Controls“ des Command and Control (CaC)-Tools, das anzeigt, dass es mit einer Empfänger-App verbunden ist

  1. Gehen Sie oben zum Tab LOAD MEDIA.

Bild des Tabs &quot;Load Media&quot; (Medien laden) des Command and Control (CaC)-Tools

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

Bild des Tabs &quot;Cast Connect & Logger Steuerelemente&quot; des Befehls- und Steuerungstool (CaC) mit Protokollmeldungen im unteren Bereich

  1. Auf Ihrem Gerät sollte jetzt ein Beispielvideo abgespielt werden. Die Protokolle aus den vorherigen Schritten sollten auf dem Tab „Log Messages“ unten im Tool 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.
  • Klicke auf die Schaltfläche SHOW OVERLAY, um ein Debug-Overlay auf dem Empfänger zu sehen.
  • Verwende die Schaltfläche „CLEAR CACHE AND STOP“, um die Empfänger-App neu zu laden und noch einmal zu streamen.

10. Glückwunsch

Jetzt wissen Sie, wie Sie den Cast Debug Logger mit dem neuesten 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.