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 :)
Come utilizzerai questo tutorial?
Come valuteresti la tua esperienza con la creazione di applicazioni web?
Come valuteresti la tua esperienza con la TV?
2. Recupera il codice campione
Puoi scaricare tutto il codice campione sul computer...
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).
- Dovresti vedere il nostro strumento CaC.
- Utilizza l'ID ricevitore di esempio "CC1AD845" predefinito e fai clic sul pulsante "Imposta ID app".
- Fai clic sul pulsante Trasmetti in alto a sinistra e seleziona il dispositivo Google Cast.
- Vai alla scheda "Carica contenuti multimediali" in alto.
- Fai clic sul pulsante "Carica per contenuto" per guardare un video di esempio.
- 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:
- Seleziona la directory
app-start
dal download del codice campione. - Apri l'app
js/receiver.js
eindex.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 giornoCastReceiverContext
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:
- 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 di ricezione.
- Il destinatario carica l'oggetto
MediaInfo
tramite una richiestaLOAD
per riprodurre i contenuti. - Il ricevitore monitora e monitora lo stato dei contenuti multimediali.
- 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 relativocontentId
personalizzato. - Effettua una chiamata
GET
alla nostra API per cercare l'asset in streaming entro la datacontentId
. - 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.
--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 Controlli dell'interfaccia utente per gli smart display verrà visualizzato come segue:
--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 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à:
BrowseContent.title
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:
BrowseItem.image
BrowseItem.duration
BrowseItem.title
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.