Stel je voor dat je een webapp op je telefoon kunt gebruiken om een diaserie te presenteren aan een conferentieprojector – of afbeeldingen kunt delen, games kunt spelen of video’s kunt bekijken op een tv-scherm – met de mobiele webapp als controller.
Met de nieuwste versie van Chrome op Android kunnen sites presenteren op Google Cast-apparaten met behulp van de Cast Web SDK . Dit betekent dat je nu Cast-afzender-apps kunt maken met behulp van de Web SDK met Chrome op Android of iOS (of op desktop met de extensie) en ook apps kunt maken die de native Cast SDK voor Android en iOS gebruiken. (Voorheen had een Google Cast-afzenderapplicatie de Google Cast Chrome-extensie nodig, dus op Android was het alleen mogelijk om vanuit native apps met Cast-apparaten te communiceren.)
Hieronder vindt u een korte introductie over 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 API-beschikbaarheid af te handelen 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- applicatie gebruikt en niet een eigen, geregistreerde Custom Receiver- applicatie, kunt u als volgt een SessionRequest maken:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
De bovenstaande receiverListener callback 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 door de richtlijnen voor gebruikerservaring :
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
De gebruiker krijgt een apparaatkiezer te zien:
Het dialoogvenster met routedetails wordt weergegeven als de pagina al is verbonden en requestSession() aanroept:
Zodra u een Cast-sessie heeft, kunt u media laden voor het geselecteerde Cast-apparaat en een luisteraar 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 currentMedia variabele hier is een chrome.cast.media.Media object, dat kan worden gebruikt voor het regelen van het afspelen:
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
Er wordt een afspeel-/pauzemelding weergegeven wanneer media worden afgespeeld:
Als er geen media wordt afgespeeld, heeft 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-UI uw eigen gebruikersinterface niet hindert, gebruikt u het kenmerk DisableRemotePlayback , beschikbaar in Chrome 49 en hoger:
<video disableRemotePlayback src="..."></video>
De Cast Web SDK-handleiding bevat links naar voorbeeldapps en informatie over Cast-functies zoals sessiebeheer, teksttracks (voor ondertitels en bijschriften) en statusupdates.
Momenteel kunt u alleen presenteren aan een Cast Receiver-applicatie met behulp van de Cast Web SDK, maar er wordt gewerkt aan het mogelijk maken dat de Presentation API kan worden gebruikt 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 kan werken met andere user-agents en apparaten die de API ondersteunen.
De Presentation API maakt, samen met de Remote Playback API , deel uit van de inspanning 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 profiteren van de reeks apparaten die online komen (inclusief aangesloten beeldschermen waarop een user-agent draait) om een rijke verscheidenheid aan toepassingen mogelijk te maken met een 'controle'-apparaat en een 'display'-apparaat.
Wij houden u op de hoogte van de voortgang van de implementatie.
Laat het ons in de tussentijd weten als u bugs vindt of functieverzoeken heeft: crbug.com/new .