Google Cast per Chrome su Android

[Nome di persona]

Immagina di poter utilizzare un'app web dal telefono per presentare una presentazione su un proiettore per conferenze (o condividere immagini, giocare o guardare video sullo schermo di una TV) utilizzando l'app web mobile come controller.

La release più recente di Chrome su Android consente ai siti di presentare contenuti ai dispositivi Google Cast utilizzando l'SDK Cast Web. Ciò significa che ora puoi creare app mittente di Google Cast utilizzando l'SDK web con Chrome su Android o iOS (o su computer con l'estensione) e puoi creare app che utilizzano l'SDK Google Cast per Android e iOS. In precedenza, un'applicazione mittente Google Cast richiedeva l'estensione Google Cast di Chrome, quindi su Android era possibile interagire con i dispositivi di trasmissione solo da app native.

Di seguito è riportata una breve introduzione alla creazione di un'app mittente di trasmissione utilizzando l'SDK web. Per informazioni più complete, consulta la Guida allo sviluppo di app per mittenti di Chrome.

Tutte le pagine che utilizzano Trasmetti devono includere la raccolta di Google Cast:

<script
  type="text/javascript"
  src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>

Aggiungi un callback per gestire la disponibilità dell'API e inizializzare la sessione di trasmissione (assicurati di aggiungere il gestore prima del caricamento dell'API):

window['__onGCastApiAvailable'] = function (isLoaded, error) {
  if (isLoaded) {
    initializeCastApi();
  } else {
    console.log(error);
  }
};

function initializeCastApi() {
  var sessionRequest = new chrome.cast.SessionRequest(applicationID);
  var apiConfig = new chrome.cast.ApiConfig(
    sessionRequest,
    sessionListener,
    receiverListener
  );
  chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}

Se utilizzi l'applicazione predefinita Styled Media ricevir e non un'applicazione personalizzata registrata, puoi creare un SessionRequest in questo modo:

var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
  DEFAULT_MEDIA_RECEIVER_APP_ID);

Il callback receiverListener sopra viene eseguito quando uno o più dispositivi diventano disponibili:

function receiverListener(e) {
  if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
    // update UI
  }
}

Avvia una sessione di trasmissione quando l'utente fa clic sull'icona Trasmetti, come richiesto dalle linee guida per l'esperienza utente:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

All'utente verrà presentato un selettore di dispositivo:

Finestra di dialogo di selezione del dispositivo di trasmissione.

La finestra di dialogo Dettagli percorso viene mostrata quando la pagina è già collegata e chiama requestSession():

Finestra di dialogo con i dettagli del percorso di trasmissione.

Una volta creata una sessione di trasmissione, puoi caricare contenuti multimediali per il dispositivo di trasmissione selezionato e aggiungere un listener per gli eventi di riproduzione di contenuti multimediali.

var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
  request,
  onMediaDiscovered.bind(this, 'loadMedia'),
  onMediaError
);

function onMediaDiscovered(how, media) {
  currentMedia = media;
  media.addUpdateListener(onMediaStatusUpdate);
}

La variabile currentMedia qui è un oggetto chrome.cast.media.Media, che può essere utilizzato per controllare la riproduzione:

function playMedia() {
  currentMedia.play(null, success, error);
}


    // ...

Viene visualizzata una notifica di riproduzione/pausa durante la riproduzione di contenuti multimediali:

Trasmetti notifica di riproduzione/pausa.

Se non sono in riproduzione contenuti multimediali, nella notifica è presente soltanto un pulsante di interruzione per interrompere la trasmissione:

Notifica di interruzione della trasmissione.

Il callback sessionListener per chrome.cast.ApiConfig() (vedi sopra) consente alla tua app di partecipare a una sessione di trasmissione o di gestirla:

function sessionListener(e) {
  session = e;
  if (session.media.length !== 0) {
    onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
  }
}

Se Chrome su Android consente di trasmettere contenuti multimediali dal tuo sito web, ma vuoi disattivare questa funzionalità in modo che l'interfaccia utente di trasmissione predefinita non interferisca con la tua, utilizza l'attributo disableRemotePlayback, disponibile in Chrome 49 e versioni successive:

<video disableRemotePlayback src="..."></video>

Dispositivi mittente e destinatario alternativi

La guida all'SDK Cast Web contiene link ad app di esempio, nonché informazioni sulle funzionalità di Google Cast come la gestione delle sessioni, le tracce di testo (per i sottotitoli e i sottotitoli codificati) e gli aggiornamenti dello stato.

Al momento puoi presentare in un'applicazione ricevitore Cast soltanto utilizzando l'SDK Cast Web, ma stiamo lavorando per consentire l'utilizzo dell'API Presentation senza l'SDK Cast (su computer e Android) al fine di presentare qualsiasi pagina web su un dispositivo di trasmissione senza registrazione con Google. A differenza dell'SDK Cast solo per Chrome, l'utilizzo dell'API standard consentirà alla pagina di funzionare con altri user agent e dispositivi che supportano l'API.

L'API Presentation, insieme all'API Remote Playback, fa parte del progetto Second Screen Working Group per consentire alle pagine web di usare secondi schermi per visualizzare i contenuti web.

Queste API sfruttano la gamma di dispositivi disponibili online, compresi i display connessi che eseguono uno user agent, per attivare una vasta gamma di applicazioni con un dispositivo di "controllo" e un dispositivo di "display".

Ti aggiorneremo sull'avanzamento dell'implementazione.

Nel frattempo, facci sapere se riscontri bug o hai richieste di funzionalità: crbug.com/new.

Scopri di più