Aggiungere l'assistenza in tempo reale a un ricevitore Cast

1. Panoramica

Questo codelab ti insegnerà a creare un'app di ricezione web personalizzata 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 di contenuti multimediali sulla TV.

L'SDK Google Cast ti consente di estendere la tua app per controllare la TV o l'impianto audio. L'SDK Cast ti consente di aggiungere 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

Al termine di questo codelab, avrai realizzato un ricevitore di trasmissione che sfrutta le API live.

Obiettivi didattici

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

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 oppure Google Home Hub.

Esperienza

• È richiesta una conoscenza pregressa dello sviluppo web.
• Precedente esperienza nella creazione di applicazioni per mittente e destinatario della trasmissione.

2. Recupera il codice campione

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

file_downloadScarica il codice sorgente

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 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 ottenuto

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

Prima di iniziare questo codelab, potrebbe essere utile consultare la guida per gli sviluppatori dal vivo, che offre una panoramica delle API attive.

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

Il destinatario è composto da tre file. Un file HTML di base denominato receiver.html che contiene la struttura principale dell'app. Non è necessario modificare questo file. Esiste anche un file denominato receiver.js, che contiene tutta la logica del destinatario. Infine, c'è anche un metadata_service.js che verrà utilizzato in seguito nel codelab per simulare l'ottenimento dei dati della guida al programma.

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

È necessario comunicare al Web ricevir Cast Application Framework (CAF) che i contenuti da riprodurre sono un live streaming. Per farlo, modifica l'applicazione con la riga di codice riportata di seguito. Aggiungilo al corpo principale dell'intercettatore del carico in receiver.js:

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

L'impostazione del tipo di stream su LIVE abilita l'UI live di CAF. L'SDK Web Receiver passerà automaticamente al perimetro dal vivo dello stream. I dati della guida ai programmi dal vivo non sono ancora stati aggiunti, quindi la barra di scrubbing rappresenterà l'intera lunghezza dell'intervallo cercato per lo 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 ai programmi

Il supporto del CAF per i contenuti dal vivo ora include il supporto per la visualizzazione dei dati della guida al programma nelle applicazioni destinatario e mittente. I fornitori di contenuti sono vivamente invitati a includere metadati di programmazione nelle applicazioni di ricezione per una migliore esperienza utente finale, soprattutto per i live streaming di lunga durata come i canali TV.

CAF supporta l'impostazione dei metadati per più programmi in un unico stream. Impostando timestamp di inizio e durate sugli oggetti MediaMetadata, il destinatario aggiorna automaticamente i metadati visualizzati sui mittenti e l'overlay in base alla posizione corrente del player nello stream. Di seguito è riportato un esempio delle API e il 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 dei metadati del programma, crea un contenitore. ContainerMetadata contiene un elenco di MediaMetadata oggetti 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 automaticamente copiati nello stato del supporto. Aggiungi il codice seguente al file receiver.js per scaricare i metadati di esempio dal nostro servizio e fornire il container al 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 guida nell'intercettatore del carico:

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 sullo schermo.

Un nuovo messaggio di stato dei contenuti multimediali viene inviato dal destinatario a tutti i mittenti quando la testina di riproduzione passa a una nuova sezione del container in modo che le applicazioni del mittente possano aggiornare la loro UI. È consigliabile che le applicazioni del destinatario aggiornino i metadati del container in un intercettatore dello stato dei contenuti multimediali per continuare a inviare le informazioni del programma alle applicazioni del mittente. Nel nostro servizio di esempio, restituiamo i metadati del programma corrente, oltre ai metadati per i due programmi successivi. Per aggiornare i metadati di uno stream, crea un nuovo contenitore e chiama setContainerMetadata come nell'esempio precedente.

7. Disattivazione della ricerca in corso...

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

Nell'intercettatore del carico, rimuovi il comando multimediale supportato SEEK. In questo modo verrà disattivata la ricerca su tutte le interfacce touch e mittente del dispositivo mobile. Aggiungi il codice seguente dopo le definizioni delle variabili di istanza SDK in receiver.js.

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

Per disattivare i comandi di ricerca vocale basati sull'assistente, ad esempio Ok Google, vai indietro di 60 secondi, devi utilizzare l'intercettatore di ricerca. Questo intercettore viene chiamato ogni volta che viene effettuata una richiesta di ricerca. Se il comando multimediale supportato da SEEK è disabilitato, l'intercettatore 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ù riuscire a cercare contenuti all'interno del live streaming.

8. Congratulazioni

Ora sai come creare un'applicazione ricevitore personalizzata utilizzando l'ultimo SDK Cast ricevitore.

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