Aggiungere l'assistenza in tempo reale a un ricevitore Cast

1. Panoramica

Logo di Google Cast

Questo codelab ti insegnerà a creare un'app Custom Web Receiver che utilizza l'API Cast Live Breaks.

Che cos'è Google Cast?

Google Cast consente agli utenti di trasmettere contenuti da un dispositivo mobile a una TV. Gli utenti possono quindi utilizzare il proprio dispositivo mobile come telecomando per la riproduzione dei contenuti multimediali sulla TV.

L'SDK Google Cast ti consente di estendere la tua app per controllare una TV o un sistema audio. L'SDK Cast ti consente di aggiungere i componenti UI necessari in base all'elenco di controllo per la progettazione 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 creato un ricevitore Cast che sfrutta le API Live.

Obiettivi didattici

  • Come gestire i contenuti video live in Cast.
  • Come configurare i vari scenari di live streaming supportati da Cast.
  • Come aggiungere i dati del programma al live streaming

Che cosa ti serve

Esperienza

  • Devi avere conoscenze pregresse di sviluppo web.
  • Esperienza precedente nella creazione di applicazioni mittente e ricevitore Cast.

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

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 ricevitore personalizzato, come quello integrato 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 Google Cast SDK 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 della schermata "Nuovo ricevitore personalizzato" che mostra un URL che qualcuno sta digitando nel campo "URL applicazione ricevitore"

Inserisci i dettagli del nuovo destinatario, assicurandoti di utilizzare l'URL che hai ottenuto.

nell'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. Trasmettere un live streaming semplice

Immagine di uno smartphone Android che riproduce un video; nella parte inferiore, appena sopra un insieme di controlli del video player, viene visualizzato il messaggio "Trasmissione alla sala"Immagine di uno schermo a grandezza naturale che riproduce lo stesso video

Prima di iniziare questo codelab, potrebbe essere utile consultare la guida per gli sviluppatori live, che fornisce una panoramica delle API live.

Per il mittente, utilizzeremo Cactool per avviare una sessione di trasmissione. Il ricevitore è progettato per avviare automaticamente la riproduzione di un live streaming.

Il ricevitore è composto da tre file. Un file HTML di base denominato receiver.html che contiene la struttura principale dell'app. Non dovrai modificare questo file. Esiste anche un file denominato receiver.js, che contiene tutta la logica per il ricevitore. Infine, è presente anche un metadata_service.js che verrà utilizzato in un secondo momento nel codelab per simulare l'ottenimento dei dati della guida ai programmi.

Per iniziare, apri Cactool in Chrome. Inserisci l'ID applicazione ricevitore che ti è stato fornito in Google Cast SDK Developer Console e fai clic su Imposta.

Il framework dell'applicazione di trasmissione del ricevitore web (CAF) deve essere istruito affinché i contenuti da riprodurre siano un live streaming. Per farlo, modifica l'applicazione con la seguente riga di codice. Aggiungilo al corpo principale dell'intercettatore di caricamento in receiver.js:

request.media.streamType = cast.framework.messages.StreamType.LIVE;

L'impostazione del tipo di stream su LIVE attiva l'interfaccia utente live di CAF. L'SDK Web Receiver passerà automaticamente al bordo live dello stream. I dati della guida ai programmi live non sono ancora stati aggiunti, quindi la barra di ricerca rappresenterà l'intera durata dell'intervallo di ricerca dello stream.

Salva le modifiche apportate a receiver.js e avvia una sessione di trasmissione su Cactool facendo clic sul pulsante Trasmetti e selezionando un dispositivo di trasmissione di destinazione. La riproduzione del live streaming dovrebbe iniziare immediatamente.

6. Aggiunta dei dati della guida dei programmi

Il supporto di CAF per i contenuti live ora include il supporto per la visualizzazione dei dati della guida ai programmi nelle applicazioni ricevitore e mittente. I fornitori di contenuti sono fortemente incoraggiati a includere i metadati di programmazione nelle loro applicazioni ricevitore per una migliore esperienza utente finale, in particolare per gli stream live di lunga durata come i canali TV.

CAF supporta l'impostazione dei metadati per più programmi in un singolo stream. Impostando i timestamp di inizio e le durate sugli oggetti MediaMetadata, il ricevitore aggiorna automaticamente i metadati mostrati sui mittenti e la sovrimpressione in base alla posizione corrente del player nello stream. Di seguito è riportato un esempio delle API e del loro utilizzo generale.

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

Per questo codelab utilizzeremo un servizio di metadati di esempio per fornire i metadati per il nostro live streaming. Per creare un elenco di metadati del programma, crea un contenitore. ContainerMetadata contiene un elenco di oggetti MediaMetadata per un singolo stream multimediale. Ogni oggetto MediaMetadata rappresenta una singola sezione del contenitore. Quando la testina di riproduzione si trova all'interno dei limiti di una determinata sezione, i relativi metadati vengono copiati automaticamente nello stato dei contenuti multimediali. Aggiungi il seguente codice al file receiver.js per scaricare i metadati di esempio dal nostro servizio e fornire il contenitore a CAF.

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

Inoltre, aggiungi una chiamata alla funzione per caricare i dati della guida nell'intercettore di caricamento:

loadGuideData();

Salva il file receiver.js e avvia una sessione di trasmissione. Dovresti vedere l'ora di inizio, l'ora di fine e il titolo del programma visualizzati sullo schermo.

Quando la testina di riproduzione passa a una nuova sezione del contenitore, il destinatario invia un nuovo messaggio di stato dei contenuti multimediali a tutti i mittenti in modo che le applicazioni mittenti possano aggiornare la propria UI. È consigliabile che le applicazioni ricevitore aggiornino i metadati del contenitore in un intercettatore dello stato dei contenuti multimediali per continuare a fornire informazioni sui programmi alle applicazioni mittente. Nel nostro servizio di esempio restituiamo i metadati del programma corrente, nonché quelli dei due programmi successivi. Per aggiornare i metadati di uno stream, crea un nuovo contenitore e chiama setContainerMetadata come nell'esempio precedente.

7. Disattivare la ricerca

La maggior parte degli stream video è composta da segmenti che contengono una serie di frame video. Se non diversamente specificato, CAF consentirà agli utenti di cercare all'interno di questi segmenti. Il ricevitore web può specificarlo chiamando un paio di API disponibili.

Nell'intercettatore di caricamento, rimuovi il comando multimediale supportato SEEK. In questo modo, la ricerca viene disattivata su tutte le interfacce touch e di invio mobile. Aggiungi il seguente codice dopo le definizioni delle variabili di istanza dell'SDK in receiver.js.

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

Per disattivare i comandi di ricerca vocale basati sull'assistente, come Ok Google, torna indietro di 60 secondi, è necessario utilizzare l'intercettore di ricerca. Questo intercettore viene chiamato ogni volta che viene effettuata una richiesta di ricerca. Se il comando multimediale SEEK supportato è disattivato, l'intercettore rifiuterà la richiesta di ricerca. Aggiungi il seguente snippet di codice al file receiver.js:

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

Salva il file receiver.js e avvia una sessione di trasmissione. Non dovresti più essere in grado di cercare all'interno del live streaming.

8. Complimenti

Ora sai come creare un'applicazione ricevitore personalizzata utilizzando l'SDK Cast Receiver più recente.

Per maggiori dettagli, consulta la Guida per gli sviluppatori relativa ai live streaming.