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 controllarne la riproduzione sui dispositivi compatibili con Google Cast. Fornisce i componenti dell'interfaccia utente necessari in base all'elenco di controllo per il design 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 di questo codelab, avrai un ricevitore web personalizzato integrato con il logger di debug di Google Cast.

Per dettagli e ulteriori informazioni, consulta la guida al logger di debug di Google Cast.

Obiettivi didattici

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

Che cosa ti serve

• Il browser Google Chrome più recente.
• 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

• Devi avere esperienza con la trasmissione e conoscere il funzionamento di un ricevitore web per la trasmissione.
• Devi avere conoscenze pregresse di sviluppo web.
• Inoltre, dovrai avere già esperienza di visione della 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 hai già a disposizione un server che supporta HTTPS, salta le istruzioni riportate di seguito e prendi nota dell'URL, poiché ti servirà nella sezione successiva.

Se non hai un server a tua disposizione, puoi utilizzare Firebase Hosting o ngrok.

Esegui il server

Dopo aver 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

Per poter eseguire un Web Receiver personalizzato, come quello creato in questo codelab, sui dispositivi Chromecast, devi registrare la tua applicazione. 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 di ricezione.

Fai clic su "Aggiungi nuova applicazione"

Seleziona "Destinatario personalizzato", è quello che stiamo creando.

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

Devi anche registrare il tuo dispositivo Google Cast in modo che possa accedere all'applicazione del ricevitore prima di pubblicarla. Una volta pubblicata, l'applicazione del ricevitore sarà disponibile per tutti i dispositivi Google Cast. Ai fini di questo codelab, ti consigliamo di utilizzare 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 assegnagli 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

Mentre aspettiamo che il nostro nuovo Web Receiver sia pronto per i test, diamo un'occhiata a un'app Web Receiver completata di esempio. Il ricevitore che creeremo sarà in grado di riprodurre contenuti multimediali utilizzando lo streaming a 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 inizierà a essere riprodotto sul tuo dispositivo compatibile con Google Cast per mostrare la 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. Ecco alcuni termini di Google Cast che utilizzeremo in questo codelab:

• un'app di mittente in esecuzione 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 svolgi questo codelab, http-server dovrebbe rilevare le modifiche apportate. In caso contrario, prova a interrompere e riavviare http-server.

Design dell'app

L'app di ricezione inizializza la sessione di trasmissione e rimane in attesa fino all'arrivo di 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 il funzionamento del ricevitore.

index.html

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

receiver.js

Questo script gestisce tutta la logica della nostra app di ricezione.

Domande frequenti

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

7. Integrare l'API CastDebugLogger

L'SDK del ricevitore di Google Cast offre agli sviluppatori un'altra opzione per eseguire facilmente il debug dell'app del 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 del 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 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 è attivo, sul ricevitore viene visualizzato un overlay di DEBUG MODE.

Registra gli eventi del 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 loggerLevelByEvents accetta 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à 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 i messaggi 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 livello di log cast.framework.LoggerLevel.DEBUG mostrerà tutti i messaggi aggiunti con messaggi di log di errore, avviso, informazioni e debug. Un altro esempio è che l'attivazione di un tag personalizzato con il livello WARNING mostrerà solo i messaggi di log di errore e avviso.

La configurazione 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. Utilizzare l'overlay di debug

Il logger di debug di Google Cast 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 di 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 di trasmissione:

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 di mittente separata sullo stesso dispositivo con lo stesso ID app del ricevitore.
3. Carica i contenuti multimediali dall'app 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 collegato 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 connesso e iniziare a mostrare i messaggi di log nello 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 della tua 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. Sul tuo dispositivo dovrebbe essere in riproduzione un video di esempio. I log dei passaggi precedenti dovrebbero iniziare a essere visualizzati 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 di ricezione e trasmettere di nuovo.

10. Complimenti

Ora sai come aggiungere il logger di debug di trasmissione all'app del ricevitore web compatibile con la trasmissione utilizzando l'SDK del ricevitore di trasmissione più recente.

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