Fehler bei Cast Receiver-Apps beheben

1. Übersicht

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

Was ist Google Cast?

Mit dem Google Cast SDK kann Ihre App Inhalte auf für Google Cast optimierten Geräten abspielen und die Wiedergabe steuern. Er liefert Ihnen die erforderlichen UI-Komponenten gemäß der Design-Checkliste für Google Cast.

Die Checkliste für das Google Cast-Design wurde bereitgestellt, um die Nutzung von Cast auf allen unterstützten Plattformen einfach und vorhersehbar zu machen.

Ziele

Wenn du dieses Codelab abgeschlossen hast, hast du einen benutzerdefinierten Webempfänger, der in den Cast-Debug-Logger eingebunden ist.

Weitere Informationen findest du im Leitfaden zum Cast Debug Logger.

Lerninhalte

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

Voraussetzungen

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

Erfahrung

• Sie sollten bereits Erfahrung mit Google Cast haben und wissen, wie ein Cast-Webempfänger funktioniert.
• Sie benötigen Vorkenntnisse in der Webentwicklung.
• Außerdem solltest du schon einmal ferngesehen haben.

Netzwerkprobleme?

Wenn Sie sich an einem Ort befinden, an dem das WLAN nicht zuverlässig ist, können Sie Chromecast mit einem Ethernet-Adapter für Chromecast oder Chromecast mit Google TV verbinden.

Wie möchten Sie diese Anleitung nutzen?

Nur durchlesen Lesen und die Übungen abschließen

Wie zufrieden sind Sie mit Ihren Erfahrungen beim Erstellen von Webanwendungen?

Anfänger Fortgeschrittene Erfahren

Wie würden Sie Ihre Erfahrungen mit Fernsehen bewerten?

Anfänger Mittelstufe Fortgeschritten

2. Beispielcode abrufen

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

Quellcode herunterladen

und entpacken Sie die heruntergeladene ZIP-Datei.

Das Codelab-Repository für den Cast-Debug-Logger enthält zwei Beispielprojekte:

• app-start: Der Startcode, auf dem Sie in diesem Codelab aufbauen.
• app-done: Der vollständige Code der fertigen Beispiel-Video-App.

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 notieren Sie sich 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 Sie den gewünschten Dienst 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. App in der Cast Developer Console registrieren

Sie haben noch kein Cast-Entwicklerkonto?

Registrieren Sie sich in der Google Cast SDK Developer Console und zahlen Sie die Registrierungsgebühr.

Sie müssen Ihre Anwendung registrieren, um einen benutzerdefinierten Webreceiver 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.

Klicken Sie auf „Neue Anwendung hinzufügen“.

Wählen Sie „Benutzerdefinierter Empfänger“ aus.

Geben Sie die Details des neuen Empfängers ein. Verwenden Sie dabei unbedingt die URL aus dem letzten Abschnitt. Notieren Sie sich die Anwendungs-ID, die Ihrem brandneuen Receiver zugewiesen ist.

Außerdem müssen Sie Ihr Google Cast-Gerät registrieren, damit es vor der Veröffentlichung auf Ihre Empfängeranwendung 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 wird empfohlen, mit einer nicht veröffentlichten Empfängeranwendung zu arbeiten.

Klicken Sie 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 die Seriennummer auch finden, indem Sie Ihren Bildschirm in Chrome streamen, wenn Sie auf die Google Cast SDK Developer Console zugreifen.

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 eine fertige Web Receiver-Beispielanwendung an. Der Empfänger, den wir bauen werden, kann Medien mit adaptivem Bitrate-Streaming wiedergeben.

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

2. Verwenden Sie die Standard-CC1AD845-Empfänger-ID und klicken Sie auf die Schaltfläche SET APP ID.
3. Klicken Sie links oben auf die Schaltfläche „Streamen“ 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 für den Anfragetyp in LOAD.
6. Klicke auf die Schaltfläche SEND REQUEST, um ein Beispielvideo abzuspielen.
7. Das Video wird auf Ihrem für Google Cast optimierten Gerät abgespielt, um zu zeigen, wie die grundlegenden Empfängerfunktionen mit dem Standardempfänger aussehen.

6. Startprojekt vorbereiten

Wir müssen der von Ihnen heruntergeladenen Start-App Google Cast hinzufügen. Im Folgenden finden Sie einige Google Cast-Terminologie, die wir in diesem Codelab verwenden:

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

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

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

Hinweis: Wenn Sie dieses Codelab durcharbeiten, sollten die von Ihnen vorgenommenen Änderungen in http-server übernommen werden. Falls nicht, beenden Sie http-server und starten Sie es neu.

App-Design

Die Empfänger-App initialisiert die Cast-Sitzung und wartet, bis eine LOAD-Anfrage (z. B. der Befehl zum Abspielen eines Medienelements) 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 unserer Empfänger-App.

receiver.js

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

Gibt es eine Dokumentation für die Darsteller?

Wir bieten eine umfassende Dokumentation für Empfänger, iOS-, Android- und Chrome-Absender.

Häufig gestellte Fragen

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

7. CastDebugLogger API einbinden

Das Cast Receiver SDK bietet Entwicklern mit der CastDebugLogger API eine weitere Möglichkeit, ihre Receiver-App ganz einfach zu debuggen.

Weitere Informationen findest du im Leitfaden zum Cast Debug Logger.

★ Hinweis:

Wenn du die CastDebugLogger API verwenden möchtest, musst du dein Cast-Gerät in der Google Cast SDK Developer Console registrieren und eine Gerätefirmwareversion von 1.44 oder höher verwenden.

Initialisierung

Füge das folgende Script in das <head>-Tag deiner Empfänger-App ein, direkt nach dem Web Receiver SDK-Script 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>

Rufe in js/receiver.js oben in der Datei und unter playerManager die CastDebugLogger-Instanz ab und aktiviere den Logging-Dienst 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);
  }
});

Warnung: Ändern Sie „setEnabled“ für einen Produktionsempfänger in „false“.

Wenn die Debugging-Protokollierung aktiviert ist, wird auf dem Empfänger ein Overlay mit DEBUG MODE angezeigt.

Spielerereignisse protokollieren

Mit CastDebugLogger kannst du ganz einfach Player-Ereignisse protokollieren, die vom Cast Web Receiver SDK ausgelöst werden, und die Ereignisdaten mit verschiedenen Protokollebenen erfassen. Die Konfiguration loggerLevelByEvents verwendet cast.framework.events.EventType und cast.framework.events.category, um die zu protokollierenden Ereignisse anzugeben.

Füge unter dem READY-Ereignis-Listener 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 kannst du Protokollmeldungen erstellen, die im Debug-Overlay des Empfängers in verschiedenen Farben angezeigt werden. Verwenden Sie die folgenden Protokollmethoden, die in der Reihenfolge von höchster zu niedrigster Priorität aufgeführt sind:

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

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 Nachrichten 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 Protokollebene cast.framework.LoggerLevel.DEBUG aktivieren, werden alle Meldungen angezeigt, die mit Fehler-, Warn-, Info- und Debug-Logmeldungen 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 loggerLevelByTags-Konfiguration ist optional. Wenn für ein benutzerdefiniertes Tag keine 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 können Sie das Debug-Overlay ein- und ausschalten und mit clearDebugLogs die Protokollmeldungen 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. Command-and-Control-Tool (CaC) verwenden

Übersicht

Das Befehls- und Kontrolltool (CaC) erfasst Ihre Protokolle und steuert das Debug-Overlay.

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

Neue Cast-Verbindung herstellen:

1. Öffne das CaC-Tool, lege die App-ID des Empfängers fest und klicke auf die Schaltfläche „Streamen“, um auf den Empfänger zu streamen.
2. Streame eine separate Sender-App mit derselben Empfänger-App-ID auf dasselbe Gerät.
3. Laden Sie Medien aus der App des Absenders und Protokollmeldungen werden im Tool angezeigt.

So nehmen Sie an einer bestehenden Übertragung 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;

Alternativ können Sie die Sitzungs-ID auch von einem verbundenen Websender abrufen. Verwenden Sie dazu die folgende Methode:

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

2. Gib die Sitzungs-ID in das CaC-Tool ein und klicke auf die Schaltfläche RESUME.
3. Die Schaltfläche „Streamen“ sollte verbunden sein und es sollten jetzt Protokollmeldungen im Tool angezeigt werden.

Tipps

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 oben links auf die Schaltfläche „Streamen“ und wählen Sie Ihr für Google Cast optimiertes Gerät aus, um den Receiver zu öffnen.

4. Gehen Sie oben zum Tab LOAD MEDIA.

5. Ändern Sie das Optionsfeld für den 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 jetzt unten im Tool auf dem Tab „Protokollmeldungen“ angezeigt werden.

Mit den folgenden Funktionen können Sie Logs prüfen 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 aufzurufen.
• 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 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 Entwicklerhandbüchern zum Cast Debug Logger und zum Command and Control (CaC) Tool.

Möchten Sie mehr über Google Cast erfahren?

Sehen Sie sich auch die anderen Cast-Codelabs und unsere Beispiel-Apps auf GitHub an.