Crea un ricevitore web personalizzato

1. Panoramica

Questo codelab ti insegnerà a creare un'app di ricezione web personalizzata per riprodurre contenuti su dispositivi compatibili con Google Cast.

Che cos'è Google Cast?

Google Cast consente agli utenti di trasmettere contenuti da un dispositivo mobile a una TV. Gli utenti potranno quindi utilizzare il proprio dispositivo mobile o browser Chrome desktop come telecomando per riprodurre 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 impianto audio). L'SDK Cast fornisce i componenti dell'interfaccia utente necessari in base all'elenco di controllo per la progettazione di Google Cast.

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

Cosa realizzeremo?

Al termine del codelab, avrai a disposizione un'app HTML5 che funge da ricevitore personalizzato in grado di visualizzare contenuti video su dispositivi compatibili con Google Cast.

Obiettivi didattici

• Come prepararsi per lo sviluppo del ricevitore.
• Nozioni di base su un ricevitore compatibile con Google Cast in base alla struttura dell'applicazione Cast.
• Come ricevere un video trasmesso.
• Come integrare Debug Logger.
• Come ottimizzare il ricevitore per gli smart display

Che cosa ti serve

• 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

• Devi avere conoscenze pregresse nello sviluppo web.
• Ti servirà anche una conoscenza pregressa dell'esperienza TV. :)

Hai problemi di rete?

Se ti trovi in una località in cui la rete Wi-Fi non è affidabile, Chromecast può essere collegato con un cavo utilizzando un adattatore Ethernet per Chromecast o per Chromecast con Google TV.

Documentazione relativa a Google Cast?

Disponiamo di un'ampia documentazione per i mittenti di destinatari, iOS, Android e Chrome.

Come utilizzerai questo tutorial?

Solo lettura Leggilo e completa gli esercizi

Come valuteresti la tua esperienza nello sviluppo di app web?

Principiante Livello intermedio Eccellente

Come giudichi la tua esperienza con la visione della TV?

Principiante Livello intermedio Eccellente

2. recupera il codice campione

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

Origine del download

e decomprimi il file ZIP scaricato.

Il repository codelab del ricevente contiene due progetti di esempio:

• app-start: il codice iniziale che creerai in questo codelab.
• app-done: il codice completo per l'app video di esempio completata.

3. Deployment del ricevitore in locale

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

Se non disponi di un server disponibile per l'uso, puoi utilizzare Firebase Hosting o ngrok.

Esegui il server

Dopo aver configurato il servizio che preferisci, accedi a app-start e avvia il server.

Prendi nota dell'URL del ricevitore ospitato. Lo utilizzerai nella prossima sezione.

4. Registrare un'applicazione in Cast Console per gli sviluppatori

Non hai un account sviluppatore Google Cast?

Crea un account nella Console per gli sviluppatori dell'SDK Google Cast e paga la quota di registrazione.

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

Fai clic su "Aggiungi nuova applicazione"

Seleziona "Ricevitore personalizzato", ecco cosa stiamo creando.

Inserisci i dettagli del nuovo destinatario, assicurati di utilizzare l'URL con cui sei arrivato

nell'ultima sezione. Prendi nota dell'ID applicazione assegnato al nuovo destinatario.

Devi anche registrare il 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, è consigliabile lavorare con un'applicazione di ricezione non pubblicata.

Fai clic su "Aggiungi nuovo dispositivo"

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 alla Console per gli sviluppatori dell'SDK Google Cast

Occorrono 5-15 minuti prima che il ricevitore e il dispositivo siano pronti per la prova. Dopo aver atteso 5-15 minuti, devi riavviare il dispositivo di trasmissione.

5. Esegui l'app di esempio

Mentre attendiamo che la nostra nuova applicazione ricevitore sia pronta per il test, vediamo che aspetto ha un'app ricevitore completata. Il ricevitore che creeremo sarà in grado di riprodurre contenuti multimediali utilizzando lo streaming con velocità in bit adattiva (utilizzeremo contenuti di esempio codificati per Dynamic Adaptive Streaming over HTTP (DASH).

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

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

4. Vai alla sezione "Carica contenuti multimediali". in alto.

5. Fai clic sul pulsante "Carica per contenuto" per riprodurre un video di esempio.
6. Il video verrà riprodotto sul tuo dispositivo Google Cast per mostrare come funziona il ricevitore di base con il ricevitore predefinito.

6. Prepara il progetto iniziale

Dobbiamo aggiungere il supporto per Google Cast all'app iniziale che hai scaricato. Di seguito sono riportati alcuni termini utilizzati in Google Cast in questo codelab:

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

Ora è tutto pronto per basarti sul progetto di partenza utilizzando il tuo editor di testo preferito:

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

Tieni presente che, mentre lavori a questo codelab, http-server dovrebbe rilevare le modifiche che apporti. Se non si verifica, prova ad terminare e a riavviare http-server.

Design dell'app

L'app ricevente inizializza la sessione di trasmissione e resterà in modalità standby finché non arriva una richiesta LOAD (in altre parole il comando per riprodurre un contenuto multimediale) da un mittente.

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

index.html

Questo file HTML conterrà l'interfaccia utente dell'app ricevente. Per il momento è vuoto e lo aggiungeremo nel lab del codice.

receiver.js

Questo script gestirà tutta la logica per l'app ricevitore. Per ora è solo un file vuoto, ma lo trasformeremo in un ricevitore Cast completamente funzionante con poche righe di codice nella prossima sezione.

7. Un ricevitore di trasmissione di base

Hai tutte le informazioni di cui hai bisogno?

Assicurati di avere a portata di mano il tuo ID app e l'URL esterno del ricevitore che hai creato nelle ultime sezioni. Ti serviranno per visualizzare il ricevitore sullo schermo.

Un ricevitore di trasmissione di base inizializza la sessione di trasmissione all'avvio. Questa operazione è necessaria per comunicare a tutte le applicazioni dei mittenti connesse che la visualizzazione del destinatario è riuscita. Inoltre, il nuovo SDK è preconfigurato per gestire subito dallo streaming contenuti multimediali con velocità in bit adattiva (utilizzando DASH, HLS e streaming fluido) e 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 receiver.js, <footer> per fornire all'SDK del ricevitore uno spazio per visualizzare l'interfaccia utente predefinita del destinatario che viene spedita con lo script appena aggiunto.

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

Ora dobbiamo inizializzare l'SDK in js/receiver.js, composto da:

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

Aggiungi il seguente codice a js/receiver.js.

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

context.start();

8. Trasmissione di contenuti "di base" contenuti video

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

Nel browser web, apri lo strumento Comando e controllo (CaC).

Assicurati di sostituire il tuo ID app come registrato in precedenza nel campo e fai clic su "Imposta ID app". Questo messaggio indica allo strumento di utilizzare il ricevitore all'avvio della sessione di trasmissione.

Trasmissione di contenuti multimediali

A livello generale, per poter riprodurre contenuti multimediali su un dispositivo di trasmissione, è necessario quanto segue:

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

In questo primo tentativo di base, compileremo MediaInfo con l'URL di un asset riproducibile (archiviato in MediaInfo.contentUrl).

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

Estenderemo il ricevitore in modo che faccia qualcosa di simile nella prossima sezione. Per il momento, fai clic sull'icona Trasmetti e seleziona il tuo dispositivo per aprire il ricevitore.

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

Per questo motivo, subito dopo l'acquisto, l'SDK ricevente gestisce:

• Inizializzazione della sessione di trasmissione
• Gestire le richieste LOAD in arrivo da mittenti che contengono asset riproducibili
• Fornisci un'interfaccia utente di base del player pronta per essere visualizzata sullo schermo di casa.

Puoi esplorare lo strumento CaC e il relativo codice prima di passare alla prossima sezione, in cui amplieremo il destinatario per comunicare con una semplice API di esempio per soddisfare le richieste LOAD in arrivo dai mittenti.

9. Integrazione con un'API esterna

In linea con le modalità con cui la maggior parte degli sviluppatori interagisce con i ricevitori di trasmissione nelle applicazioni reali, modificheremo il ricevitore per gestire le richieste LOAD che fanno riferimento ai contenuti multimediali previsti tramite la relativa chiave API, anziché inviare l'URL di una risorsa riproducibile.

Generalmente le applicazioni lo fanno per i seguenti motivi:

• 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 setMessageInterceptor() PlayerManager. Questo ti consente di intercettare i messaggi in arrivo per tipo e modificarli prima che raggiungano il gestore dei 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.
• Effettua una chiamata GET alla nostra API per cercare la risorsa riproducibile in streaming in base al relativo contentId.
• Modifica la richiesta LOAD con l'URL dello stream.
• Modifica l'oggetto MediaInformation per impostare i parametri del tipo di flusso.
• 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, continuando a fare affidamento su un'esperienza prevalentemente pronta all'uso.

API di esempio

Vai 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 poster in formato PNG e per gli stream sia DASH che 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 destinatario è stato chiamato con una richiesta LOAD.

Intercetta la richiesta LOAD

In questo passaggio creeremo un intercettore del carico con una funzione che invia 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, subito prima della chiamata al numero 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 prossima sezione descriverà come configurare la proprietà media della richiesta di caricamento per i contenuti DASH.

Utilizzo dei contenuti DASH dell'API di esempio

Ora che abbiamo preparato l'intercettatore del carico, specifichiamo il tipo di contenuti per il ricevitore. Queste informazioni forniscono al destinatario l'URL della playlist principale e il tipo MIME dello stream. Aggiungi il seguente codice al file js/receiver.js nel file Promise() dell'intercettatore LOAD:

...
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 procedere con il test per provare a caricare i contenuti DASH. Se invece vuoi testare il caricamento con contenuti HLS, dai un'occhiata al passaggio successivo.

Utilizzo dei contenuti HLS dell'API di esempio

L'API di esempio include contenuto HLS e DASH. Oltre a impostare contentType come nel passaggio precedente, la richiesta di caricamento richiederà alcune proprietà aggiuntive per utilizzare gli URL HLS dell'API di esempio. Quando il ricevitore è configurato per riprodurre stream HLS, il tipo di container predefinito previsto è stream di trasporto (TS). Di conseguenza, il ricevitore proverà ad aprire gli stream 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 del carico 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

Anche in questo caso, apri lo strumento Comando e controllo (CaC) e imposta il tuo ID app sull'ID app del destinatario. Seleziona il tuo dispositivo utilizzando il pulsante Trasmetti.

Vai alla sezione "Carica contenuti multimediali". . Questa volta elimina il testo all'interno dell'"URL dei contenuti" accanto a "Carica per contenuto" che costringerà la nostra applicazione a inviare una richiesta LOAD contenente solo il riferimento contentId ai nostri elementi multimediali.

Supponendo che tutto funzioni correttamente con le modifiche apportate al ricevitore, l'intercettore dovrebbe occuparsi di trasformare l'oggetto MediaInfo in qualcosa che l'SDK possa riprodurre sullo schermo.

Fai clic sul pulsante "Carica per contenuto" per controllare se i contenuti multimediali vengono riprodotti correttamente. Puoi modificare Content ID 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 del ricevitore di supportare i controlli abilitati per il tocco.

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

Questa personalizzazione utilizza l'elemento &lt;cast-media-player&gt; dell'interfaccia utente del player integrato fornito dal CAF. Se questo elemento non viene utilizzato, il monitoraggio dello stato dell'interfaccia utente, il branding e altre personalizzazioni devono essere eseguiti manualmente.

Se utilizzi un nuovo dispositivo di trasmissione compatibile con il tocco, ricordati di registrarlo nella Console per gli sviluppatori dell'SDK Cast. Puoi seguire i passaggi descritti nella sezione 3 di questo codelab come riferimento.

Accesso ai controlli UI

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

...

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

context.start();

Se non usi <cast-media-player> devi impostare touchScreenOptimizedApp in CastReceiverOptions. In questo codelab, utilizziamo <cast-media-player> .

context.start({ touchScreenOptimizedApp: true });

I pulsanti di controllo predefiniti vengono assegnati a ogni spazio 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 viene visualizzato come nell'esempio riportato di seguito.

1. --playback-logo-image
2. MediaMetadata.subtitle
3. MediaMetadata.title
4. MediaStatus.currentTime
5. MediaInformation.duration
6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
8. PLAY/PAUSE
9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
10. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

Controlli audio

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

1. --playback-logo-image
2. MusicTrackMediaMetadata.albumName
3. MusicTrackMediaMetadata.title
4. MusicTrackMediaMetadata.albumArtist
5. MusicTrackMediaMetadata.images[0]
6. MediaStatus.currentTime
7. MediaInformation.duration
8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
10. PLAY/PAUSE
11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Aggiornamento dei comandi multimediali supportati

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

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

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

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

Quando le tracce di testo sono disponibili, il pulsante dei sottotitoli codificati verrà sempre mostrato in SLOT_1.

Per modificare dinamicamente il valore di supportedMediaCommands dopo aver avviato un contesto ricevitore, puoi chiamare PlayerManager.setSupportedMediaCommands per eseguire l'override del valore. Puoi anche aggiungere un nuovo comando utilizzando addSupportedMediaCommands o rimuovere un comando esistente utilizzando removeSupportedMediaCommands.

Personalizzazione dei pulsanti di controllo

Puoi personalizzare i controlli con PlayerDataBinder. Aggiungi il seguente codice al tuo file js/receiver.js sotto i touchControl per impostare il primo spazio 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. Implementare la navigazione tra i contenuti multimediali sugli smart display

La consultazione dei contenuti multimediali è una funzionalità di ricevitore CAF che consente agli utenti di esplorare contenuti aggiuntivi sui dispositivi touch. Per implementarlo, utilizzerai PlayerDataBinder per impostare l'UI di BrowseContent. Puoi quindi completarla con BrowseItems in base ai contenuti che vuoi visualizzare.

BrowseContent

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

1. BrowseContent.title
2. BrowseContent.items

Proporzioni

Utilizza l'targetAspectRatio property per selezionare le proporzioni migliori per i tuoi asset immagine. L'SDK CAF ricevitore supporta tre proporzioni: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

BrowseItem

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

1. BrowseItem.image
2. BrowseItem.duration
3. BrowseItem.title
4. BrowseItem.subtitle

Impostare i dati di esplorazione dei contenuti multimediali

Puoi fornire un elenco di contenuti multimediali per la consultazione chiamando il numero setBrowseContent. Aggiungi il codice seguente al file js/receiver.js sotto playerDataBinder e nel listener di eventi MEDIA_CHANGED per impostare gli elementi di ricerca con il titolo "Prossimi video".

// 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 esplorazione dei contenuti multimediali, verrà attivato l'intercettatore LOAD. Aggiungi il seguente codice all'intercettatore LOAD per mappare request.media.contentId a request.media.entity dall'elemento di esplorazione dei contenuti multimediali:

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 ricevitori

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

★ Nota:

Per utilizzare l'API Cast Debug Logger, devi registrare il dispositivo di trasmissione nella Console per gli sviluppatori dell'SDK Google Cast e utilizzare una versione firmware 1.44 o successiva del dispositivo.

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

<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 codice seguente per recuperare l'istanza CastDebugLogger e abilitare 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);
  }
});

Avviso: assicurati di modificare setEnabled in false per il ricevitore di produzione.

Quando il logger di debug è attivato, sul ricevitore viene visualizzato un overlay con la dicitura DEBUG MODE.

Registra eventi player

Con CastDebugLogger puoi registrare facilmente gli eventi del player attivati dall'SDK CAF receiver e utilizzare diversi livelli di logger per registrare i dati sugli eventi. La configurazione loggerLevelByEvents utilizza cast.framework.events.EventType e cast.framework.events.category per specificare quali eventi 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 ti consente di creare messaggi di log da visualizzare con colori diversi nell'overlay di debug del ricevitore. Sono disponibili 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 è un tag personalizzato. Può essere qualsiasi stringa di identificazione che ritieni significativa. CastDebugLogger utilizza i tag per filtrare i log. L'utilizzo dei tag è spiegato più dettagliatamente di seguito. Il secondo parametro è il messaggio di log.

Per mostrare i log in azione, aggiungi i log 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, l'attivazione di un tag personalizzato con livello di log cast.framework.LoggerLevel.DEBUG consente di visualizzare tutti i messaggi aggiunti con messaggi di errore, avviso, informazioni e log di debug. L'attivazione di un tag personalizzato a livello di WARNING mostrerà solo messaggi di log di errore e avviso.

La configurazione di loggerLevelByTags è facoltativa. Se un tag personalizzato non è configurato per il relativo livello di 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 tuoi messaggi di log personalizzati sul dispositivo di trasmissione. Usa showDebugLogs per attivare/disattivare l'overlay di debug e clearDebugLogs per cancellare i messaggi di log sull'overlay.

Aggiungi il seguente codice per visualizzare l'anteprima dell'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();
  }
});

13. Complimenti

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

Per ulteriori dettagli, consulta la guida per gli sviluppatori di Web receiver.

Vuoi altre funzionalità di trasmissione?

Dai un'occhiata agli altri codelab di Cast e alle nostre app di esempio su GitHub.