Stel je voor dat je een webapp op je telefoon kunt gebruiken om een diapresentatie te presenteren op een conferentieprojector, of om afbeeldingen te delen, games te spelen of video's te bekijken op een tv-scherm, waarbij je de mobiele webapp als controller gebruikt.
Met de nieuwste versie van Chrome op Android kunnen sites worden gepresenteerd op Google Cast-apparaten met behulp van de Cast Web SDK . Dit betekent dat u nu Cast-zender-apps kunt maken met behulp van de Web SDK met Chrome op Android of iOS (of op uw desktop met de extensie), en ook apps kunt maken die de native Cast SDK voor Android en iOS gebruiken. (Voorheen had een Google Cast-zender-app de Google Cast Chrome-extensie nodig, waardoor het op Android alleen mogelijk was om met Cast-apparaten te communiceren vanuit native apps.)
Hieronder vindt u een korte introductie tot het bouwen van een Cast Sender-app met behulp van de Web SDK. Uitgebreidere informatie is beschikbaar in de Chrome Sender App Development Guide .
Alle pagina's die Cast gebruiken, moeten de Cast-bibliotheek bevatten:
<script
type="text/javascript"
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>
Voeg een callback toe om de beschikbaarheid van de API te verwerken en de Cast-sessie te initialiseren (zorg ervoor dat u de handler toevoegt voordat de API wordt geladen!):
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);
}
Als u de standaard Styled Media Receiver -toepassing gebruikt en geen zelfgebouwde, geregistreerde Custom Receiver- toepassing, kunt u een SessionRequest als volgt maken:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
De receiverListener -callback hierboven wordt uitgevoerd wanneer een of meer apparaten beschikbaar komen:
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
// update UI
}
}
Start een Cast-sessie wanneer uw gebruiker op het Cast-pictogram klikt, zoals voorgeschreven in de richtlijnen voor gebruikerservaring :
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
De gebruiker krijgt een apparaatkiezer te zien:
Het dialoogvenster Routedetails wordt weergegeven wanneer de pagina al is verbonden en requestSession() aanroept:
Zodra u een Cast-sessie hebt, kunt u media laden voor het geselecteerde Cast-apparaat en een listener toevoegen voor media-afspeelgebeurtenissen:
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);
}
De variabele currentMedia is hier een chrome.cast.media.Media -object, dat gebruikt kan worden om het afspelen te regelen:
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
Er wordt een afspeel-/pauzemelding weergegeven wanneer media wordt afgespeeld:
Als er geen media wordt afgespeeld, bevat de melding alleen een stopknop om het casten te stoppen:
Met de sessionListener -callback voor chrome.cast.ApiConfig() (zie hierboven) kan uw app deelnemen aan een bestaande Cast-sessie of deze beheren:
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Als Chrome op Android het casten van media vanaf uw website toestaat, maar u deze functie wilt uitschakelen zodat de standaard casting-gebruikersinterface uw eigen gebruikersinterface niet verstoort, gebruikt u het kenmerk disableRemotePlayback , dat beschikbaar is in Chrome 49 en hoger:
<video disableRemotePlayback src="..."></video>
De Cast Web SDK-handleiding bevat koppelingen naar voorbeeld-apps en informatie over Cast-functies zoals sessiebeheer, teksttracks (voor ondertiteling en bijschriften) en statusupdates.
Momenteel kunt u alleen presenteren in een Cast Receiver-applicatie met behulp van de Cast Web SDK, maar er wordt gewerkt aan het gebruik van de Presentation API zonder de Cast SDK (op desktop en Android) om elke webpagina op een Cast-apparaat te presenteren zonder registratie bij Google. In tegenstelling tot de Cast SDK die alleen voor Chrome beschikbaar is, zorgt het gebruik van de standaard API ervoor dat de pagina werkt met andere user agents en apparaten die de API ondersteunen.
De Presentation API is, samen met de Remote Playback API , onderdeel van het streven van de Second Screen Working Group om webpagina's in staat te stellen tweede schermen te gebruiken om webinhoud weer te geven.
Deze API's maken gebruik van de diversiteit aan apparaten die online komen, zoals verbonden beeldschermen die een gebruikersagent draaien, om een grote verscheidenheid aan toepassingen mogelijk te maken met een 'besturingsapparaat' en een 'weergaveapparaat'.
Wij houden u op de hoogte van de voortgang van de implementatie.
Laat het ons in de tussentijd weten als u bugs vindt of een verzoek voor een nieuwe functie hebt: crbug.com/new .