Fehler bei Cast Receiver-Apps beheben

1. Übersicht

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

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. Es bietet Ihnen die erforderlichen UI-Komponenten basierend auf der Google Cast-Design-Checkliste.

Die Google Cast-Design-Checkliste soll dafür sorgen, dass die Cast-User Experience auf allen unterstützten Plattformen einfach und vorhersehbar ist.

Ziele

Nach Abschluss dieses Codelabs haben Sie einen benutzerdefinierten Web Receiver, der in den Cast Debug Logger integriert ist.

Weitere Informationen finden Sie im Leitfaden zum Cast Debug Logger.

Lerninhalte

• So richten Sie Ihre Umgebung für die Entwicklung von Web Receivern ein.
• So binden Sie den Debug-Logger in Ihren Cast Receiver ein.

Voraussetzungen

• Die aktuelle Version des Browsers Google Chrome.
• Ein HTTPS-Hostingdienst wie Firebase Hosting oder ngrok.
• Ein Google Cast-Gerät wie ein Chromecast oder Android TV, das für den Internetzugriff konfiguriert ist.
• Einen Fernseher oder Monitor mit HDMI-Eingang

Erfahrung

• Sie sollten bereits Erfahrung mit Google Cast haben und wissen, wie ein Cast Web Receiver funktioniert.
• Sie benötigen Vorkenntnisse in der Webentwicklung.
• Außerdem sollten Sie sich mit dem Fernsehen auskennen :)

Probleme mit dem Netzwerk?

Wenn Sie sich an einem Ort befinden, an dem das WLAN nicht zuverlässig ist, kann das Chromecast-Gerät über einen Ethernet-Adapter für Chromecast oder für Chromecast mit Google TV verbunden werden.

Wie werden Sie diese Anleitung verwenden?

Nur lesen Lesen und Übungen durchführen

Wie würden Sie Ihre Erfahrung mit der Entwicklung von Web-Apps bewerten?

Anfänger Mittelstufe Fortgeschrittene

Wie würdest du deine Erfahrung beim Fernsehen bewerten?

Anfänger Mittelstufe Fortgeschritten

2. Beispielcode abrufen

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

Quelle 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: Das ist der vollständige Code der fertigen Beispiel-Video-App.

3. Empfänger lokal bereitstellen

Damit du deinen Web Receiver mit einem Google Cast-Gerät verwenden kannst, muss er an einem Ort gehostet werden, an dem dein Google Cast-Gerät ihn erreichen kann. Wenn Sie bereits einen Server haben, der HTTPS unterstützt, überspringen Sie die folgenden Anweisungen 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. Anwendung in der Cast Developer Console registrieren

Sie haben noch kein Cast-Entwicklerkonto?

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

Sie müssen Ihre Anwendung registrieren, damit Sie einen benutzerdefinierten Web Receiver, wie in diesem Codelab erstellt, auf Chromecast-Geräten ausführen können. Nachdem Sie Ihre Anwendung registriert haben, erhalten Sie eine Anwendungs-ID, die Ihre Senderanwendung für API-Aufrufe verwenden muss, z. B. zum Starten einer Empfängeranwendung.

Klicken Sie auf „Neue Anwendung hinzufügen“.

Wählen Sie „Benutzerdefinierter Receiver“ aus. Das ist der Receiver, den wir erstellen.

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

Außerdem müssen Sie Ihr Google Cast-Gerät registrieren, damit es auf Ihre Receiver-Anwendung zugreifen kann, bevor Sie sie veröffentlichen. Sobald Sie Ihre Empfängeranwendung veröffentlicht haben, ist sie für alle Google Cast-Geräte verfügbar. Für dieses Codelab wird empfohlen, mit einer unveröffentlichten Empfängeranwendung zu arbeiten.

Klicken Sie auf „Neues Gerät hinzufügen“.

Gib die Seriennummer ein, die auf der Rückseite deines Cast-Geräts aufgedruckt ist, und gib dem Gerät einen aussagekräftigen Namen. Sie können die Seriennummer auch finden, indem Sie Ihren Bildschirm in Chrome spiegeln, wenn Sie auf die Google Cast SDK Developer Console zugreifen.

Es dauert 5 bis 15 Minuten, bis der Empfänger und das Gerät für den Test bereit sind. Nach 5 bis 15 Minuten musst du dein Cast-Gerät neu starten.

5. Beispiel-App ausführen

Während wir darauf warten, dass unser neuer Web Receiver für Tests bereit ist, sehen wir uns an, wie eine Beispiel-Web Receiver-App aussieht. Der Receiver, den wir erstellen, kann Medien mit Adaptive Bitrate Streaming wiedergeben.

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

2. Verwenden Sie die Standard-Empfänger-ID CC1AD845 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.

4. Klicken Sie oben auf den 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. Das Video wird auf Ihrem für Google Cast optimierten Gerät abgespielt, um zu zeigen, wie die grundlegende Receiver-Funktionalität mit dem Standard-Receiver aussieht.

6. Startprojekt vorbereiten

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

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

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

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

http-server sollte Änderungen, die Sie vornehmen, automatisch erkennen. Wenn das nicht der Fall ist, 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 zur Wiedergabe von Medien) 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 die gesamte Logik für die Funktion unseres Receivers enthält.

index.html

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

receiver.js

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

Cast-Dokumentation?

Wir haben eine umfangreiche 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. In die CastDebugLogger API einbinden

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

Weitere Informationen finden Sie im Leitfaden zum Cast Debug Logger.

★ Hinweis:

Wenn Sie die CastDebugLogger API verwenden möchten, müssen Sie Ihr Cast-Gerät in der Google Cast SDK Developer Console registrieren und eine Geräte-Firmwareversion von 1.44 oder höher verwenden.

Initialisierung

Fügen Sie das folgende Skript in das <head>-Tag Ihrer 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 oben in der Datei und unter playerManager die CastDebugLogger-Instanz ab und aktivieren Sie das Logging 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);
  }
});

Warnung: Achten Sie darauf, setEnabled für einen Produktionsreceiver auf „false“ zu setzen.

Wenn der Debug-Logger aktiviert ist, wird auf dem Empfänger ein Overlay mit DEBUG MODE angezeigt.

Spielerereignisse protokollieren

Mit CastDebugLogger können Sie ganz einfach Player-Ereignisse protokollieren, die vom Cast Web Receiver SDK ausgelöst werden, und verschiedene Logger-Ebenen verwenden, um die Ereignisdaten zu protokollieren. Für die loggerLevelByEvents-Konfiguration werden cast.framework.events.EventType und cast.framework.events.category verwendet, um die zu protokollierenden Ereignisse anzugeben.

Fügen Sie Folgendes unter dem READY-Event-Listener hinzu, um zu protokollieren, wenn die CORE-Ereignisse des Players ausgelöst werden 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
};

Log-Meldungen und benutzerdefinierte Tags

Mit der CastDebugLogger API können Sie Logmeldungen erstellen, die mit unterschiedlichen Farben im Debug-Overlay des Empfängers angezeigt werden. Verwenden Sie die folgenden Protokollierungsmethoden, die nach Priorität sortiert sind (höchste bis niedrigste):

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

Bei jeder Log-Methode sollte der erste Parameter ein benutzerdefiniertes Tag und der zweite Parameter die Log-Nachricht sein. Das Tag kann ein beliebiger String sein, der für Sie hilfreich ist.

Um Logs in Aktion zu sehen, 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 die Log-Ebene in loggerLevelByTags für jedes benutzerdefinierte Tag festlegen. Wenn Sie beispielsweise ein benutzerdefiniertes Tag mit dem Log-Level cast.framework.LoggerLevel.DEBUG aktivieren, werden alle Meldungen angezeigt, die mit Fehler-, Warnungs-, Info- und Debug-Log-Meldungen hinzugefügt wurden. Wenn Sie beispielsweise ein benutzerdefiniertes Tag mit der Ebene WARNING aktivieren, werden nur Fehler- und Warnmeldungen angezeigt.

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

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

...

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

...

8. Fehlerbehebungs-Overlay verwenden

Der Cast Debug Logger bietet ein Debug-Overlay auf dem Empfängergerät, in dem Ihre benutzerdefinierten Logmeldungen angezeigt werden. Mit showDebugLogs können Sie das Debug-Overlay ein- und ausblenden und mit clearDebugLogs Log-Nachrichten im Overlay löschen.

Fügen Sie dem READY-Event-Listener Folgendes hinzu, um das Debug-Overlay auf Ihrem Empfängergerät in der Vorschau 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();
  }
});

9. Command-and-Control-Tool verwenden

Übersicht

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

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

So starten Sie eine neue Cast-Verbindung:

1. Öffnen Sie das CaC-Tool, legen Sie die Receiver-App-ID fest und klicken Sie auf die Cast-Schaltfläche, um Inhalte auf den Receiver zu streamen.
2. Eine separate Absender-App mit derselben Empfänger-App-ID auf dasselbe Gerät streamen.
3. Medien aus der Sender-App werden geladen und Logmeldungen werden im Tool angezeigt.

Einer bestehenden Cast-Sitzung beitreten:

1. Die ID der laufenden Cast-Sitzung mit dem Receiver SDK oder dem Sender SDK abrufen Geben Sie auf der Empfängerseite Folgendes ein, um die Sitzungs-ID in der Konsole des Chrome Remote Debugger abzurufen:

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

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

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 sollten Log-Meldungen angezeigt werden.

Vorschläge

Als Nächstes verwenden wir das CaC-Tool, um Logs auf Ihrem Beispiel-Empfänger zu sehen.

1. Öffnen Sie das CaC-Tool.

2. Geben Sie die Receiver-App-ID Ihrer Beispiel-App ein und klicken Sie auf die Schaltfläche SET APP ID.
3. 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.

4. Klicken Sie oben auf den 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. Auf deinem Gerät sollte jetzt ein Beispielvideo abgespielt werden. Ihre Logs aus den vorherigen Schritten sollten jetzt unten im Tool auf dem Tab „Log Messages“ (Log-Meldungen) 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 auf dem Empfänger ein Debug-Overlay 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

Sie wissen jetzt, wie Sie Ihrer für Google Cast optimierten Web Receiver-App mit dem aktuellen Cast Receiver SDK den Cast Debug Logger hinzufügen.

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

Du möchtest mehr Cast-Inhalte?

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