Debug delle app ricevitore Cast

1. Panoramica

Logo di Google Cast

Questo codelab ti insegnerà ad aggiungere Cast Debug Logger alla tua app Custom Web Receiver esistente.

Che cos'è Google Cast?

L'SDK Google Cast consente alla tua app di riprodurre contenuti e controllare la riproduzione sui dispositivi compatibili con Google Cast. Fornisce i componenti UI necessari in base all'elenco di controllo del design di Google Cast.

L'elenco di controllo per la progettazione di Google Cast è fornito per rendere l'esperienza utente di Cast semplice e prevedibile su tutte le piattaforme supportate.

Cosa realizzeremo

Al termine di questo codelab, avrai un Custom Web Receiver integrato con Cast Debug Logger.

Per ulteriori dettagli e informazioni, consulta la guida a Cast Debug Logger.

Obiettivi didattici

  • Come configurare l'ambiente per lo sviluppo di Web Receiver.
  • Come integrare il Debug Logger nel ricevitore Cast.

Che cosa ti serve

Esperienza

  • Devi avere esperienza con Cast e capire come funziona un ricevitore web Cast.
  • Devi avere conoscenze pregresse di sviluppo web.
  • Inoltre, dovrai avere già guardato la TV. :)

Come utilizzerai questo tutorial?

Leggilo e basta Leggilo e completa gli esercizi

Come valuti la tua esperienza di creazione di app web?

Principiante Intermedio Avanzato

Come valuteresti la tua esperienza di visione della TV?

Principiante Intermedio Avanzato

2. recupera il codice campione

Puoi scaricare tutto il codice di esempio sul tuo computer…

ed estrai il file ZIP scaricato.

3. Deployment del ricevitore in locale

Per poter utilizzare il ricevitore web con un dispositivo Cast, è necessario ospitarlo in un luogo in cui il dispositivo Cast possa raggiungerlo. Se hai già a disposizione un server che supporta HTTPS, salta le istruzioni seguenti e prendi nota dell'URL, perché ti servirà nella sezione successiva.

Se non hai un server disponibile, puoi utilizzare Firebase Hosting o ngrok.

Esegui il server

Una volta configurato il servizio che preferisci, vai a app-start e avvia il server.

Prendi nota dell'URL del ricevitore ospitato. Lo utilizzerai nella sezione successiva.

4. Registrare un'applicazione in Cast Developer Console

Devi registrare la tua applicazione per poter eseguire un Web Receiver personalizzato, come quello creato in questo codelab, sui dispositivi Chromecast. Dopo aver registrato l'applicazione, riceverai un ID applicazione che l'applicazione mittente deve utilizzare per eseguire chiamate API, ad esempio per avviare un'applicazione ricevitore.

Immagine di Cast Developer Console con il pulsante "Aggiungi nuova applicazione" evidenziato

Fai clic su "Aggiungi nuova applicazione".

Immagine della schermata "Nuova applicazione ricevitore" con l'opzione "Ricevitore personalizzato" evidenziata

Seleziona "Ricevitore personalizzato", ovvero ciò che stiamo creando.

Immagine del campo "URL applicazione ricevitore" nella finestra di dialogo "Nuovo ricevitore personalizzato" in fase di compilazione

Inserisci i dettagli del nuovo destinatario, assicurandoti di utilizzare l'URL dell'ultima sezione. Prendi nota dell'ID applicazione assegnato al tuo nuovo ricevitore.

Devi anche registrare il tuo dispositivo Google Cast in modo che possa accedere all'applicazione ricevitore prima di pubblicarla. Una volta pubblicata, l'applicazione ricevitore sarà disponibile per tutti i dispositivi Google Cast. Ai fini di questo codelab, ti consigliamo di lavorare con un'applicazione ricevitore non pubblicata.

Immagine di Google Cast SDK Developer Console con il pulsante "Aggiungi nuovo dispositivo" evidenziato

Fai clic su "Aggiungi nuovo dispositivo".

Immagine della finestra di dialogo "Aggiungi dispositivo ricevitore di trasmissione"

Inserisci il numero di serie stampato sul retro del dispositivo di trasmissione e assegna un nome descrittivo. Puoi trovare il numero di serie anche trasmettendo lo schermo in Chrome quando accedi a Google Cast SDK Developer Console.

Occorreranno 5-15 minuti prima che il ricevitore e il dispositivo siano pronti per il test. Dopo aver atteso 5-15 minuti, devi riavviare il dispositivo Cast.

5. Esegui l'app di esempio

Logo di Google Chrome

Mentre attendiamo che il nostro nuovo Web Receiver sia pronto per i test, vediamo come appare un'app Web Receiver di esempio completata. Il ricevitore che creeremo sarà in grado di riprodurre contenuti multimediali utilizzando lo streaming a bitrate adattivo.

  1. Nel browser, apri lo strumento di comando e controllo (CaC).

Immagine della scheda "Cast Connect & Logger Controls" dello strumento Command and Control (CaC)

  1. Utilizza l'ID destinatario predefinito CC1AD845 e fai clic sul pulsante SET APP ID.
  2. Fai clic sul pulsante Trasmetti in alto a sinistra e seleziona il tuo dispositivo compatibile con Google Cast.

Immagine della scheda "Controlli di trasmissione, connessione e logging" dello strumento Command and Control (CaC) che indica che è connesso a un'app ricevitore

  1. Vai alla scheda LOAD MEDIA in alto.

Immagine della scheda "Carica contenuti multimediali" dello strumento di comando e controllo

  1. Modifica il pulsante di opzione del tipo di richiesta in LOAD.
  2. Fai clic sul pulsante SEND REQUEST per riprodurre un video di esempio.
  3. Il video inizierà a essere riprodotto sul dispositivo compatibile con Google Cast per mostrare l'aspetto della funzionalità di base del ricevitore utilizzando il ricevitore predefinito.

6. Prepara il progetto iniziale

Dobbiamo aggiungere il supporto di Google Cast all'app di avvio che hai scaricato. Di seguito sono riportati alcuni termini di Google Cast che utilizzeremo in questo codelab:

  • un'app mittente viene eseguita su un dispositivo mobile o un laptop,
  • Un'app ricevitore viene eseguita sul dispositivo Google Cast o Android TV.

Ora puoi creare il progetto iniziale utilizzando il tuo editor di testo preferito:

  1. Seleziona la directory icona cartellaapp-start dal download del codice campione.
  2. Apri js/receiver.js e index.html

Tieni presente che, mentre segui questo codelab, http-server dovrebbe rilevare le modifiche che apporti. In caso contrario, prova a interrompere e riavviare http-server.

Progettazione di app

L'app ricevitore inizializza la sessione Cast e rimane in standby finché non arriva una richiesta LOAD (ad esempio il comando per riprodurre un contenuto multimediale) da un mittente.

L'app è composta da una visualizzazione principale, definita in index.html, e da un file JavaScript denominato js/receiver.js contenente tutta la logica per far funzionare il ricevitore.

index.html

Questo file HTML contiene tutta l'interfaccia utente della nostra app ricevitore.

receiver.js

Questo script gestisce tutta la logica della nostra app ricevitore.

Domande frequenti

7. Integrare l'API CastDebugLogger

L'SDK Cast Receiver offre un'altra opzione per consentire agli sviluppatori di eseguire facilmente il debug dell'app ricevitore utilizzando l'API CastDebugLogger.

Per ulteriori dettagli e informazioni, consulta la guida a Cast Debug Logger.

Inizializzazione

Includi il seguente script nel tag <head> dell'app ricevitore subito dopo lo script dell'SDK Web Receiver, 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>

In js/receiver.js nella parte superiore del file e sotto playerManager, recupera l'istanza CastDebugLogger e attiva il logger in un listener di eventi READY:

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

Quando il logger di debug è attivato, sul ricevitore viene visualizzato un overlay di DEBUG MODE.

Immagine di un video in riproduzione con il messaggio &quot;DEBUG MODE&quot; (MODALITÀ DEBUG) su sfondo rosso nell&#39;angolo in alto a sinistra del frame

Registra eventi giocatore

Utilizzando CastDebugLogger, puoi registrare facilmente gli eventi del giocatore attivati dall'SDK Cast Web Receiver e utilizzare diversi livelli di registrazione per registrare i dati degli eventi. La configurazione loggerLevelByEvents utilizza cast.framework.events.EventType e cast.framework.events.category per specificare gli eventi da registrare.

Aggiungi quanto segue sotto il listener di eventi READY per registrare quando vengono attivati gli eventi CORE del player o viene trasmessa una modifica mediaStatus:

...

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

Messaggi di log e tag personalizzati

L'API CastDebugLogger consente di creare messaggi di log che vengono visualizzati nell'overlay di debug del ricevitore con colori diversi. Utilizza i seguenti metodi di log, elencati in ordine di priorità decrescente:

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

Per ogni metodo di log, il primo parametro deve essere un tag personalizzato e il secondo parametro è il messaggio di log. Il tag può essere qualsiasi stringa che ritieni utile.

Per visualizzare i log in azione, aggiungili all'intercettore LOAD.

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

Puoi controllare quali messaggi vengono visualizzati nell'overlay di debug impostando il livello di log in loggerLevelByTags per ogni tag personalizzato. Ad esempio, l'attivazione di un tag personalizzato con il livello di log cast.framework.LoggerLevel.DEBUG visualizzerà tutti i messaggi aggiunti con i messaggi di log di errore, avviso, informazioni e debug. Un altro esempio è che l'attivazione di un tag personalizzato con livello WARNING visualizzerebbe solo i messaggi di log di errore e avviso.

La configurazione loggerLevelByTags è facoltativa. Se un tag personalizzato non è configurato per il livello del logger, tutti i messaggi di log verranno visualizzati nell'overlay di debug.

Aggiungi quanto segue sotto la chiamata loggerLevelByEvents:

...

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

...

8. Utilizzo dell'overlay di debug

Cast Debug Logger fornisce un overlay di debug sul ricevitore per mostrare i messaggi di log personalizzati. Utilizza showDebugLogs per attivare/disattivare l'overlay di debug e clearDebugLogs per cancellare i messaggi di log nell'overlay.

Aggiungi quanto segue al listener di eventi READY per visualizzare l'overlay di debug sul ricevitore:

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

Immagine che mostra l&#39;overlay di debug, un elenco di messaggi del log di debug su uno sfondo traslucido sopra un fotogramma video

9. Utilizzo dello strumento di comando e controllo (CaC)

Panoramica

Lo strumento di comando e controllo (CaC) acquisisce i log e controlla l'overlay di debug.

Esistono due modi per collegare il ricevitore allo strumento CaC:

Avvia una nuova connessione Cast:

  1. Apri lo strumento CaC, imposta l'ID app del destinatario e fai clic sul pulsante Trasmetti per trasmettere al destinatario.
  2. Trasmetti un'app mittente separata allo stesso dispositivo con lo stesso ID app ricevitore.
  3. I contenuti multimediali caricati dall'app mittente e i messaggi di log verranno visualizzati nello strumento.

Partecipare a una sessione di Cast esistente:

  1. Recupera l'ID sessione di trasmissione in esecuzione utilizzando l'SDK del ricevitore o l'SDK del mittente. Dal lato ricevitore, inserisci quanto segue per ottenere l'ID sessione nella console Chrome Remote Debugger:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

In alternativa, puoi ottenere l'ID sessione da un mittente web connesso utilizzando il seguente metodo:

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

Immagine della scheda &quot;Controlli di Cast Connect e del logger&quot; dello strumento Command and Control (CaC) per riprendere la sessione

  1. Inserisci l'ID sessione nello strumento CaC e fai clic sul pulsante RESUME.
  2. Il pulsante Trasmetti dovrebbe essere connesso e iniziare a mostrare i messaggi di log nello strumento.

Cose da provare

Successivamente, utilizzeremo lo strumento CaC per visualizzare i log sul ricevitore di esempio.

  1. Apri lo strumento CaC.

Immagine della scheda &quot;Cast Connect & Logger Controls&quot; dello strumento Command and Control (CaC)

  1. Inserisci l'ID app del destinatario della tua app di esempio e fai clic sul pulsante SET APP ID.
  2. Fai clic sul pulsante Trasmetti in alto a sinistra e seleziona il dispositivo compatibile con Google Cast per aprire il ricevitore.

Immagine della scheda &quot;Controlli di trasmissione, connessione e logging&quot; dello strumento Command and Control (CaC) che indica che è connesso a un&#39;app ricevitore

  1. Vai alla scheda LOAD MEDIA in alto.

Immagine della scheda &quot;Carica contenuti multimediali&quot; dello strumento di comando e controllo

  1. Modifica il pulsante di opzione del tipo di richiesta in LOAD.
  2. Fai clic sul pulsante SEND REQUEST per riprodurre un video di esempio.

Immagine della scheda &quot;Cast Connect & Logger Controls&quot; (Controlli di Cast Connect e del logger) dello strumento Command and Control (CaC) con i messaggi di log che riempiono il riquadro inferiore

  1. Ora sul dispositivo dovrebbe essere riprodotto un video di esempio. Dovresti iniziare a visualizzare i log dei passaggi precedenti nella scheda "Messaggi di log" nella parte inferiore dello strumento.

Prova a esplorare le seguenti funzionalità per esaminare i log e controllare il ricevitore:

  • Fai clic sulla scheda MEDIA INFO o MEDIA STATUS per visualizzare le informazioni e lo stato dei contenuti multimediali.
  • Fai clic sul pulsante SHOW OVERLAY per visualizzare un overlay di debug sul ricevitore.
  • Usa il pulsante CLEAR CACHE AND STOP per ricaricare l'app ricevitore e trasmettere di nuovo.

10. Complimenti

Ora sai come aggiungere Cast Debug Logger all'app Web Receiver compatibile con Cast utilizzando l'ultima versione dell'SDK Cast Receiver.

Per maggiori dettagli, consulta le guide per sviluppatori Cast Debug Logger e Command and Control (CaC) Tool.