Questa pagina è stata tradotta dall'API Cloud Translation.

Integra l'SDK Cast nella tua app Web Sender

Questa guida per gli sviluppatori descrive come aggiungere il supporto di Google Cast al tuo sito web App mittente che utilizza l'SDK Cast.

Terminologia

Il dispositivo mobile o il browser è il mittente, che controlla la riproduzione. il dispositivo Google Cast è il ricevitore, che mostra i contenuti su sullo schermo per la riproduzione.

L'SDK Web Sender è composto da due parti: l'API Framework (cast.framework) e l'API di base (chrome.cast) In generale, effettui chiamate con l'API Framework di livello superiore più semplice, che vengono poi elaborati dall'API di base di livello inferiore.

Il framework mittente si riferisce all'API, al modulo e al profilo che forniscono un wrapper per la funzionalità di livello inferiore. La app mittente o app Google Cast per Chrome si riferisce a un'app web (HTML/JavaScript) in esecuzione in un browser Chrome su un dispositivo mittente. Un'app Web receiver si riferisce a un'app HTML/JavaScript eseguita su Chromecast o su un dispositivo Google Cast.

Il framework del mittente utilizza un design di callback asincrono per informare il mittente di eventi e la transizione tra i vari stati dell'attività dell'app Google Cast. ciclo di lancio di Android.

Carica la libreria

Affinché la tua app possa implementare le funzionalità di Google Cast, deve conoscere le posizione dell'SDK Google Cast Web Sender, come mostrato di seguito. Aggiungi il parametro Parametro di query dell'URL loadCastFramework per caricare l'API Web Sender Framework . Tutte le pagine dell'app devono fare riferimento alla raccolta nel seguente modo:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Framework

L'SDK Web Sender utilizza cast.framework..* nello spazio dei nomi. Lo spazio dei nomi rappresenta quanto segue:

Metodi o funzioni che richiamano operazioni sull'API
Listener di eventi per le funzioni listener nell'API

Il framework è costituito dai seguenti componenti principali:

La CastContext è un oggetto singleton che fornisce informazioni stato di trasmissione attuale e attiva gli eventi per stato di trasmissione e sessione di trasmissione modifiche dello stato.
La CastSession gestisce la sessione, fornisce lo stato informazioni e attiva eventi, come modifiche al volume del dispositivo, lo stato di disattivazione dell'audio e i metadati dell'app.
L'elemento Pulsante Trasmetti, ossia un semplice elemento HTML personalizzato che estende il pulsante HTML. Se il pulsante Trasmetti fornito non è sufficiente, puoi utilizzare lo stato Trasmetti per implementare un pulsante Trasmetti.
La RemotePlayerController fornisce l'associazione di dati per semplificare l'implementazione del player remoto.

Esamina il Riferimento API Google Cast Web Sender per un descrizione completa dello spazio dei nomi.

Pulsante Trasmetti

Il componente Pulsante Trasmetti nell'app è gestito interamente dal framework. Questo include la gestione della visibilità e degli eventi di clic.

<google-cast-launcher></google-cast-launcher>

In alternativa, puoi creare il pulsante in modo programmatico:

document.createElement("google-cast-launcher");

Puoi applicare qualsiasi ulteriore stile, come dimensione o posizionamento, alla dell'elemento. Utilizza l'attributo --connected-color per scegliere il colore per lo stato del ricevitore web connesso e --disconnected-color per lo stato disconnesso.

Inizializzazione

Dopo aver caricato l'API framework, l'app chiama il gestore window.__onGCastApiAvailable. Devi assicurarti che l'app imposti questo gestore su window prima di caricare la raccolta del mittente.

All'interno di questo gestore, inizializza l'interazione con Google Cast chiamando il metodo setOptions(options) metodo di CastContext.

Ad esempio:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Quindi, inizializza l'API nel seguente modo:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

Per prima cosa, l'app recupera l'istanza singleton del Oggetto CastContext forniti dal framework. Quindi utilizza setOptions(options) utilizzando un Oggetto CastOptions per impostare applicationID.

Se utilizzi il ricevitore multimediale predefinito, che non richiede la registrazione, utilizzi una costante predefinita dall'SDK Web Sender, come mostrato di seguito, applicationID:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

Controllo dei contenuti multimediali

Una volta che lo strumento CastContext è stata inizializzata, l'app può recuperare lo stato CastSession in qualsiasi con l'utilizzo getCurrentSession()

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

È possibile utilizzare CastSession per caricare contenuti multimediali sul dispositivo di trasmissione connesso tramite loadMedia(loadRequest) Per prima cosa, crea un MediaInfo, utilizzando i contentId e contentType, nonché eventuali altre informazioni correlati ai contenuti. Quindi crea un LoadRequest da lì, impostando tutte le informazioni pertinenti per la richiesta. Infine, chiama loadMedia(loadRequest) sul tuo CastSession.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

Il metodo loadMedia restituirà un Promise che può essere utilizzato per eseguire le operazioni necessarie per ottenere un risultato positivo. Se la promessa viene rifiutata, l'argomento della funzione sarà un chrome.cast.ErrorCode

Puoi accedere alle variabili di stato del player RemotePlayer Tutte le interazioni con l'RemotePlayer, inclusi i callback di eventi multimediali e vengono gestiti tramite RemotePlayerController

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

Il RemotePlayerController offre all'app il controllo completo dei contenuti multimediali RIPRODUCI, METTI IN PAUSA, INTERROMPI e CERCA i contenuti multimediali caricati.

RIPRODUCI/PAUSA: playerController.playOrPause();
INTERROMPI: playerController.stop();
CERCA: playerController.seek();

RemotePlayer e RemotePlayerController possono essere utilizzata con framework di associazione di dati, come Polymer o Angular, per implementare player remoto.

Ecco uno snippet di codice per Angular:

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

Stato dei contenuti multimediali

Durante la riproduzione di contenuti multimediali, si verificano vari eventi che possono essere acquisiti impostando per gli ascoltatori cast.framework.RemotePlayerEventType eventi il RemotePlayerController.

Per ottenere le informazioni sullo stato dei contenuti multimediali, utilizza la cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED , che si attiva quando la riproduzione cambia e quando CastSession.getMediaSession().media modifiche.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

Quando si verificano eventi come pausa, riproduzione, ripresa o ricerca, l'app dovrà intervenire e si sincronizzano tra l'app stessa e l'app WebRicevitore sul dispositivo. Consulta gli Aggiornamenti di stato per ulteriori informazioni.

Come funziona la gestione delle sessioni

L'SDK Cast introduce il concetto di sessione di trasmissione, il la cui creazione combina i passaggi per connettersi a un dispositivo, avviare (o accedere) a un App ricevitore, connessione all'app e inizializzazione di un canale di controllo multimediale. Guarda il ricevitore web Guida al ciclo di vita dell'applicazione per ulteriori informazioni sulle sessioni di trasmissione e sul ciclo di vita del ricevitore web.

Le sessioni sono gestite dalla classe CastContext, recuperabili dall'app tramite cast.framework.CastContext.getInstance(). Le singole sessioni sono rappresentate dalle sottoclassi della classe Session Ad esempio: CastSession rappresenta le sessioni con dispositivi di trasmissione. La tua app può accedere ai contenuti attualmente attivi Sessione di trasmissione tramite CastContext.getCurrentSession()

Per monitorare lo stato della sessione, aggiungi un listener alla CastContext per il Tipo di evento CastContextEventType.SESSION_STATE_CHANGED.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

Per la disconnessione, ad esempio quando l'utente fa clic su "Interrompi trasmissione" pulsante da la finestra di dialogo Trasmetti, puoi aggiungere un listener per RemotePlayerEventType.IS_CONNECTED_CHANGED tipo di evento nel listener. Nel listener, controlla se RemotePlayer è disconnesso. In questo caso, aggiorna lo stato del player locale in base alle esigenze. Ad esempio:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

L'utente può controllare direttamente la terminazione della trasmissione tramite la trasmissione del framework il mittente può interrompere la trasmissione utilizzando lo stato attuale CastSession .

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

Trasferimento dello streaming

La conservazione dello stato della sessione è alla base del trasferimento dello streaming, dove gli utenti possono spostare gli stream audio e video esistenti su più dispositivi con i comandi vocali e Google Home all'app o a smart display. La riproduzione dei contenuti multimediali si interrompe su un dispositivo (l'origine) e continua su un altro (lo destinazione). Qualsiasi dispositivo di trasmissione con il firmware più recente può fungere da sorgente o destinazione in un trasferimento dello streaming.

Per ricevere il nuovo dispositivo di destinazione durante il trasferimento dello streaming, chiama CastSession#getCastDevice() quando cast.framework.SessionState.SESSION_RESUMED viene chiamato l'evento.

Consulta: Trasferimento dello streaming sul ricevitore web per ulteriori informazioni.

Indietro

Configurazione

Avanti

Aggiungi funzionalità avanzate