Debug delle app ricevitore Cast

1. Panoramica

Questo codelab ti insegnerà ad aggiungere il log di debug di Google Cast all'app di ricezione web personalizzata esistente.

Che cos'è Google Cast?

L'SDK Google Cast consente alla tua app di riprodurre contenuti e controllare la riproduzione su dispositivi compatibili con Google Cast. Fornisce i componenti dell'interfaccia utente necessari in base all'elenco di controllo per la progettazione di Google Cast.

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

Cosa realizzeremo?

Al termine del codelab, avrai un ricevitore web personalizzato integrato in Cast Debug Logger.

Per dettagli e ulteriori informazioni, consulta la guida dello strumento di registrazione del debug di Google Cast.

Obiettivi didattici

• Come configurare l'ambiente per lo sviluppo del ricevitore web.
• Come integrare il Debug Logger nel ricevitore Cast.

Che cosa ti serve

• Versione più recente del browser Google Chrome.
• Servizio di hosting HTTPS come Firebase Hosting o ngrok.
• Un dispositivo Google Cast, ad esempio Chromecast o Android TV, configurato con accesso a internet.
• Una TV o un monitor con ingresso HDMI.

Esperienza

• È necessario avere già esperienza di Google Cast e comprendere il funzionamento di un ricevitore web Cast.
• Devi avere conoscenze pregresse nello sviluppo web.
• Ti servirà anche una conoscenza pregressa dell'esperienza TV. :)

2. recupera il codice campione

Puoi scaricare tutto il codice campione sul tuo computer...

file_downloadOrigine del download

e decomprimi il file ZIP scaricato.

3. Deployment del ricevitore in locale

Per poter utilizzare il ricevitore web con un dispositivo di trasmissione, il ricevitore deve essere ospitato in un luogo dove il dispositivo di trasmissione può raggiungerlo. Se è già disponibile un server che supporta https, ignora le seguenti istruzioni e prendi nota dell'URL, che ti servirà nella sezione successiva.

Se non disponi di un server disponibile per l'uso, puoi utilizzare Firebase Hosting o ngrok.

Esegui il server

Dopo aver configurato il servizio che preferisci, accedi a app-start e avvia il server.

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

4. Registrare un'applicazione in Cast Console per gli sviluppatori

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

Fai clic su "Aggiungi nuova applicazione"

Seleziona "Ricevitore personalizzato": ecco cosa stiamo creando.

Inserisci i dettagli del nuovo destinatario, assicurati di utilizzare l'URL della sezione precedente. Prendi nota dell'ID applicazione assegnato al nuovo destinatario.

Devi anche registrare il 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, è consigliabile lavorare con un'applicazione di ricezione non pubblicata.

Fai clic su "Aggiungi nuovo dispositivo"

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 alla Console per gli sviluppatori dell'SDK Google Cast

Occorrono 5-15 minuti prima che il ricevitore e il dispositivo siano pronti per la prova. Dopo aver atteso 5-15 minuti, devi riavviare il dispositivo di trasmissione.

5. Esegui l'app di esempio

In attesa che il nostro nuovo WebRicevitore sia pronto per i test, vediamo che aspetto ha un esempio di app Web receiver completata. Il ricevitore che creeremo sarà in grado di riprodurre contenuti multimediali utilizzando lo streaming con velocità in bit adattiva.

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

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

4. Vai alla scheda LOAD MEDIA in alto.

5. Imposta il pulsante di opzione Tipo di richiesta su LOAD.
6. Fai clic sul pulsante SEND REQUEST per riprodurre un video di esempio.
7. Il video verrà riprodotto sul tuo dispositivo compatibile con Google Cast per mostrare come funziona il ricevitore di base con il ricevitore predefinito.

6. Prepara il progetto iniziale

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

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

Ora è tutto pronto per basarti sul progetto di partenza utilizzando il tuo editor di testo preferito:

1. Seleziona la directory app-start dal download del codice di esempio.
2. Apri js/receiver.js e index.html

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

Design dell'app

L'app ricevente inizializza la sessione di trasmissione 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 vista principale, definita in index.html, e da un file JavaScript chiamato js/receiver.js contenente tutta la logica per il funzionamento del ricevitore.

index.html

Questo file HTML contiene tutte le UI dell'app ricevitore.

receiver.js

Questo script gestisce tutte le logiche dell'app ricevitore.

Domande frequenti

• Che cos'è Google Cast?
• Come faccio a diventare uno sviluppatore Google Cast?

7. Integrazione con l'API CastDebugLogger

L'SDK Cast Ricevir fornisce agli sviluppatori un'altra opzione per eseguire facilmente il debug dell'app ricevitore utilizzando l'API CastDebugLogger.

Per dettagli e ulteriori informazioni, consulta la guida dello strumento di registrazione del debug di Google Cast.

Inizializzazione

Includi il seguente script nel tag <head> dell'app ricevitore subito dopo lo script dell'SDK WebRicevitore, 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 all'inizio del file e sotto playerManager, recupera l'istanza CastDebugLogger e abilita 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.

Registra eventi player

Con CastDebugLogger puoi registrare facilmente gli eventi del player attivati dall'SDK Cast Web receiver e utilizzare diversi livelli di logger per registrare i dati sugli eventi. La configurazione di loggerLevelByEvents richiede 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 ti consente di creare messaggi di log da visualizzare con colori diversi nell'overlay di debug del ricevitore. Utilizza i seguenti metodi di log, elencati in ordine di priorità, dalla più alta alla più bassa:

• 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 il messaggio di log. Il tag può essere qualsiasi stringa che ritieni utile.

Per mostrare i log in azione, aggiungi i log 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, se attivi un tag personalizzato con livello di log cast.framework.LoggerLevel.DEBUG, verranno visualizzati tutti i messaggi aggiunti con errori, avvisi, informazioni e messaggi di log di debug. Un altro esempio è che l'attivazione di un tag personalizzato con livello WARNING consente di visualizzare solo i messaggi di log di errore e avviso.

La configurazione di loggerLevelByTags è facoltativa. Se un tag personalizzato non è configurato per il relativo livello di 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. Usa showDebugLogs per attivare/disattivare l'overlay di debug e clearDebugLogs per cancellare i messaggi di log sull'overlay.

Aggiungi quanto segue al listener di eventi READY per visualizzare l'anteprima dell'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();
  }
});

9. Utilizzo dello strumento Comando e controllo (CaC)

Panoramica

Lo strumento 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 a Google Cast.

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

Partecipare a una sessione di trasmissione esistente:

1. Recupera l'ID sessione di trasmissione in esecuzione utilizzando l'SDK ricevitore o l'SDK del mittente. Dal lato destinatario, inserisci quanto segue per ottenere l'ID sessione nella console di 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();

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

Cose da provare

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

1. Apri lo strumento CaC.

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

4. Vai alla scheda LOAD MEDIA in alto.

5. Imposta il pulsante di opzione Tipo di richiesta su LOAD.
6. Fai clic sul pulsante SEND REQUEST per riprodurre un video di esempio.

7. A questo punto dovrebbe essere in riproduzione un video di esempio sul tuo dispositivo. I log dei passaggi precedenti dovrebbero iniziare a essere visualizzati nella sezione "Messaggi di log". nella parte inferiore dello strumento.

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

• 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 lo strumento di registrazione del debug di Google Cast all'app Web Ricevitore compatibile con Google Cast utilizzando l'SDK Cast Ricevitore più recente.

Per ulteriori dettagli, consulta le guide per gli sviluppatori di Cast Debug Logger e Command and Control (CaC).