Crea un ricevitore web personalizzato

1. Panoramica

Logo di Google Cast

Questo codelab ti insegnerà a creare un'app Custom Web Receiver per riprodurre contenuti sui dispositivi compatibili con 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 o il browser Chrome del computer come telecomando per la riproduzione dei contenuti multimediali sulla TV.

L'SDK Google Cast consente alla tua app di controllare i dispositivi compatibili con Google Cast (ad esempio una TV o un sistema audio). L'SDK Cast ti fornisce 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. Scopri di più qui.

Cosa realizzeremo

Al termine di questo codelab, avrai un'app HTML5 che funge da ricevitore personalizzato in grado di visualizzare contenuti video sui dispositivi compatibili con Cast.

Obiettivi didattici

Come configurare lo sviluppo del ricevitore.
Le basi di un ricevitore compatibile con Cast basato sul framework dell'applicazione Cast.
Come ricevere un video trasmesso.
Come integrare Debug Logger.
Come ottimizzare il ricevitore per gli smart display.

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.

Esperienza

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

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

Come valuteresti la tua esperienza di visione della TV?

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 creato 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.

Saranno necessari 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. Esegui l'app di esempio

Logo di Google Chrome

Mentre aspettiamo che la nostra nuova applicazione ricevitore sia pronta per i test, vediamo come appare un'applicazione ricevitore di esempio completata. Il ricevitore che creeremo sarà in grado di riprodurre contenuti multimediali utilizzando lo streaming a bitrate adattivo (utilizzeremo contenuti di esempio codificati per Dynamic Adaptive Streaming over HTTP (DASH)).

Nel browser, apri lo strumento di comando e controllo (CaC).

Immagine della scheda "Cast Connect & Logger Controls" dello strumento Command and Control (CaC)

Dovresti visualizzare il nostro strumento CaC.
Utilizza l'ID destinatario di esempio predefinito "CC1AD845" e fai clic sul pulsante "Imposta ID app".
Fai clic sul pulsante Trasmetti in alto a sinistra e seleziona il tuo dispositivo Google Cast.

Immagine della scheda "Controlli di trasmissione, connessione e logging" dello strumento Command and Control (CaC) che indica che è connesso a un'app ricevitore

Vai alla scheda "Carica contenuti multimediali" in alto.

Immagine della scheda "Carica contenuti multimediali" dello strumento di comando e controllo

Fai clic sul pulsante "Carica per contenuti" per riprodurre un video di esempio.
Il video inizierà la riproduzione sul dispositivo Google Cast per mostrare l'aspetto della 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. 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:

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

Tieni presente che, mentre segui questo codelab, http-server dovrebbe rilevare le modifiche che apporti. Se noti che non funziona, prova a chiudere e riavviare http-server.

Progettazione di app

L'app ricevitore inizializza la sessione Cast e rimane in standby finché non arriva una richiesta LOAD (ovvero 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 far funzionare il ricevitore.

index.html

Questo file HTML conterrà l'interfaccia utente della nostra app ricevitore. Per ora è vuoto e lo riempiremo nel corso del codelab.

receiver.js

Questo script gestirà tutta la logica della nostra app ricevitore. Al momento è solo un file vuoto, ma nella sezione successiva lo trasformeremo in un ricevitore Cast completamente funzionante con poche righe di codice.

7. Un ricevitore di trasmissione di base

Un ricevitore Cast di base inizializzerà la sessione di Cast all'avvio. Questo è necessario per comunicare a tutte le applicazioni mittenti connesse che l'apertura del destinatario è andata a buon fine. Inoltre, il nuovo SDK è preconfigurato per gestire i contenuti multimediali in streaming con bitrate adattivo (utilizzando DASH, HLS e Smooth Streaming) e i semplici file MP4. Proviamo.

Inizializzazione

Aggiungi il seguente codice a index.html nell'intestazione:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

Aggiungi il seguente codice a index.html <body> prima del caricamento di <footer> receiver.js, per fornire all'SDK del ricevitore lo spazio per visualizzare l'interfaccia utente del ricevitore predefinita fornita con lo script che hai appena aggiunto.

<cast-media-player></cast-media-player>

Ora dobbiamo inizializzare l'SDK in js/receiver.js, che include:

acquisizione di un riferimento a CastReceiverContext, il punto di accesso principale all'intero SDK del ricevitore
memorizzando un riferimento a PlayerManager, l'oggetto che gestisce la riproduzione e ti fornisce tutti gli hook necessari per inserire la tua logica personalizzata
inizializzando l'SDK chiamando start() su CastReceiverContext

Aggiungi quanto segue a js/receiver.js.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. Trasmettere contenuti video "di base"

Ai fini di questo codelab, utilizza lo strumento CaC per provare il tuo nuovo ricevitore.

Punta il browser web sullo strumento di comando e controllo (CaC).

Immagine della scheda "Cast Connect & Logger Controls" dello strumento Command and Control (CaC)

Assicurati di sostituire il tuo ID app registrato in precedenza nel campo e fai clic su "Imposta ID app". In questo modo, lo strumento utilizza il ricevitore all'avvio della sessione di trasmissione.

Trasmettere contenuti multimediali

A livello generale, per riprodurre contenuti multimediali su un dispositivo di trasmissione deve verificarsi quanto segue:

Il mittente crea un oggetto MediaInfo JSON dall'SDK Cast che modella un elemento multimediale.
Il mittente si connette al dispositivo di trasmissione per avviare l'applicazione ricevitore.
Il destinatario carica l'oggetto MediaInfo tramite una richiesta LOAD per riprodurre i contenuti.
Il ricevitore monitora e tiene traccia dello stato dei contenuti multimediali.
Il mittente invia comandi di riproduzione al destinatario per controllare la riproduzione in base alle interazioni dell'utente con l'app mittente.

In questo primo tentativo di base, inseriremo in MediaInfo l'URL di un asset riproducibile (memorizzato in MediaInfo.contentUrl).

Un mittente reale utilizza un identificatore di contenuti multimediali specifico dell'applicazione in MediaInfo.contentId. Il ricevitore utilizza contentId come identificatore per effettuare chiamate API di backend appropriate per risolvere l'URL della risorsa effettivo e impostarlo su MediaInfo.contentUrl.. Il ricevitore gestirà anche attività come l'acquisizione della licenza DRM o l'inserimento di informazioni sulle interruzioni pubblicitarie.

Nella prossima sezione, estenderemo il ricevitore per fare qualcosa di simile. Per il momento, fai clic sull'icona Trasmetti e seleziona il tuo dispositivo per aprire il ricevitore.

Immagine della scheda "Controlli di trasmissione, connessione e logging" dello strumento Command and Control (CaC) che indica che è connesso a un'app ricevitore

Vai alla scheda "Carica contenuti multimediali" e fai clic sul pulsante "Carica per contenuti". Il ricevitore dovrebbe iniziare a riprodurre i contenuti di esempio.

Immagine della scheda "Carica contenuti multimediali" dello strumento di comando e controllo

Pertanto, l'SDK Receiver gestisce:

Inizializzazione della sessione di trasmissione
Gestisci le richieste LOAD in arrivo dai mittenti che contengono asset riproducibili
Fornisci una UI di base del player pronta per essere visualizzata sul grande schermo.

Prima di passare alla sezione successiva, in cui estenderemo il nostro ricevitore per comunicare con una semplice API di esempio per soddisfare le richieste LOAD in arrivo dai mittenti, esplora lo strumento CaC e il relativo codice.

9. Integrare un'API esterna

In linea con il modo in cui la maggior parte degli sviluppatori interagisce con i propri ricevitori Cast nelle applicazioni reali, modificheremo il nostro ricevitore per gestire le richieste LOAD che fanno riferimento ai contenuti multimediali previsti tramite la chiave API anziché inviare un URL di asset riproducibile.

In genere, le applicazioni lo fanno perché:

Il mittente potrebbe non conoscere l'URL dei contenuti.
L'applicazione Cast è progettata per gestire l'autenticazione, altre logiche di business o chiamate API direttamente sul ricevitore.

Questa funzionalità è implementata principalmente nel metodo PlayerManager setMessageInterceptor(). In questo modo, puoi intercettare i messaggi in arrivo per tipo e modificarli prima che raggiungano il gestore di messaggi interno dell'SDK. In questa sezione ci occupiamo delle richieste LOAD, per le quali eseguiremo le seguenti operazioni:

Leggi la richiesta LOAD in arrivo e il relativo contentId personalizzato.
Esegui una chiamata GET alla nostra API per cercare l'asset riproducibile in streaming in base al suo contentId.
Modifica la richiesta LOAD con l'URL dello stream.
Modifica l'oggetto MediaInformation per impostare i parametri del tipo di stream.
Passa la richiesta all'SDK per la riproduzione o rifiuta il comando se non siamo in grado di cercare i contenuti multimediali richiesti.

L'API di esempio fornita mostra gli hook dell'SDK per personalizzare le attività comuni del ricevitore, pur continuando a fare affidamento su un'esperienza per lo più pronta all'uso.

API di esempio

Punta il browser su https://storage.googleapis.com/cpe-sample-media/content.json e dai un'occhiata al nostro catalogo di video di esempio. I contenuti includono URL per le immagini delle locandine in formato PNG, nonché stream DASH e HLS. Gli stream DASH e HLS puntano a sorgenti video e audio demuxate archiviate in contenitori MP4 frammentati.

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

Nel passaggio successivo, mapperemo la chiave di ogni voce (ad esempio bbb, fbb_ad) all'URL dello stream dopo che il ricevitore viene chiamato con una richiesta LOAD.

Intercetta la richiesta LOAD

In questo passaggio creeremo un intercettatore di caricamento con una funzione che effettua una richiesta XHR al file JSON ospitato. Una volta ottenuto il file JSON, analizzeremo i contenuti e imposteremo i metadati. Nelle sezioni seguenti personalizzeremo i parametri MediaInformation per specificare il tipo di contenuti.

Aggiungi il seguente codice al file js/receiver.js, appena prima della chiamata a context.start().

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

La sezione successiva descrive come configurare la proprietà media della richiesta di caricamento per i contenuti DASH.

Utilizzo dell'API di esempio per i contenuti DASH

Ora che abbiamo preparato l'intercettatore di caricamento, specificheremo il tipo di contenuti al destinatario. Queste informazioni forniranno al destinatario l'URL della playlist principale e il tipo MIME dello stream. Aggiungi il seguente codice al file js/receiver.js nell'intercettore LOAD di Promise():

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

Una volta completato questo passaggio, puoi passare a Test per provare il caricamento con i contenuti DASH. Se vuoi testare il caricamento con contenuti HLS, vai al passaggio successivo.

Utilizzo dei contenuti HLS dell'API di esempio

L'API di esempio include contenuti HLS e DASH. Oltre a impostare contentType come nel passaggio precedente, la richiesta di caricamento avrà bisogno di alcune proprietà aggiuntive per utilizzare gli URL HLS dell'API di esempio. Quando il ricevitore è configurato per riprodurre stream HLS, il tipo di contenitore predefinito previsto è lo stream di trasporto (TS). Di conseguenza, il destinatario tenterà di aprire i flussi MP4 di esempio in formato TS se viene modificata solo la proprietà contentUrl. Nella richiesta di caricamento, l'oggetto MediaInformation deve essere modificato con proprietà aggiuntive in modo che il destinatario sappia che i contenuti sono di tipo MP4 e non TS. Aggiungi il seguente codice al file js/receiver.js nell'intercettatore di caricamento per modificare le proprietà contentUrl e contentType. Aggiungi anche le proprietà HlsSegmentFormat e HlsVideoSegmentFormat.

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

Prova

Apri di nuovo lo strumento di comando e controllo (CaC) e imposta l'ID app sull'ID app del destinatario. Seleziona il tuo dispositivo utilizzando il pulsante Trasmetti.

Vai alla scheda "Carica contenuti multimediali". Questa volta elimina il testo nel campo "URL contenuti" accanto al pulsante "Carica per contenuti", in modo che la nostra applicazione invii una richiesta LOAD contenente solo il riferimento contentId ai nostri contenuti multimediali.

Immagine della scheda "Carica contenuti multimediali" dello strumento di comando e controllo

Supponendo che tutto abbia funzionato correttamente con le modifiche apportate al ricevitore, l'intercettatore dovrebbe occuparsi di trasformare l'oggetto MediaInfo in qualcosa che l'SDK può riprodurre sullo schermo.

Fai clic sul pulsante "Carica per contenuti" per verificare se i contenuti multimediali vengono riprodotti correttamente. Puoi modificare l'ID contenuto con un altro ID nel file content.json.

10. Ottimizzazione per gli smart display

Gli smart display sono dispositivi con funzionalità touch che consentono alle applicazioni ricevitore di supportare i controlli abilitati al tocco.

Questa sezione spiega come ottimizzare l'applicazione ricevitore quando viene avviata sugli smart display e come personalizzare i controlli del player.

Accesso ai controlli dell'interfaccia utente

È possibile accedere all'oggetto UI Controls per gli smart display utilizzando cast.framework.ui.Controls.GetInstance(). Aggiungi il codice seguente al file js/receiver.js sopra context.start():

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

Se non utilizzi l'elemento <cast-media-player>, dovrai impostare touchScreenOptimizedApp in CastReceiverOptions. In questo codelab utilizziamo l'elemento <cast-media-player>.

context.start({ touchScreenOptimizedApp: true });

I pulsanti di controllo predefiniti vengono assegnati a ogni slot in base a MetadataType e MediaStatus.supportedMediaCommands.

Controlli video

Per MetadataType.MOVIE, MetadataType.TV_SHOW e MetadataType.GENERIC, l'oggetto Controlli UI per gli smart display verrà visualizzato come nell'esempio seguente.

Immagine di un video in riproduzione con i controlli della UI sovrapposti

--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

Controlli audio

Per MetadataType.MUSIC_TRACK, l'oggetto UI Controls per gli smart display verrà visualizzato come segue:

Immagine della musica in riproduzione con i controlli della UI sovrapposti

--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Aggiornamento dei comandi multimediali supportati

L'oggetto Controlli UI determina anche se un ControlsButton viene mostrato o meno in base a MediaStatus.supportedMediaCommands.

Quando il valore di supportedMediaCommands è uguale a ALL_BASIC_MEDIA, il layout dei controlli predefinito viene visualizzato come segue:

Immagine dei controlli del lettore multimediale: barra di avanzamento, pulsante "Riproduci", pulsanti "Salta avanti" e "Salta indietro" attivati

Quando il valore di supportedMediaCommands è uguale a ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, il layout dei controlli predefinito viene visualizzato come segue:

Immagine dei controlli del media player: barra di avanzamento, pulsante "Riproduci", pulsanti "Salta avanti" e "Salta indietro" e pulsanti "Coda precedente" e "Coda successiva" attivati

Quando il valore di supportedMediaCommands è uguale a PAUSE | QUEUE_PREV | QUEUE_NEXT, il layout di controllo predefinito viene visualizzato come segue:

Immagine dei controlli del media player: barra di avanzamento, pulsante "Riproduci" e pulsanti "Coda precedente" e "Coda successiva" attivati

Quando sono disponibili tracce di testo, il pulsante dei sottotitoli codificati viene sempre visualizzato in SLOT_1.

Immagine dei controlli del media player: barra di avanzamento, pulsante "Riproduci", pulsanti "Avanti" e "Indietro", pulsanti "Coda precedente" e "Coda successiva" e pulsanti "Sottotitoli codificati" attivati

Per modificare dinamicamente il valore di supportedMediaCommands dopo aver avviato un contesto del destinatario, puoi chiamare PlayerManager.setSupportedMediaCommands per sostituire il valore. Inoltre, puoi aggiungere un nuovo comando utilizzando addSupportedMediaCommands o rimuovere un comando esistente utilizzando removeSupportedMediaCommands.

Personalizzare i pulsanti di controllo

Puoi personalizzare i controlli utilizzando PlayerDataBinder. Aggiungi il seguente codice al file js/receiver.js sotto i controlli touch per impostare il primo slot dei controlli:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. Implementazione della navigazione nei contenuti multimediali sugli smart display

Sfoglia contenuti multimediali è una funzionalità del ricevitore CAF che consente agli utenti di esplorare contenuti aggiuntivi sui dispositivi touch. Per implementare questa funzionalità, utilizzerai PlayerDataBinder per impostare la UI BrowseContent. Puoi quindi compilarlo con BrowseItems in base ai contenuti che vuoi visualizzare.

BrowseContent

Di seguito è riportato un esempio dell'interfaccia utente BrowseContent e delle relative proprietà:

Immagine dell'interfaccia utente di BrowseContent che mostra due miniature di video e una parte di una terza

BrowseContent.title
BrowseContent.items

Proporzioni

Utilizza targetAspectRatio property per selezionare le proporzioni migliori per gli asset immagine. L'SDK CAF Receiver supporta tre formati: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

BrowseItem

Utilizza BrowseItem per visualizzare titolo, sottotitolo, durata e immagine per ogni elemento:

Immagine dell'interfaccia utente di BrowseContent che mostra due miniature di video e una parte di una terza

BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle

Impostare i dati di navigazione dei contenuti multimediali

Puoi fornire un elenco di contenuti multimediali da sfogliare chiamando il numero setBrowseContent. Aggiungi il seguente codice al file js/receiver.js sotto playerDataBinder e nel listener di eventi MEDIA_CHANGED per impostare gli elementi di navigazione con il titolo "In programma".

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

Se fai clic su un elemento di navigazione multimediale, viene attivato l'intercettore LOAD. Aggiungi il seguente codice all'intercettore LOAD per mappare request.media.contentId a request.media.entity dall'elemento di navigazione multimediale:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

Puoi anche impostare l'oggetto BrowseContent su null per rimuovere l'interfaccia utente di esplorazione dei contenuti multimediali.

12. Debug delle app ricevitore

L'SDK Cast Receiver offre un'altra opzione per gli sviluppatori per eseguire facilmente il debug delle app ricevitore utilizzando l'API CastDebugLogger e uno strumento di comando e controllo (CaC) complementare per acquisire i log.

Inizializzazione

Per incorporare l'API, aggiungi lo script di origine CastDebugLogger nel file index.html. L'origine deve essere dichiarata nel tag <head> dopo la dichiarazione dell'SDK Cast Receiver.

<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, aggiungi il seguente codice per recuperare l'istanza CastDebugLogger e attivare il logger:

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 è attivato, sul ricevitore viene visualizzato un overlay con DEBUG MODE.

Immagine di un video in riproduzione con il messaggio "DEBUG MODE" (MODALITÀ DEBUG) su sfondo rosso nell'angolo in alto a sinistra del frame

Registra eventi giocatore

Utilizzando CastDebugLogger puoi registrare facilmente gli eventi del giocatore attivati dall'SDK CAF Receiver e utilizzare diversi livelli di registrazione per registrare i dati degli eventi. La configurazione loggerLevelByEvents utilizza cast.framework.events.EventType e cast.framework.events.category per specificare gli eventi che verranno registrati.

Aggiungi il seguente codice sotto la dichiarazione castDebugLogger per registrare quando viene attivato un evento CORE del player o viene trasmessa una modifica mediaStatus:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// 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);
  }
});

// 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. Sono disponibili i seguenti metodi di registrazione, elencati in ordine di priorità decrescente:

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 è un tag personalizzato. Può essere qualsiasi stringa identificativa che ritieni significativa. CastDebugLogger utilizza i tag per filtrare i log. L'utilizzo dei tag è spiegato in dettaglio più avanti. Il secondo parametro è il messaggio di log.

Per visualizzare i log in azione, aggiungili all'intercettore LOAD.

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

Puoi controllare quali messaggi vengono visualizzati nell'overlay di debug impostando il livello di log in loggerLevelByTags per ogni tag personalizzato. Ad esempio, se abiliti un tag personalizzato con il livello di log cast.framework.LoggerLevel.DEBUG, verranno visualizzati tutti i messaggi aggiunti con i messaggi di log di errore, avviso, informazioni e debug. L'attivazione di un tag personalizzato con livello WARNING mostrerà solo i messaggi di log di errore e avviso.

La configurazione loggerLevelByTags è facoltativa. Se un tag personalizzato non è configurato per il livello del logger, tutti i messaggi di log verranno visualizzati nell'overlay di debug.

Aggiungi il seguente codice sotto il logger di eventi CORE:

// 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
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

Overlay di debug

Cast Debug Logger fornisce un overlay di debug sul ricevitore per visualizzare i messaggi di log personalizzati sul dispositivo di trasmissione. Utilizza showDebugLogs per attivare/disattivare l'overlay di debug e clearDebugLogs per cancellare i messaggi di log nell'overlay.

Aggiungi il seguente codice per visualizzare l'overlay di debug sul ricevitore.

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

Immagine che mostra l'overlay di debug, un elenco di messaggi del log di debug su uno sfondo traslucido sopra un fotogramma video

13. Complimenti

Ora sai come creare un'applicazione ricevitore web personalizzata utilizzando l'SDK Cast Web Receiver.

Per maggiori dettagli, consulta la guida per gli sviluppatori di Web Receiver.

Crea un ricevitore web personalizzato Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

1. Panoramica

Che cos'è Google Cast?

Cosa realizzeremo

Obiettivi didattici

Che cosa ti serve

Esperienza

Come utilizzerai questo tutorial?

Come valuti la tua esperienza di creazione di app web?

Come valuteresti la tua esperienza di visione della TV?

2. recupera il codice campione

3. Deployment del ricevitore in locale

Esegui il server

4. Registrare un'applicazione in Cast Developer Console

5. Esegui l'app di esempio

6. Prepara il progetto iniziale

Progettazione di app

index.html

receiver.js

7. Un ricevitore di trasmissione di base

Inizializzazione

8. Trasmettere contenuti video "di base"

Trasmettere contenuti multimediali

9. Integrare un'API esterna

API di esempio

Intercetta la richiesta LOAD

Utilizzo dell'API di esempio per i contenuti DASH

Utilizzo dei contenuti HLS dell'API di esempio

Prova

10. Ottimizzazione per gli smart display

Accesso ai controlli dell'interfaccia utente

Controlli video

Controlli audio

Aggiornamento dei comandi multimediali supportati

Personalizzare i pulsanti di controllo

11. Implementazione della navigazione nei contenuti multimediali sugli smart display

BrowseContent

Proporzioni

BrowseItem

Impostare i dati di navigazione dei contenuti multimediali

12. Debug delle app ricevitore

Inizializzazione

Registra eventi giocatore

Messaggi di log e tag personalizzati

Overlay di debug

13. Complimenti

Crea un ricevitore web personalizzato