Immagina di poter utilizzare un'app web dal tuo smartphone per presentare una presentazione su un proiettore da conferenza oppure condividere immagini, giocare o guardare video sullo schermo di una TV utilizzando l'app web mobile come controller.
La versione più recente di Chrome su Android consente ai siti di presentarsi ai dispositivi Google Cast utilizzando l'SDK web Cast. Ciò significa che ora puoi creare app di trasmissione di Cast utilizzando l'SDK web con Chrome su Android o iOS (o su computer con l'estensione), nonché app che utilizzano l'SDK di trasmissione di Cast nativo per Android e iOS. In precedenza, un'applicazione di trasmissione Google Cast aveva bisogno dell'estensione Google Cast per Chrome, quindi su Android era possibile interagire con i dispositivi Cast solo dalle app native.
Di seguito è riportata una breve introduzione alla creazione di un'app di trasmissione di contenuti con l'SDK web. Informazioni più complete sono disponibili nella Guida allo sviluppo di app di Chrome Sender.
Tutte le pagine che utilizzano Cast devono includere la libreria 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 Receiver e non un'applicazione Custom Receiver personalizzata, puoi creare un SessionRequest come questo:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
Il callback receiverListener riportato 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 di trasmissione, come stabilito dalle linee guida per l'esperienza utente:
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
All'utente verrà presentato un selettore di dispositivi:
La finestra di dialogo dei dettagli del percorso viene visualizzata quando la pagina è già collegata e chiama requestSession():
Una volta avviata una sessione di trasmissione, puoi caricare i contenuti multimediali per il dispositivo di trasmissione selezionato e aggiungere un ascoltatore per gli eventi di riproduzione dei 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);
}
// ...
Quando i contenuti multimediali sono in riproduzione, viene visualizzata una notifica di riproduzione/messa in pausa:
Se non è in riproduzione alcun contenuto multimediale, la notifica contiene solo un pulsante di interruzione per interrompere la trasmissione:
Il callback sessionListener per chrome.cast.ApiConfig() (vedi sopra) consente alla tua app di partecipare o gestire una sessione di trasmissione esistente:
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Se Chrome su Android consente la trasmissione di 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>
La guida all'SDK web di Google Cast contiene link ad app di esempio e informazioni sulle funzionalità di Google Cast, come la gestione delle sessioni, le tracce di testo (per sottotitoli e sottotitoli codificati) e gli aggiornamenti dello stato.
Al momento, puoi presentare contenuti a un'applicazione di ricezione di Google Cast solo utilizzando l'SDK web di Google Cast, ma sono in corso lavori per consentire l'utilizzo dell'API Presentation senza l'SDK di Google Cast (su computer e Android) per presentare qualsiasi pagina web a un dispositivo Google Cast senza registrazione a 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 dell'impegno del Second Screen Working Group per consentire alle pagine web di utilizzare second screen per visualizzare contenuti web.
Queste API sfruttano la gamma di dispositivi che si connettono a internet, inclusi i display connessi che eseguono un agente utente, per consentire una vasta gamma di applicazioni con un dispositivo di "controllo" e un dispositivo di "visualizzazione".
Ti aggiorneremo sull'avanzamento dell'implementazione.
Nel frattempo, non esitare a contattarci se trovi bug o hai richieste di funzionalità: crbug.com/new.