Aggiungere funzionalità di base al ricevitore web personalizzato

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Questa pagina contiene snippet di codice e descrizioni delle funzionalità disponibili per un'app ricevitore web personalizzata.

  1. Un elemento cast-media-player che rappresenta l'UI del player integrato fornita con il Ricevitore web.
  2. Stili personalizzati di tipo CSS per l'elemento cast-media-player per definire stili di vari elementi dell'interfaccia utente come background-image, splash-image e font-family.
  3. Un elemento script per caricare il framework del ricevitore web.
  4. Codice JavaScript per intercettare i messaggi e gestire gli eventi.
  5. Metti in coda per la riproduzione automatica.
  6. Opzioni per configurare la riproduzione.
  7. Opzioni per impostare il contesto del ricevitore web.
  8. Opzioni per impostare comandi supportati dall'app Ricevitore web.
  9. Una chiamata JavaScript per avviare l'applicazione Ricevitore web.

Configurazione e opzioni dell'applicazione

CastReceiverContext è la classe più esterna esposta allo sviluppatore, che gestisce il caricamento delle librerie sottostanti e gestisce l'inizializzazione dell'SDK Ricevitore web.

Se l'API Web Ricevitore rileva che un mittente è disconnesso, attiverà l'evento SENDER_DISCONNECTED. Se il ricevitore web non è stato in grado di comunicare con il mittente per ciò che abbiamo descritto come maxInactivity secondi, verrà sollevato anche l'evento SENDER_DISCONNECTED. Durante lo sviluppo è consigliabile impostare maxInactivity su un valore elevato, in modo che l'app Ricevitore web non si chiuda durante il debug dell'app con Chrome Remote Debugger:

const context = cast.framework.CastReceiverContext.getInstance();
const options = new cast.framework.CastReceiverOptions();
options.maxInactivity = 3600; //Development only
context.start(options);

Tuttavia, per un'applicazione di ricezione web pubblicata, è meglio non impostare maxInactivity e affidarsi invece al valore predefinito. Tieni presente che le opzioni Web Ricevitore sono impostate solo una volta nell'applicazione.

L'altra configurazione è cast.framework.PlaybackConfig. Questa opzione può essere impostata come segue:

const playbackConfig = new cast.framework.PlaybackConfig();
playbackConfig.manifestRequestHandler = requestInfo => {
  requestInfo.withCredentials = true;
};
context.start({playbackConfig: playbackConfig});

Questa configurazione influisce sulla riproduzione di tutti i contenuti e fornisce essenzialmente il comportamento override. Per un elenco dei comportamenti che gli sviluppatori possono ignorare, consulta la definizione di cast.framework.PlaybackConfig. Per cambiare la configurazione tra i contenuti, puoi utilizzare PlayerManager per ottenere la playbackConfig attuale, modificare o aggiungere una sostituzione e reimpostare playbackConfig in questo modo:

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
const playbackConfig = (Object.assign(
            new cast.framework.PlaybackConfig(), playerManager.getPlaybackConfig()));
playbackConfig.autoResumeNumberOfSegments = 1;
playerManager.setPlaybackConfig(playbackConfig);

Tieni presente che se PlaybackConfig non è stato sostituito, getPlaybackConfig() restituisce un oggetto null. Qualsiasi proprietà su PlaybackConfig that è undefined utilizzerà i valori predefiniti.

listener di eventi

L'SDK Ricevitore web consente alla tua app Ricevitore web di gestire gli eventi del player. Il listener di eventi prende un parametro cast.framework.events.EventType (o un array di questi parametri) che specifica gli eventi che devono attivare il listener. Gli array preconfigurati di cast.framework.events.EventType che sono utili per il debug si trovano in cast.framework.events.category. Il parametro evento fornisce ulteriori informazioni sull'evento.

Ad esempio, se vuoi sapere quando viene trasmessa una modifica mediaStatus, puoi utilizzare la seguente logica per gestire l'evento:

const playerManager =
    cast.framework.CastReceiverContext.getInstance().getPlayerManager();
playerManager.addEventListener(
    cast.framework.events.EventType.MEDIA_STATUS, (event) => {
      // Write your own event handling code, for example
      // using the event.mediaStatus value
});

Intercettazione dei messaggi

L'SDK Ricevitore web consente all'app Ricevitore web di intercettare i messaggi ed eseguire codice personalizzato su tali messaggi. L'intercettatore del messaggio utilizza un parametro cast.framework.messages.MessageType che specifica il tipo di messaggio da intercettare.

L'intercettatore dovrebbe restituire la richiesta modificata o una promessa che si risolve con il valore della richiesta modificata. Se restituisci null, non puoi chiamare il gestore di messaggi predefinito. Per ulteriori dettagli, consulta la sezione Caricamento dei contenuti multimediali.

Ad esempio, se vuoi modificare i dati della richiesta di caricamento, puoi utilizzare la seguente logica per intercettare e modificare i dati:

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

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_FAILED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      if (!loadRequestData.media.entity) {
        return loadRequestData;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          if (!asset) {
            throw cast.framework.messages.ErrorReason.INVALID_REQUEST;
          }

          loadRequestData.media.contentUrl = asset.url;
          loadRequestData.media.metadata = asset.metadata;
          loadRequestData.media.tracks = asset.tracks;
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

context.start();

Gestione degli errori

Quando si verificano errori nell'intercettatore dei messaggi, l'app del ricevitore web dovrebbe restituire un elemento cast.framework.messages.ErrorType e cast.framework.messages.ErrorReason appropriati.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      const error = new cast.framework.messages.ErrorData(
                      cast.framework.messages.ErrorType.LOAD_CANCELLED);
      if (!loadRequestData.media) {
        error.reason = cast.framework.messages.ErrorReason.INVALID_PARAM;
        return error;
      }

      ...

      return fetchAssetAndAuth(loadRequestData.media.entity,
                               loadRequestData.credentials)
        .then(asset => {
          ...
          return loadRequestData;
        }).catch(reason => {
          error.reason = reason; // cast.framework.messages.ErrorReason
          return error;
        });
    });

intercettazione messaggio e listener di eventi

Ecco alcune differenze chiave tra l'intercettazione del messaggio e il listener di eventi:

  • Un listener di eventi non consente di modificare i dati della richiesta.
  • È consigliabile utilizzare un listener di eventi per attivare l'analisi o una funzione personalizzata.
playerManager.addEventListener(cast.framework.events.category.CORE,
    event => {
        console.log(event);
    });
  • L'intercettazione dei messaggi ti consente di ascoltare un messaggio, intercettarlo e modificare i dati della richiesta stessa.
  • L'intercettazione dei messaggi è la soluzione migliore per gestire la logica personalizzata in merito alla richiesta dei dati.

Caricamento dell'elemento multimediale in corso...

MediaInformation fornisce diverse proprietà per caricare contenuti multimediali nel messaggio cast.framework.messages.MessageType.LOAD, tra cui entity, contentUrl e contentId.

entity è la proprietà suggerita da utilizzare nell'implementazione per le app del mittente e del destinatario. La proprietà è un URL link diretto che può essere una playlist o un contenuto multimediale specifico.

La contentUrl è progettata per un URL riproducibile e può essere utilizzata una volta disponibile.

contentId è stato ritirato a causa dell'ambiguità del fatto che il valore sia un URL dei contenuti multimediali, un ID reale o un parametro chiave per la ricerca personalizzata.

Il suggerimento è quello di utilizzare entity per archiviare l'ID reale o i parametri chiave e utilizzare contentUrl per l'URL dei contenuti multimediali. Ecco un esempio nel seguente snippet, in cui entity è presente nella richiesta LOAD e viene recuperato l'elemento contentUrl riproducibile:

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

      if (!loadRequestData.media.entity) {
        // Copy the value from contentId for legacy reasons if needed
        loadRequestData.media.entity = loadRequestData.media.contentId;
      }

      return thirdparty.fetchAssetAndAuth(loadRequestData.media.entity,
                                          loadRequestData.credentials)
        .then(asset => {
          loadRequestData.media.contentUrl = asset.url;
          ...
          return loadRequestData;
        });
    });

Funzionalità dispositivo

Il metodo getDeviceCapabilities fornisce informazioni sul dispositivo di trasmissione connesso e sul dispositivo video o audio collegato. Il metodo getDeviceCapabilities fornisce informazioni di assistenza per l'Assistente Google, il Bluetooth e i display e i dispositivi audio connessi.

Questo metodo restituisce un oggetto su cui puoi eseguire query inserendo una delle enumerazioni specificate per ottenere la capacità del dispositivo per quell'enumerazione. Le enumerazioni sono definite in cast.framework.system.DeviceCapabilities.

Questo esempio controlla se il dispositivo ricevente sul Web è in grado di riprodurre HDR e Dolby Vision (DV) con le chiavi IS_HDR_SUPPORTED e IS_DV_SUPPORTED, rispettivamente.

const context = cast.framework.CastReceiverContext.getInstance();
context.addEventListener(cast.framework.system.EventType.READY, () => {
  const deviceCapabilities = context.getDeviceCapabilities();
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_HDR_SUPPORTED] value
  }
  if (deviceCapabilities &&
      deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED]) {
    // Write your own event handling code, for example
    // using the deviceCapabilities[cast.framework.system.DeviceCapabilities.IS_DV_SUPPORTED] value
  }
});
context.start();

Gestire l'interazione dell'utente

Un utente può interagire con l'applicazione Ricevitore web tramite le applicazioni dei mittenti (Web, Android e iOS), comandi vocali sui dispositivi con l'assistente integrato, controlli touch sugli smart display e telecomandi sui dispositivi Android TV. L'SDK Cast fornisce varie API per consentire all'app Ricevitore web di gestire queste interazioni, aggiornare l'UI dell'applicazione tramite gli stati delle azioni utente e, se vuoi, inviare le modifiche per aggiornare i servizi di backend.

Comandi multimediali supportati

Gli stati dei controlli dell'interfaccia utente sono gestiti da MediaStatus.supportedMediaCommands per i controller espansi del mittente iOS e Android, le app del ricevitore e del telecomando in esecuzione sui dispositivi touch e le app del ricevitore sui dispositivi Android TV. Quando un Command parzialmente specifico è attivato nella proprietà, vengono abilitati i pulsanti correlati all'azione. Se il valore non è impostato, il pulsante è disattivato. Questi valori possono essere modificati sul ricevitore web:

  1. Utilizzando PlayerManager.setSupportedMediaCommands per impostare la Commands specifica
  2. Aggiunta di un nuovo comando utilizzando addSupportedMediaCommands
  3. Rimozione di un comando esistente utilizzando removeSupportedMediaCommands.
playerManager.setSupportedMediaCommands(cast.framework.messages.Command.SEEK |
  cast.framework.messages.Command.PAUSE);

Quando il destinatario prepara la versione aggiornata di MediaStatus, includerà le modifiche nella proprietà supportedMediaCommands. Quando lo stato viene trasmesso, le app dei mittenti connessi aggiornano i pulsanti nell'interfaccia utente di conseguenza.

Per ulteriori informazioni sui comandi multimediali supportati e sui dispositivi touch, consulta la Accessing UI controls guida.

Gestione degli stati di azione dell'utente

Quando gli utenti interagiscono con l'interfaccia utente o inviano comandi vocali, possono controllare la riproduzione dei contenuti e delle proprietà correlati all'elemento in riproduzione. Le richieste che controllano la riproduzione vengono gestite automaticamente dall'SDK. Le richieste che modificano le proprietà dell'elemento corrente in riproduzione, ad esempio un comando LIKE, richiedono che l'applicazione di ricezione le gestisca. L'SDK fornisce una serie di API per gestire questi tipi di richieste. Per supportare queste richieste è necessario:

  • Intercetta USER_ACTION messaggi e determina l'azione richiesta.
  • Aggiorna MediaInformation UserActionState per aggiornare l'interfaccia utente.

Lo snippet riportato di seguito intercetta il messaggio USER_ACTION e gestisce il backup del backend con la modifica richiesta. Quindi effettua una chiamata per aggiornare UserActionState sul ricevitore.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.USER_ACTION,
  (userActionRequestData) => {
    // Obtain the media information of the current content to associate the action to.
    let mediaInfo = playerManager.getMediaInformation();

    // If there is no media info return an error and ignore the request.
    if (!mediaInfo) {
        console.error('Not playing media, user action is not supported');
        return new cast.framework.messages.ErrorData(messages.ErrorType.BAD_REQUEST);
    }

    // Reach out to backend services to store user action modifications. See sample below.
    return sendUserAction(userActionRequestData, mediaInfo)

    // Upon response from the backend, update the client's UserActionState.
    .then(backendResponse => updateUserActionStates(backendResponse))

    // If any errors occurred in the backend return them to the cast receiver.
    .catch((error) => {
      console.error(error);
      return error;
    });
});

Lo snippet riportato di seguito simula una chiamata a un servizio di backend. La funzione controlla il UserActionRequestData per vedere il tipo di modifica richiesta dall'utente ed effettua una chiamata di rete solo se l'azione è supportata dal backend.

function sendUserAction(userActionRequestData, mediaInfo) {
  return new Promise((resolve, reject) => {
    switch (userActionRequestData.userAction) {
      // Handle user action changes supported by the backend.
      case cast.framework.messages.UserAction.LIKE:
      case cast.framework.messages.UserAction.DISLIKE:
      case cast.framework.messages.UserAction.FOLLOW:
      case cast.framework.messages.UserAction.UNFOLLOW:
      case cast.framework.messages.UserAction.FLAG:
      case cast.framework.messages.UserAction.SKIP_AD:
        let backendResponse = {userActionRequestData: userActionRequestData, mediaInfo: mediaInfo};
        setTimeout(() => {resolve(backendResponse)}, 1000);
        break;
      // Reject all other user action changes.
      default:
        reject(
          new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType.INVALID_REQUEST));
    }
  });
}

Lo snippet riportato di seguito prende il UserActionRequestData e aggiunge o rimuove UserActionState dal MediaInformation. L'aggiornamento di UserActionState di MediaInformation modifica lo stato del pulsante associato all'azione richiesta. Questa modifica si riflette nell'UI dei controlli dello smart display, nell'app del telecomando e nell'UI di Android TV. Viene inoltre trasmessa tramite messaggi MediaStatus in uscita per aggiornare l'UI del controller espanso per mittenti iOS e Android.

function updateUserActionStates(backendResponse) {
  // Unwrap the backend response.
  let mediaInfo = backendResponse.mediaInfo;
  let userActionRequestData = backendResponse.userActionRequestData;

  // If the current item playing has changed, don't update the UserActionState for the current item.
  if (playerManager.getMediaInformation().entity !== mediaInfo.entity) {
    return;
  }

  // Check for existing userActionStates in the MediaInformation.
  // If none, initialize a new array to populate states with.
  let userActionStates = mediaInfo.userActionStates || [];

  // Locate the index of the UserActionState that will be updated in the userActionStates array.
  let index = userActionStates.findIndex((currUserActionState) => {
    return currUserActionState.userAction == userActionRequestData.userAction;
  });

  if (userActionRequestData.clear) {
    // Remove the user action state from the array if cleared.
    if (index >= 0) {
      userActionStates.splice(index, 1);
    }
    else {
      console.warn("Could not find UserActionState to remove in MediaInformation");
    }
  } else {
    // Add the UserActionState to the array if enabled.
    userActionStates.push(
      new cast.framework.messages.UserActionState(userActionRequestData.userAction));
  }

  // Update the UserActionState array and set the new MediaInformation
  mediaInfo.userActionStates = userActionStates;
  playerManager.setMediaInformation(mediaInfo, true);
  return;
}

Comandi vocali

I seguenti comandi multimediali sono attualmente supportati nell'SDK Ricevitore web per i dispositivi con l'assistente integrato. Le implementazioni predefinite di questi comandi sono disponibili in cast.framework.PlayerManager.

Comando Descrizione
Riproduci Riproduci o riprendi la riproduzione dallo stato in pausa.
Metti in pausa Metti in pausa i contenuti in riproduzione.
Indietro Passa all'elemento multimediale precedente nella coda multimediale.
Avanti Passa al prossimo elemento multimediale nella coda multimediale.
Interrompi Interrompi i contenuti multimediali attualmente in riproduzione.
Nessuno ripeti Disattiva la ripetizione degli elementi multimediali in coda al termine della riproduzione dell'ultimo elemento nella coda.
Ripeti il singolo Ripeti i contenuti multimediali attualmente in riproduzione per un tempo indeterminato.
Ripeti tutti Ripeti tutti gli elementi nella coda una volta che l'ultimo elemento della coda è stato riprodotto.
Ripeti tutti e Riproduzione casuale Una volta terminata la riproduzione dell'ultimo elemento della coda, ripeti la riproduzione della coda in ordine casuale e tutti gli elementi.
Riproduzione casuale Metti in ordine casuale i contenuti multimediali nella tua coda dei contenuti multimediali.
Sottotitoli attivi / disattivati Attiva / disattiva i sottotitoli per i tuoi contenuti multimediali. Abilita / Disabilita è disponibile anche per lingua.
Vai al tempo assoluto Passa al tempo assoluto specificato.
Vai al tempo relativo all'ora corrente Spostati in avanti o indietro rispetto al periodo di tempo specificato rispetto al tempo di riproduzione attuale.
di nuovo Riavvia i contenuti multimediali attualmente in riproduzione o l'ultimo elemento multimediale riprodotto se non è in corso alcuna riproduzione.
Impostare la velocità di riproduzione Variare la velocità di riproduzione dei contenuti multimediali. Questa opzione deve essere gestita per impostazione predefinita. Puoi utilizzare l'intercettatore di messaggio SET_PLAYBACK_RATE per sostituire le richieste di tariffe in arrivo.

Comandi multimediali supportati con la voce

Per evitare che un comando vocale attivi un comando multimediale su un dispositivo con l'assistente integrato, devi prima impostare i comandi multimediali supportati che prevedi di supportare. Successivamente, devi applicare questi comandi attivando la proprietà CastReceiverOptions.enforceSupportedCommands. L'interfaccia utente sui mittenti e sui dispositivi abilitati al tocco di Cast SDK cambierà per riflettere queste configurazioni. Se il flag non è abilitato, i comandi vocali in entrata vengono eseguiti.

Ad esempio, se consenti l'utilizzo di PAUSE dalle applicazioni di mittenti e dai dispositivi touch, dovrai anche configurare il ricevitore in modo che rifletta queste impostazioni. Se configurati, i comandi vocali in arrivo verranno eliminati se non sono inclusi nell'elenco dei comandi supportati.

Nell'esempio riportato di seguito, viene specificato CastReceiverOptions all'avvio di CastReceiverContext. Abbiamo aggiunto il supporto del comando PAUSE e abbiamo imposto al player di supportare solo tale comando. Se un comando vocale richiede un'altra operazione, come SEEK, verrà negato. L'utente verrà informato che il comando non è ancora supportato.

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

context.start({
  enforceSupportedCommands: true,
  supportedCommands: cast.framework.messages.Command.PAUSE
});

Puoi applicare una logica separata per ogni comando che vuoi limitare. Rimuovi il flag enforceSupportedCommands e, per ogni comando che vuoi limitare, puoi intercettare il messaggio in arrivo. In questo caso intercettamo la richiesta fornita dall'SDK in modo che i comandi SEEK emessi sui dispositivi con l'assistente integrato non attivino una ricerca nella tua applicazione di ricezione web.

Per i comandi multimediali che la tua applicazione non supporta, restituisci il motivo di errore appropriato, ad esempio NOT_SUPPORTED.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.SEEK,
  seekData => {
    // Block seeking if the SEEK supported media command is disabled
    if (!(playerManager.getSupportedMediaCommands() & cast.framework.messages.Command.SEEK)) {
      let e = new cast.framework.messages.ErrorData(cast.framework.messages.ErrorType
      .INVALID_REQUEST);
      e.reason = cast.framework.messages.ErrorReason.NOT_SUPPORTED;
      return e;
    }

    return seekData;
  });

Sfondo per attività vocale

Se la piattaforma di trasmissione riproduce in background il suono dell'applicazione a causa di attività dell'assistente come l'ascolto della voce o la risposta dell'utente, all'avvio dell'attività viene inviato un messaggio FocusState di NOT_IN_FOCUS all'applicazione Ricevitore web. Al termine dell'attività viene inviato un altro messaggio con IN_FOCUS. A seconda della tua applicazione e dei contenuti multimediali in riproduzione, ti consigliamo di mettere in pausa i contenuti multimediali quando FocusState è NOT_IN_FOCUS intercettando il tipo di messaggio FOCUS_STATE.

Ad esempio, è buona norma mettere in pausa la riproduzione dell'audiolibro se l'assistente risponde a una query dell'utente.

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.FOCUS_STATE,
  focusStateRequestData => {
    // Pause content when the app is out of focus. Resume when focus is restored.
    if (focusStateRequestData.state == cast.framework.messages.FocusState.NOT_IN_FOCUS) {
      playerManager.pause();
    } else {
      playerManager.play();
    }

    return focusStateRequestData;
  });

Lingua dei sottotitoli specificata per la voce

Quando un utente non indica esplicitamente la lingua dei sottotitoli, la lingua utilizzata per i sottotitoli è la stessa in cui è stato pronunciato il comando. In questi casi, il parametro isSuggestedLanguage del messaggio in arrivo indica se la lingua associata è stata suggerita o esplicitamente richiesta dall'utente.

Ad esempio, isSuggestedLanguage è impostato su true per il comando "Hey Google, attiva i sottotitoli" perché la lingua è stata dedotta dalla lingua in cui è stato pronunciato il comando. Se la lingua viene richiesta esplicitamente, ad esempio "Hey Google, attiva i sottotitoli in inglese", isSuggestedLanguage è impostato su false.

Metadati e trasmissione vocale

Anche se i comandi vocali sono gestiti dal ricevitore web per impostazione predefinita, devi assicurarti che i metadati dei tuoi contenuti siano completi e precisi. Ciò garantisce che i comandi vocali siano gestiti correttamente dall'assistente e che i metadati vengano visualizzati correttamente nei nuovi tipi di interfacce come l'app Google Home e gli smart display come Google Home Hub.

Trasferimento dello streaming

Conservare lo stato della sessione è la base del trasferimento dello stream, in cui gli utenti possono spostare stream audio e video esistenti su più dispositivi utilizzando i comandi vocali, l'app Google Home o gli smart display. La riproduzione dei contenuti multimediali viene interrotta su un dispositivo (l'origine) e continua su un altro (la destinazione). Tutti i dispositivi di trasmissione con il firmware più recente possono essere utilizzati come origini o destinazioni in un trasferimento di streaming.

Il flusso di eventi per il trasferimento dello stream è:

  1. Sul dispositivo di origine:
    1. La riproduzione dei contenuti multimediali viene interrotta.
    2. L'applicazione Ricevitore web riceve un comando per salvare lo stato multimediale corrente.
    3. L'applicazione Ricevitore web è chiusa.
  2. Sul dispositivo di destinazione:
    1. L'applicazione Ricevitore web è stata caricata.
    2. L'applicazione Ricevitore web riceve un comando per ripristinare lo stato dei contenuti multimediali salvati.
    3. La riproduzione dei contenuti multimediali riprende.

Gli elementi dello stato dei contenuti multimediali includono:

  • Posizione o timestamp specifici del brano, del video o dell'elemento multimediale.
  • Si trova in una coda più ampia (ad esempio in una playlist o la radio dell'artista).
  • L'utente autenticato.
  • Stato di riproduzione (ad esempio, in riproduzione o in pausa).

Abilitazione dello streaming del trasferimento in corso...

Per implementare il trasferimento dello stream per il tuo ricevitore web:

  1. Aggiorna supportedMediaCommands con il comando STREAM_TRANSFER:
    playerManager.addSupportedMediaCommands(
    cast.framework.messages.Command.STREAM_TRANSFER, true);
  2. Se vuoi, sostituisci gli intercettori di messaggi SESSION_STATE e RESUME_SESSION come descritto in Preservazione dello stato della sessione. Sostituisci questi valori solo se i dati personalizzati devono essere archiviati come parte dello snapshot della sessione. In caso contrario, l'implementazione predefinita per la conservazione degli stati delle sessioni supporterà il trasferimento dello stream.

Preservazione dello stato della sessione

L'SDK ricevitore web fornisce un'implementazione predefinita per le app che i server web ricevono per preservare gli stati della sessione mediante l'acquisizione di uno snapshot dell'attuale stato dei contenuti multimediali, la conversione dello stato in una richiesta di caricamento e il ripristino della sessione con la richiesta di caricamento.

Se necessario, la richiesta di caricamento generata dal ricevitore web può essere sostituita nell'intercettatore dei messaggi SESSION_STATE. Se vuoi aggiungere dati personalizzati alla richiesta di caricamento, ti consigliamo di inserirli in loadRequestData.customData.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SESSION_STATE,
    function (sessionState) {
        // Override sessionState.loadRequestData if needed.
        const newCredentials = updateCredentials_(sessionState.loadRequestData.credentials);
        sessionState.loadRequestData.credentials = newCredentials;

        // Add custom data if needed.
        sessionState.loadRequestData.customData = {
            'membership': 'PREMIUM'
        };

        return sessionState;
    });

I dati personalizzati possono essere recuperati da loadRequestData.customData nell'intercettatore dei messaggi RESUME_SESSION.

let cred_ = null;
let membership_ = null;

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.RESUME_SESSION,
    function (resumeSessionRequest) {
        let sessionState = resumeSessionRequest.sessionState;

        // Modify sessionState.loadRequestData if needed.
        cred_ = sessionState.loadRequestData.credentials;

        // Retrieve custom data.
        membership_ = sessionState.loadRequestData.customData.membership;

        return resumeSessionRequest;
    });

Precaricamento dei contenuti

Il ricevitore web supporta il precaricamento degli elementi multimediali dopo l'elemento di riproduzione corrente in coda.

L'operazione di precaricamento precarica diversi segmenti degli elementi futuri. La specifica viene eseguita sul valore preloadTime nell'oggetto QueueItem (il valore predefinito è di 20 secondi se non viene fornito). Il tempo è espresso in secondi, relativo alla fine dell'elemento attualmente in riproduzione . Solo i valori positivi sono validi. Ad esempio, se il valore è 10 secondi, questo elemento verrà precaricato 10 secondi prima del termine dell'elemento precedente. Se il tempo per il precaricamento è superiore al tempo rimanente sull'elemento corrente, il precaricamento verrà eseguito appena possibile. Pertanto, se nella coda dell'elemento viene specificato un valore di precaricamento molto elevato, si potrebbe ottenere l'effetto di riprodurre l'elemento corrente precaricando l'elemento successivo. Tuttavia, lasciamo l'impostazione e la scelta di questo campo per lo sviluppatore poiché questo valore può influire sulla larghezza di banda e sulle prestazioni di streaming dell'elemento corrente.

Il precaricamento funzionerà per i contenuti in streaming HLS, DASH e Fluidi per impostazione predefinita.

I normali file video e audio MP4, come MP3, non verranno precaricati, poiché i dispositivi di trasmissione supportano un solo elemento multimediale e non possono essere utilizzati per precaricare quando i contenuti sono ancora in riproduzione.

Messaggi personalizzati

Lo scambio di messaggi è il metodo di interazione chiave per le applicazioni Ricevitore web.

Un mittente invia messaggi a un destinatario web utilizzando le API del mittente per la piattaforma in esecuzione (Android, iOS, Web). L'oggetto evento (che è la manifestazione di un messaggio) passato ai listener di eventi ha un elemento dati (event.data) in cui i dati acquisiscono le proprietà del tipo di evento specifico.

Un'applicazione Ricevitore web può scegliere di ascoltare i messaggi su uno spazio dei nomi specificato. In virtù di ciò, si dice che l'applicazione Ricevitore web supporti il protocollo dello spazio dei nomi. Spetta quindi a tutti i mittenti connessi che vogliono comunicare sullo spazio dei nomi utilizzare il protocollo appropriato.

Tutti gli spazi dei nomi sono definiti da una stringa e devono iniziare con "urn:x-cast:" seguito da qualsiasi stringa. Ad esempio, "urn:x-cast:com.example.cast.mynamespace".

Ecco uno snippet di codice che consente al destinatario web di ascoltare i messaggi personalizzati provenienti dai mittenti collegati:

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

const CUSTOM_CHANNEL = 'urn:x-cast:com.example.cast.mynamespace';
context.addCustomMessageListener(CUSTOM_CHANNEL, function(customEvent) {
  // handle customEvent.
});

context.start();

Analogamente, le applicazioni di ricezione web possono tenere informati i mittenti sullo stato del ricevitore web inviando i messaggi ai mittenti connessi. Un'applicazione Ricevitore web può inviare messaggi utilizzando sendCustomMessage(namespace, senderId, message) su CastReceiverContext. Un destinatario web può inviare messaggi a un singolo mittente, in risposta a un messaggio ricevuto o a causa di una modifica dello stato dell'applicazione. Oltre alla messaggistica point-to-point (con un limite di 64 kB), un ricevitore web può anche trasmettere messaggi a tutti i mittenti connessi.

Trasmetti per dispositivi audio

Consulta la guida ai dispositivi Google Cast per i dispositivi audio per ricevere assistenza sulla riproduzione solo audio.

Android TV

In questa sezione viene spiegato come il ricevitore web di Google utilizza i tuoi input per la riproduzione e la compatibilità con Android TV.

Integrazione dell'applicazione con il telecomando

Il ricevitore web di Google in esecuzione sul dispositivo Android TV traduce l'input dagli ingressi di controllo del dispositivo (ad esempio il telecomando portatile) come messaggi di riproduzione multimediale definiti per lo spazio dei nomi urn:x-cast:com.google.cast.media, come descritto in Messaggi di riproduzione dei contenuti multimediali. L'applicazione deve supportare questi messaggi per controllare la riproduzione dei contenuti multimediali dell'applicazione per consentire il controllo della riproduzione di base dagli input di controllo di Android TV.

Linee guida per la compatibilità con Android TV

Di seguito sono riportati alcuni consigli e alcuni errori comuni da evitare per garantire che la tua applicazione sia compatibile con Android TV:

  • Tieni presente che la stringa dello user agent contiene sia "Android" che "C confortevoli"; alcuni siti potrebbero reindirizzare a un sito solo per dispositivi mobili perché rilevano l'etichetta "Android". Non assumere che &Android nella stringa dello user agent indichi sempre un utente di dispositivi mobili.
  • Lo stack multimediale di Android potrebbe utilizzare GZIP trasparente per il recupero dei dati. Assicurati che i tuoi dati multimediali possano rispondere a Accept-Encoding: gzip.
  • Gli eventi multimediali HTML5 di Android TV potrebbero essere attivati in momenti diversi rispetto a Chromecast, il che potrebbe rivelare problemi nascosti su Chromecast.
  • Quando aggiorni i contenuti multimediali, utilizza eventi correlati ai contenuti multimediali attivati da elementi <audio>/<video>, come timeupdate, pause e waiting. Evita di utilizzare eventi relativi al networking come progress, suspend e stalled, poiché tendono a dipendere dalla piattaforma. Vedi Eventi multimediali per ulteriori informazioni sulla gestione degli eventi multimediali nel ricevitore.
  • Quando configuri i certificati HTTPS del sito di destinazione, assicurati di includere certificati CA intermedi. Consulta la pagina di test di Qualsys SSL per verificare: se il percorso di certificazione certificato per il tuo sito include un certificato CA etichettato "download aggiuntivo", potrebbe non essere caricato sulle piattaforme basate su Android.
  • Mentre Chromecast mostra la pagina del ricevitore su un piano grafico da 720p, altre piattaforme di trasmissione, inclusa Android TV, potrebbero vedere la pagina fino a 1080p. Assicurati che la pagina del ricevitore scala senza problemi a diverse risoluzioni.