Crea un ricevitore web personalizzato

1. Panoramica

Questo codelab ti insegnerà a creare un'app personalizzata per il ricevitore web per riprodurre i contenuti sui dispositivi compatibili con Google Cast.

Che cos'è Google Cast?

Google Cast consente agli utenti di trasmettere contenuti da un dispositivo mobile alla TV. Gli utenti possono quindi utilizzare il browser Chrome per dispositivi mobili o desktop come telecomando per la riproduzione di contenuti multimediali sulla TV.

L'SDK di Google Cast consente alla tua app di controllare i dispositivi Google Cast abilitati (ad esempio, una TV o un sistema audio). L'SDK Cast ti fornisce i componenti necessari dell'interfaccia utente in base all'elenco di controllo di Google Cast Design.

Viene fornito l'elenco di controllo della progettazione di Google Cast, che rende l'esperienza utente semplice e prevedibile su tutte le piattaforme supportate. Scopri di più qui.

Cosa realizzeremo?

Una volta completato il codelab, avrai un'app HTML5 che funge da destinatario personalizzato ed è in grado di mostrare contenuti video sui dispositivi compatibili con Google Cast.

Obiettivi didattici

• Come eseguire la configurazione per lo sviluppo del ricevitore.
• Nozioni di base su un ricevitore compatibile con Google Cast in base al framework delle applicazioni di trasmissione.
• Come ricevere un video trasmesso.
• Come integrare il logger di debug.
• Come ottimizzare il ricevitore per gli smart display.

Che cosa ti serve

• Il browser Google Chrome più recente.
• 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 una conoscenza pregressa dello sviluppo web.
• Devi anche saper saper guardare la TV :)

2. Recupera il codice campione

Puoi scaricare tutto il codice campione sul computer...

file_downloadScarica origine

e decomprimi il file ZIP scaricato.

3. Deployment del ricevitore in locale

Per poter utilizzare il ricevitore web con un dispositivo di trasmissione, deve essere ospitato in un punto a cui può essere collegato. Se hai già a disposizione un server che supporta https, ignora le seguenti istruzioni e prendi nota dell'URL, poiché ti servirà nella sezione successiva.

Se non disponi di un server disponibile, puoi utilizzare Firebase Hosting o ngrok.

Esegui il server

Dopo aver configurato il servizio che preferisci, vai su app-start e avvia il server.

Prendi nota dell'URL per il ricevitore ospitato. Lo utilizzerai nella sezione successiva.

4. Registra un'applicazione in Google Play Console

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

Fai clic su "Aggiungi nuova applicazione".

Seleziona "Ricevitore personalizzato". Ecco cosa stiamo creando.

Inserisci i dettagli del tuo nuovo ricevitore, assicurati di utilizzare l'URL con cui hai ricevuto

nell'ultima sezione. Annota l'ID applicazione assegnato al nuovo ricevitore.

Devi inoltre registrare il dispositivo Google Cast in modo che possa accedere all'applicazione di ricezione prima della pubblicazione. Dopo aver pubblicato la tua applicazione di ricezione, questa sarà disponibile per tutti i dispositivi Google Cast. Ai fini di questo codelab, consigliamo di utilizzare un'applicazione di ricezione non pubblicata.

Fai clic su "Aggiungi nuovo dispositivo".

Inserisci il numero di serie stampato sul retro del tuo dispositivo di trasmissione e assegnagli un nome descrittivo. Puoi trovare il tuo numero di serie anche trasmettendo il tuo schermo in Chrome quando accedi a Google Cast SDK Developer Console

Servono 5-15 minuti prima che il ricevitore e il dispositivo siano pronti per il test. Dopo avere atteso 5-15 minuti, devi riavviare il dispositivo di trasmissione.

5. Esegui l'app di esempio

Mentre attendiamo che la nostra nuova applicazione di ricezione sia pronta per i test, vediamo come appare un'app di ricezione completa di esempio. Il ricevitore che creeremo sarà in grado di riprodurre contenuti multimediali utilizzando lo streaming con velocità in bit adattiva (utilizziamo 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 l'ID ricevitore di esempio "CC1AD845" predefinito e fai clic sul pulsante "Imposta ID app".
3. Fai clic sul pulsante Trasmetti in alto a sinistra e seleziona il dispositivo Google Cast.

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

5. Fai clic sul pulsante "Carica per contenuto" per guardare un video di esempio.
6. La riproduzione del video inizierà sul tuo dispositivo Google Cast per mostrare le funzionalità di base del ricevitore usando il ricevitore predefinito.

6. Prepara il progetto di avvio

Dobbiamo aggiungere il supporto per Google Cast all'app di download che hai scaricato. Ecco una terminologia di Google Cast che utilizzeremo in questo codelab:

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

Ora è tutto pronto per creare il tuo progetto iniziale utilizzando l'editor di testo che preferisci:

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

Nota: mentre lavori al codelab, http-server dovrebbe essere in fase di ritiro delle modifiche che apporti. In caso contrario, prova a terminare il http-server e riavviarlo.

Progettazione di app

L'app del ricevitore inizializza la sessione di trasmissione e resta in piedi 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 un file JavaScript chiamato js/receiver.js, che contiene tutta la logica per far funzionare il ricevitore.

index.html

Questo file HTML conterrà l'interfaccia utente della nostra app di ricezione. Per il momento è vuota e la aggiungeremo in tutto il lab del codice.

ricevitore.js

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

7. Un ricevitore di base Cast

Un ricevitore di trasmissione di base inizializza la sessione di trasmissione all'avvio. Questo è necessario per comunicare a tutte le applicazioni di mittenti connessi che la visualizzazione del destinatario è riuscita. Inoltre, il nuovo SDK è preconfigurato per gestire immediatamente i file multimediali in streaming con velocità in bit adattiva (utilizzando DASH, HLS e Smooth Streaming) e i file MP4 semplici. 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 codice seguente a index.html <body> prima di receiver.js, per caricare <footer> in modo che l'SDK del ricevitore abbia spazio per visualizzare l'UI predefinita del destinatario, che esegue la spedizione con lo script appena aggiunto.

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

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

• l'acquisizione di un riferimento a CastReceiverContext, il punto di accesso principale all'intero SDK Ricevitore
• memorizzando un riferimento a PlayerManager, l'oggetto che gestisce la riproduzione e fornendoti tutti gli hook necessari per collegare la tua logica personalizzata
• inizializza l'SDK chiamando start() il giorno 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 allo strumento Command and Control (CaC).

Assicurati di sostituire il tuo ID app come registrato in precedenza nel campo e fai clic su "Imposta ID app". In questo modo indichi allo strumento di utilizzare il ricevitore quando avvii la sessione di trasmissione.

Trasmissione di contenuti multimediali

A livello generale, per 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 di ricezione.
3. Il destinatario carica l'oggetto MediaInfo tramite una richiesta LOAD per riprodurre i contenuti.
4. Il ricevitore monitora e monitora lo stato dei contenuti multimediali.
5. Il mittente invia comandi di riproduzione al ricevitore per controllare la riproduzione in base alle interazioni degli utenti con l'app del mittente.

In questo primo tentativo di base completeremo MediaInfo con un URL di asset riproducibile (archiviato in MediaInfo.contentUrl).

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

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

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

L'SDK del ricevitore è pronto all'uso:

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

Esplora lo strumento CaC e il relativo codice prima di passare alla sezione successiva, in cui estenderemo il ricevitore per parlare con una semplice API di esempio per soddisfare le richieste LOAD provenienti dai mittenti.

9. Integrazione con un'API esterna

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

In genere, le applicazioni eseguono queste operazioni perché:

• Il mittente potrebbe non conoscere l'URL dei contenuti.
• L'applicazione di trasmissione è progettata per gestire l'autenticazione, altre chiamate aziendali e le 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 dei messaggi interni dell'SDK. In questa sezione, ci occuperemo delle richieste LOAD in cui eseguiremo le seguenti operazioni:

• Leggi la richiesta LOAD in arrivo e il relativo contentId personalizzato.
• Effettua una chiamata GET alla nostra API per cercare l'asset in streaming entro la data 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 oppure 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 la personalizzazione delle attività comuni dei destinatari, pur facendo affidamento su un'esperienza per la prima volta disponibile.

API di esempio

Punta il browser a https://storage.googleapis.com/cpe-sample-media/content.json e dai un'occhiata al nostro catalogo video di esempio. I contenuti includono gli URL delle immagini poster in formato PNG e gli stream DASH e HLS. Gli stream DASH e HLS indirizzano a sorgenti video e audio demux archiviate in container 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 una intercettazione 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 codice seguente al tuo file js/receiver.js, appena 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);
          }
        });
      });
    });

Nella sezione successiva verrà descritto 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 al destinatario. Queste informazioni forniranno al destinatario l'URL della playlist principale e il tipo MIME dello stream. Aggiungi il codice seguente al file js/recipientr.js nell'Promise() dell'intercettatrice 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 l'esperimento per provare a caricarlo con i contenuti DASH. Se 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 i 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 di esempio dell'API. Quando il destinatario è configurato per riprodurre gli stream HLS, il tipo di contenitore predefinito è quello di trasporto (TS). Di conseguenza, il destinatario 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 il contenuto è di tipo MP4 e non TS. Aggiungi il codice seguente al file js/recipient.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;
            ...
          }
        });
      });
    });

Fai una prova

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

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

Presupponendo che tutto funzioni correttamente con il ricevitore, l'intercettatore dovrebbe curare di modellare l'oggetto MediaInfo in un elemento che l'SDK può riprodurre sullo schermo.

Fai clic sul pulsante "Carica per contenuto" per verificare se i contenuti multimediali vengono riprodotti correttamente. Puoi cambiare l'ID contenuti in 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 al tocco.

Questa sezione spiega come ottimizzare l'applicazione di ricezione quando lanci sugli smart display, nonché come personalizzare i controlli del player.

Accesso ai controlli dell'interfaccia utente

È possibile accedere all'oggetto Controlli UI per 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 utilizzi l'elemento <cast-media-player>, dovrai impostare touchScreenOptimizedApp in CastReceiverOptions. In questo codelab utilizziamo l'elemento <cast-media-player>.

context.start({ touchScreenOptimizedApp: true });

A ogni slot vengono assegnati pulsanti di controllo predefiniti in base alle MetadataType e al MediaStatus.supportedMediaCommands.

Controlli video

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

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 dell'interfaccia utente 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 un ControlsButton viene visualizzato o meno in base a MediaStatus.supportedMediaCommands.

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

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

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

Quando sono disponibili tracce di testo, il pulsante dei sottotitoli codificati sarà sempre visualizzato all'indirizzo SLOT_1.

Per modificare in modo dinamico il valore di supportedMediaCommands dopo aver avviato un contesto destinatario, puoi chiamare PlayerManager.setSupportedMediaCommands per eseguire l'override del valore. Inoltre, puoi aggiungere un nuovo comando usando addSupportedMediaCommands o rimuovere un comando esistente utilizzando removeSupportedMediaCommands.

Personalizzazione dei pulsanti di controllo

Puoi personalizzare i controlli usando PlayerDataBinder. Aggiungi il seguente codice al file js/receiver.js sotto i controlli touch per impostare la prima area 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 multimediale sugli smart display

La navigazione multimediale è una funzionalità del ricevitore CAF che consente agli utenti di esplorare contenuti aggiuntivi sui dispositivi touch. Per implementarlo, utilizzerai PlayerDataBinder per impostare l'UI di BrowseContent. Puoi poi completarlo con BrowseItems in base ai contenuti che vuoi visualizzare.

Sfoglia i contenuti

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

1. BrowseContent.title
2. BrowseContent.items

Formato

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

Sfoglia elemento

Utilizza 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 Sfoglia contenuti multimediali

Puoi fornire un elenco di contenuti multimediali da consultare chiamando setBrowseContent. Aggiungi il seguente codice al file js/receiver.js sotto il playerDataBinder e nel listener di eventi MEDIA_CHANGED per impostare gli elementi di consultazione 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 consultazione dei contenuti multimediali, l'intercettazione della LOAD viene attivata. Aggiungi il seguente codice all'intercettatore LOAD per mappare il 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'UI di Sfoglia contenuti multimediali.

12. Debug delle app del ricevitore

L'SDK Cast Receiver offre agli sviluppatori un'altra opzione per eseguire facilmente il debug delle app del destinatario utilizzando l'API CastDebugLogger e uno strumento Command and Control (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 del ricevitore di trasmissione.

<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 questo codice 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);
  }
});

Quando il logger di debug è attivato, sul ricevitore verrà visualizzato un overlay che mostra DEBUG MODE.

Eventi del log player

Con CastDebugLogger puoi registrare facilmente gli eventi del player che vengono attivati dall'SDK del ricevitore CAF e utilizzare diversi livelli di log per registrare i dati degli eventi. La configurazione di 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 l'attivazione di un evento del player CORE o quando viene trasmessa una modifica di 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 visualizzati nell'overlay di debug del ricevitore con colori diversi. Sono disponibili i seguenti metodi di log, ordinati dalla priorità 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ò trattarsi di una qualsiasi stringa di identificazione che ritieni significativa. CastDebugLogger utilizza i tag per filtrare i log. L'utilizzo dei tag è spiegato dettagliatamente di seguito. Il secondo parametro è il messaggio di log.

Per mostrare i log in azione, aggiungi i log all'intercettatore 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 mostrare 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 mostrerà tutti i messaggi aggiunti con un messaggio di errore, avviso, informazioni e debug. Se abiliti un tag personalizzato con livello WARNING, verranno visualizzati solo gli errori e gli avvisi relativi ai messaggi di log.

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

Aggiungi il seguente codice sotto il logger 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

Il logger di debug Cast fornisce un overlay di debug sul ricevitore per visualizzare i tuoi 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 sull'overlay.

Aggiungi il codice seguente 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. Congratulazioni

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

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