Debug delle app ricevitore Cast

1. Panoramica

Questo codelab ti insegnerà ad aggiungere Cast Debug Logger alla tua app ricevitore web personalizzata 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 per la progettazione di Google Cast.

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

Cosa realizzeremo

Una volta completato questo codelab, avrai un ricevitore web personalizzato integrato con Cast Debug Logger.

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

Obiettivi didattici

• Come configurare l'ambiente per lo sviluppo di Web ricevir.
• Come integrare Debug Logger nel ricevitore di trasmissione.

Che cosa ti serve

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

• Dovresti avere esperienza con la trasmissione e sapere come funziona un ricevitore web di trasmissione.
• È richiesta una conoscenza pregressa dello sviluppo web.
• È necessaria anche una conoscenza pregressa di come guardare la TV :)

2. Recupera il codice campione

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

file_downloadOrigine download

e decomprimere il file ZIP scaricato.

3. Deployment locale del ricevitore

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

Se non disponi di un server da utilizzare, puoi usare 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 destinatario ospitato. Lo utilizzerai nella prossima sezione.

4. Registrare un'applicazione nella Console per gli sviluppatori di Google Cast

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

Fai clic su "Aggiungi nuova applicazione"

Seleziona "Ricevitore personalizzato". È quello che stiamo realizzando.

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

Devi inoltre registrare il dispositivo Google Cast in modo che possa accedere all'applicazione ricevitore prima di pubblicarla. Una volta pubblicata, l'applicazione del ricevitore sarà disponibile per tutti i dispositivi Google Cast. Ai fini di questo codelab è consigliabile lavorare con un'applicazione ricevitore 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.

Saranno necessari 5-15 minuti prima che ricevitore e dispositivo siano pronti per i test. Dopo aver atteso 5-15 minuti, devi riavviare il dispositivo di trasmissione.

5. Esegui l'app di esempio

Mentre attendiamo che il nostro nuovo ricevitore web sia pronto per i test, vediamo come appare un'app di esempio di ricezione web completata. Il ricevitore che stiamo creando 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 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 del tipo di richiesta su LOAD.
6. Fai clic sul pulsante SEND REQUEST per riprodurre un video di esempio.
7. La riproduzione del video inizierà sul tuo dispositivo compatibile con Google Cast per mostrare la funzionalità di base del ricevitore quando usa il ricevitore predefinito.

6. Prepara il progetto di avvio

Dobbiamo aggiungere il supporto di Google Cast all'app iniziale che hai scaricato. Ecco alcuni termini di Google Cast che utilizzeremo in questo codelab:

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

Ora puoi iniziare a creare sulla base del progetto di partenza utilizzando il tuo editor di testo preferito:

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

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

Progettazione dell'app

L'app del destinatario inizializza la sessione di trasmissione e resta in modalità standby finché non arriva una richiesta LOAD (ad esempio il comando per riprodurre un elemento multimediale) da parte del mittente.

L'app è costituita da una visualizzazione principale, definita in index.html, e da un file JavaScript chiamato js/receiver.js contenente tutta la logica necessaria per il funzionamento del destinatario.

index.html

Questo file HTML contiene tutte le UI dell'app del destinatario.

receiver.js

Questo script gestisce tutta la logica 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 ricevitore fornisce agli sviluppatori un'altra opzione per eseguire facilmente il debug dell'app ricevitore utilizzando l'API CastDebugLogger.

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

Inizializzazione

Includi il seguente script nel tag <head> dell'app del destinatario, subito dopo lo script dell'SDK Web Ricevir, 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 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 è abilitato, viene visualizzato un overlay di DEBUG MODE sul ricevitore.

Eventi del player di log

Con CastDebugLogger puoi registrare facilmente gli eventi del player attivati dall'SDK Cast Web ricevir 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 consente di creare messaggi di log che vengono visualizzati con colori diversi sull'overlay di debug del destinatario. 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 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 stabilire quali messaggi visualizzare sull'overlay di debug impostando il livello di log in loggerLevelByTags per ogni tag personalizzato. Ad esempio, se attivi un tag personalizzato a livello di log cast.framework.LoggerLevel.DEBUG, vengono visualizzati 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 livello WARNING consente di visualizzare solo messaggi di log di errore e di avviso.

La configurazione loggerLevelByTags è facoltativa. Se un tag personalizzato non è configurato per il suo livello di log, tutti i messaggi di log verranno visualizzati sull'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 sull'overlay.

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

// 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 Command and Control (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 destinatario e fai clic sul pulsante Trasmetti per trasmettere al ricevitore.
2. Trasmetti un'app del mittente separata allo stesso dispositivo con lo stesso ID app del destinatario.
3. Carica contenuti multimediali dall'app del mittente e i messaggi di log verranno visualizzati nello strumento.

Partecipare a una sessione di trasmissione esistente:

1. Ottieni l'ID sessione di trasmissione in esecuzione utilizzando l'SDK del destinatario 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 connesso e iniziare a mostrare i messaggi di log nello strumento.

Da provare

Successivamente, 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 dispositivo compatibile con Google Cast per aprire il ricevitore.

4. Vai alla scheda LOAD MEDIA in alto.

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

7. Ora sul 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 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 destinatario.
• Usa il pulsante CLEAR CACHE AND STOP per ricaricare l'app del destinatario e trasmettere di nuovo.

10. Congratulazioni

Ora sai come aggiungere Cast Debug Logger alla tua app web ricevitore compatibile con Google Cast utilizzando la versione più recente dell'SDK Cast ricevitore.

Per ulteriori dettagli, consulta le guide per gli sviluppatori Cast Debug Logger e Strumento di comando e controllo (CaC).