Attivazione di Google Cast per un'app web

1. Panoramica

Questo codelab ti insegnerà a modificare un'app video web esistente per trasmettere contenuti su un dispositivo compatibile con Google Cast.

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 un'app video web di Chrome in grado di trasmettere video a un dispositivo Google Cast.

Obiettivi didattici

• Come aggiungere l'SDK Google Cast a un'app video di esempio.
• Come aggiungere il pulsante Trasmetti per selezionare un dispositivo Google Cast.
• Come connettersi a un dispositivo di trasmissione e avviare un ricevitore multimediale.
• Come trasmettere un video.
• Come integrare Cast Connect

Che cosa ti serve

• L'ultima versione del browser Google Chrome.
• Servizio di hosting HTTPS come Firebase Hosting o ngrok.
• Un dispositivo Google Cast come Chromecast o Android TV configurato con accesso a internet.
• Una TV o un monitor con ingresso HDMI.
• Per testare l'integrazione di Cast Connect è necessario Chromecast con Google TV, ma è facoltativo per il resto del Codelab. Se non ne hai uno, puoi saltare il passaggio Aggiungi il supporto di Cast Connect, verso la fine di questo tutorial.

Esperienza

• Devi avere conoscenze pregresse di sviluppo web.
• Inoltre, dovrai avere già guardato la TV. :)

2. recupera il codice campione

Puoi scaricare tutto il codice di esempio sul tuo computer…

file_downloadScarica il codice sorgente

ed estrai il file ZIP scaricato.

3. Esegui l'app di esempio

Innanzitutto, vediamo come appare l'app di esempio completata. L'app è un video player di base. L'utente può selezionare un video da un elenco e riprodurlo localmente sul dispositivo o trasmetterlo a un dispositivo Google Cast.

Per poter utilizzare il completamento, è necessario ospitarlo.

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-done e avvia il server.

Nel browser, visita l'URL https dell'esempio che hai ospitato.

1. Dovresti vedere l'app video.
2. Fai clic sul pulsante Trasmetti e seleziona il tuo dispositivo Google Cast.
3. Seleziona un video e fai clic sul pulsante di riproduzione.
4. Il video inizierà la riproduzione sul dispositivo Google Cast.

Fai clic sul pulsante di pausa nell'elemento video per mettere in pausa il video sul ricevitore. Fai clic sul pulsante di riproduzione nell'elemento video per continuare a riprodurre il video.

Fai clic sul pulsante Trasmetti per interrompere la trasmissione al dispositivo Google Cast.

Prima di andare avanti, arresta il server.

4. Prepara il progetto iniziale

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

• un'app mittente viene eseguita su un dispositivo mobile o un laptop,
• un'app ricevitore viene eseguita sul dispositivo Google Cast.

Ora puoi creare il progetto iniziale utilizzando il tuo editor di testo preferito:

1. Seleziona la directory app-start dal download del codice campione.
2. Esegui l'app utilizzando il server ed esplora l'interfaccia utente.

Tieni presente che, mentre lavori a questo codelab, dovrai riospitare l'esempio sul tuo server a seconda del servizio.

Progettazione di app

L'app recupera un elenco di video da un server web remoto e fornisce un elenco che l'utente può sfogliare. Gli utenti possono selezionare un video per visualizzarne i dettagli o riprodurlo localmente sul dispositivo mobile.

L'app è composta da una visualizzazione principale, definita in index.html, e dal controller principale, CastVideos.js.

index.html

Questo file HTML dichiara quasi tutta l'interfaccia utente dell'app web.

Ci sono alcune sezioni di visualizzazioni, tra cui div#main_video, che contiene l'elemento video. In relazione al div del video, abbiamo div#media_control, che definisce tutti i controlli per l'elemento video. Sotto, c'è media_info, che mostra i dettagli del video visualizzato. Infine, il div carousel mostra un elenco di video in un div.

Il file index.html esegue anche il bootstrap dell'SDK Cast e indica alla funzione CastVideos di caricarsi.

La maggior parte dei contenuti che popoleranno questi elementi viene definita, inserita e controllata in CastVideos.js. Diamo un'occhiata.

CastVideos.js

Questo script gestisce tutta la logica dell'app web Cast Videos. L'elenco dei video e i relativi metadati definiti in CastVideos.js sono contenuti in un oggetto denominato mediaJSON.

Esistono alcune sezioni principali che insieme sono responsabili della gestione e della riproduzione del video sia in locale che in remoto. Nel complesso, si tratta di un'applicazione web piuttosto semplice.

CastPlayer è la classe principale che gestisce l'intera app, configurando il player, selezionando i contenuti multimediali e associando gli eventi a PlayerHandler per la riproduzione dei contenuti multimediali. CastPlayer.prototype.initializeCastPlayer è il metodo che configura tutte le funzionalità di trasmissione. CastPlayer.prototype.switchPlayer alterna lo stato tra giocatori locali e remoti. CastPlayer.prototype.setupLocalPlayer e CastPlayer.prototype.setupRemotePlayer inizializza i giocatori locali e remoti.

PlayerHandler è la classe responsabile della gestione della riproduzione dei contenuti multimediali. Esistono diversi altri metodi responsabili dei dettagli della gestione dei contenuti multimediali e della riproduzione.

Domande frequenti

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

5. Aggiungere il pulsante Trasmetti

Un'applicazione compatibile con Google Cast mostra il pulsante Trasmetti nell'elemento video. Se fai clic sul pulsante Trasmetti, viene visualizzato un elenco di dispositivi di trasmissione che un utente può selezionare. Se l'utente stava riproducendo contenuti in locale sul dispositivo mittente, la selezione di un dispositivo di trasmissione avvia o riprende la riproduzione su quel dispositivo. In qualsiasi momento durante una sessione di trasmissione, l'utente può fare clic sul pulsante Trasmetti e interrompere la trasmissione dell'applicazione al dispositivo di trasmissione. L'utente deve essere in grado di connettersi o disconnettersi dal dispositivo di trasmissione mentre si trova in qualsiasi schermata dell'applicazione, come descritto nell'elenco di controllo della progettazione di Google Cast.

Configurazione

Il progetto iniziale richiede le stesse dipendenze e la stessa configurazione dell'app di esempio completata, ma questa volta ospita i contenuti di app-start.

Nel browser, visita l'URL