Fehler bei Cast Receiver-Apps beheben

1. Übersicht

In diesem Codelab erfährst du, wie du den Cast Debug Logger deiner vorhandenen benutzerdefinierten Web-Receiver-App hinzufügst.

Was ist Google Cast?

Mit dem Google Cast SDK können in Ihrer App Inhalte wiedergegeben und die Wiedergabe auf Google Cast-fähigen Geräten gesteuert werden. Er liefert Ihnen die erforderlichen UI-Komponenten gemäß der Design-Checkliste für Google Cast.

Die Design-Checkliste für Google Cast soll die Nutzung von Cast auf allen unterstützten Plattformen einfach und vorhersehbar machen.

Ziele

Wenn Sie dieses Codelab abgeschlossen haben, wird ein benutzerdefinierter Webempfänger in den Cast-Debug-Protokollierungsprozess integriert.

Weitere Informationen und weitere Informationen finden Sie im Leitfaden zum Cast-Debugging-Protokoll.

Lerninhalte

• Hier erfahren Sie, wie Sie Ihre Umgebung für die Web Receiver-Entwicklung einrichten.
• Fehlerbehebungs-Protokollierung in Cast Receiver integrieren

Voraussetzungen

• Die aktuelle Version von Google Chrome.
• HTTPS-Hostingdienst wie Firebase Hosting oder ngrok
• Ein Google Cast-Gerät wie Chromecast oder Android TV mit Internetverbindung
• Einen Fernseher oder Monitor mit HDMI-Eingang

Erfahrung

• Sie sollten Cast-Erfahrung haben und wissen, wie ein Cast Web Receiver funktioniert.
• Sie müssen über Vorkenntnisse in der Webentwicklung verfügen.
• Außerdem benötigen Sie Vorkenntnisse in Bezug auf Fernsehen. :)

2. Beispielcode abrufen

Sie können den gesamten Beispielcode auf Ihren Computer herunterladen...

file_downloadDownloadquelle

und entpacken Sie die heruntergeladene ZIP-Datei.

3. Empfänger lokal bereitstellen

Damit Sie Ihren Web Receiver mit einem Übertragungsgerät verwenden können, muss es an einem Ort gehostet werden, an dem Ihr Cast-Gerät darauf zugreifen kann. Falls Sie bereits einen Server haben, der HTTPS unterstützt, überspringen Sie die folgende Anleitung und merken Sie sich die URL, da Sie sie im nächsten Abschnitt benötigen.

Wenn Sie keinen Server haben, können Sie Firebase Hosting oder ngrok verwenden.

Server ausführen

Sobald Sie den Dienst Ihrer Wahl eingerichtet haben, rufen Sie app-start auf und starten Sie Ihren Server.

Notieren Sie sich die URL des gehosteten Empfängers. Sie benötigen sie im nächsten Abschnitt.

4. App in der Cast Developer Console 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 die Absenderanwendung verwenden muss, um API-Aufrufe auszuführen, z. B. um eine Empfängeranwendung zu starten.

Klicken Sie auf „Neue Anwendung hinzufügen“.

Wähle „Benutzerdefinierter Receiver“ aus. Das ist der Vorgang, den wir entwickeln.

Geben Sie die Details des neuen Empfängers ein und verwenden Sie die URL aus dem letzten Abschnitt. Notieren Sie sich die Anwendungs-ID, die dem neuen Empfänger zugewiesen wurde.

Außerdem müssen Sie Ihr Google Cast-Gerät registrieren, damit es vor der Veröffentlichung auf die Receiver App zugreifen kann. Sobald Sie die Receiver-App veröffentlicht haben, ist sie für alle Google Cast-Geräte verfügbar. Für dieses Codelab empfehlen wir, mit einer nicht veröffentlichten Empfängeranwendung zu arbeiten.

Klicke auf „Neues Gerät hinzufügen“.

Geben Sie die Seriennummer ein, die auf der Rückseite Ihres Übertragungsgeräts aufgedruckt ist, und geben Sie einen aussagekräftigen Namen ein. Sie können Ihre Seriennummer auch ermitteln, indem Sie Ihren Bildschirm in Chrome streamen, wenn Sie die Google Cast SDK-Entwicklerkonsole aufrufen.

Es dauert 5 bis 15 Minuten, bis der Empfänger und das Gerät zum Testen bereit sind. Warten Sie 5 bis 15 Minuten und starten Sie das Übertragungsgerät neu.

5. Beispiel-App ausführen

Während wir warten, bis unser neuer Web Receiver zum Testen bereit ist, sehen wir uns nun eine fertige Web Receiver-Beispielanwendung an. Der Empfänger, den wir erstellen werden, kann Medien mit adaptivem Bitrate-Streaming wiedergeben.

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

2. Verwende die standardmäßige CC1AD845-Empfänger-ID und klicke auf die Schaltfläche SET APP ID.
3. Klicken Sie links oben auf das Cast-Symbol und wählen Sie Ihr für Google Cast optimiertes Gerät aus.

4. Gehen Sie oben zum Tab LOAD MEDIA.

5. Ändern Sie das Optionsfeld „Anfragetyp“ in LOAD.
6. Klicken Sie auf die Schaltfläche SEND REQUEST, um ein Beispielvideo abzuspielen.
7. Das Video wird auf Ihrem für Google Cast optimierten Gerät wiedergegeben und zeigt die grundlegenden Empfängerfunktionen bei Verwendung des Standardempfängers.

6. Startprojekt vorbereiten

Wir müssen der heruntergeladenen Start-App Unterstützung für Google Cast hinzufügen. Im Folgenden finden Sie einige Google Cast-Begriffe, die wir in diesem Codelab verwenden:

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

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

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

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

App-Design

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

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 die Funktionsweise des Empfängers enthält.

index.html

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

receiver.js

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

Häufig gestellte Fragen

• Was ist Google Cast?
• Wie werde ich Google Cast-Entwickler?

7. CastDebugLogging API einbinden

Das Cast Receiver SDK bietet Entwicklern eine weitere Option zur einfachen Fehlerbehebung in der Receiver-App mithilfe der CastDebugLogging API.

Weitere Informationen und weitere Informationen finden Sie im Leitfaden zum Cast-Debugging-Protokoll.

Initialisierung

Fügen Sie das folgende Skript in index.html in das <head>-Tag Ihrer Receiver-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 Listener in einem READY-Event-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 Fehlerbehebungs-Protokollierung aktiviert ist, wird auf dem Empfänger ein Overlay mit DEBUG MODE angezeigt.

Log Player-Ereignisse

Mit CastDebugLogger kannst du ganz einfach Player-Ereignisse protokollieren, die vom Cast Web Receiver SDK ausgelöst werden. Außerdem kannst du verschiedene Protokollierungsstufen verwenden, um die Ereignisdaten zu protokollieren. Die Konfiguration loggerLevelByEvents verwendet cast.framework.events.EventType und cast.framework.events.category, um die zu protokollierenden Ereignisse anzugeben.

Füge unter dem READY-Event-Listener Folgendes hinzu, um zu protokollieren, wenn 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 CastDebugProtokollierung API können Sie Protokollmeldungen erstellen, die auf dem Debug-Overlay des Empfängers in verschiedenen Farben angezeigt werden. Verwenden Sie die folgenden Logmethoden, von der höchsten zur niedrigsten Priorität geordnet:

• 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 für nützlich halten.

Wenn Sie Logs in Aktion sehen möchten, fügen Sie Ihrem 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 in loggerLevelByTags die Protokollebene für jedes benutzerdefinierte Tag festlegen. Wenn Sie beispielsweise ein benutzerdefiniertes Tag mit der Logebene cast.framework.LoggerLevel.DEBUG aktivieren, werden alle Meldungen angezeigt, die mit den Logmeldungen „Fehler“, „Warnung“, „Informationen“ und „Fehlerbehebung“ hinzugefügt wurden. Ein weiteres Beispiel ist, dass beim Aktivieren eines benutzerdefinierten Tags mit der Ebene WARNING nur Logmeldungen mit Fehlern und Warnungen angezeigt werden.

Die Konfiguration von loggerLevelByTags ist optional. Wenn ein benutzerdefiniertes Tag nicht für seine Protokollierungsebene 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. Debug-Overlay verwenden

Das Cast-Debugging-Protokoll stellt auf dem Empfänger ein Debugging-Overlay bereit, um Ihre benutzerdefinierten Protokollmeldungen anzuzeigen. Mit showDebugLogs kannst du das Debug-Overlay ein- und ausblenden und mit clearDebugLogs Logeinträge im Overlay löschen.

Fügen Sie dem READY-Event-Listener Folgendes hinzu, um eine Vorschau des Debug-Overlays auf Ihrem Empfänger zu sehen:

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

9. Verwendung des CAC-Tools (Command and Control)

Übersicht

Das CaC-Tool (Command and Control) erfasst Ihre Protokolle und steuert das Debug-Overlay.

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

Neue Cast-Verbindung herstellen:

1. Öffnen Sie das CaC-Tool, legen Sie die ID der Empfänger-App fest und klicken Sie 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. Medien aus der Absender-App laden und Protokollnachrichten werden im Tool angezeigt.

So nehmen Sie an einer bestehenden Sitzung teil:

1. Rufen Sie die laufende Übertragungs-ID über das Empfänger-SDK oder das Absender-SDK ab. Geben Sie auf der Empfängerseite Folgendes ein, um die Sitzungs-ID in der Konsole Chrome Remote Debugger zu erhalten:

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

Sie können die Sitzungs-ID auch mit der folgenden Methode von einem verbundenen Websender abrufen:

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

2. Geben Sie die Sitzungs-ID in das CaC-Tool ein und klicken Sie auf die Schaltfläche RESUME.
3. Das Cast-Symbol sollte verbunden sein und im Tool werden Logeinträge angezeigt.

Vorschläge

Als Nächstes sehen wir uns mit dem CaC-Tool Protokolle auf dem Beispielempfänger an.

1. Öffnen Sie das CaC-Tool.

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

4. Gehen Sie oben zum Tab LOAD MEDIA.

5. Ändern Sie das Optionsfeld „Anfragetyp“ in LOAD.
6. Klicken Sie auf die Schaltfläche SEND REQUEST, um ein Beispielvideo abzuspielen.

7. Nun sollte auf deinem Gerät ein Beispielvideo wiedergegeben werden. Die Protokolle aus den vorherigen Schritten sollten nun unter „Logmeldungen“ angezeigt werden. unten im Tool.

Probieren Sie die folgenden Funktionen aus, um Logs 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.
• Klicke auf die Schaltfläche SHOW OVERLAY, um ein Debug-Overlay auf dem Empfänger aufzurufen.
• Verwende die Taste CLEAR CACHE AND STOP, um die Empfänger-App zu aktualisieren und noch einmal zu streamen.

10. Glückwunsch

Jetzt wissen Sie, wie Sie mit dem aktuellen Cast Receiver SDK der Cast-fähigen Web Receiver-App den Cast Debug Logs hinzufügen.

Weitere Informationen finden Sie in den Entwicklerleitfäden zum Cast-Fehlerbehebungsprotokoll und zum CaC-Tool (Command and Control).