Imaginez pouvoir utiliser une application Web sur votre téléphone pour présenter une présentation à un projecteur de conférence (ou partager des images, jouer à des jeux ou regarder des vidéos sur l'écran d'un téléviseur) en utilisant l'application Web mobile comme manette.
La dernière version de Chrome sur Android permet aux sites de présenter du contenu sur des appareils Google Cast à l'aide du SDK Web Cast. Autrement dit, vous pouvez désormais créer des applications émettrices Cast à l'aide du SDK Web avec Chrome pour Android ou iOS (ou sur ordinateur avec l'extension). Vous pouvez aussi créer des applications qui utilisent le SDK Cast natif pour Android et iOS. (Auparavant, une application émettrice Google Cast nécessitait l'extension Chrome Google Cast. Sous Android, il n'était donc possible d'interagir qu'avec les appareils Cast à partir d'applications natives.
Vous trouverez ci-dessous une brève présentation de la création d'une application émettrice Cast à l'aide du SDK Web. Des informations plus complètes sont disponibles dans le guide de développement de l'application pour les expéditeurs Chrome.
Toutes les pages qui utilisent Cast doivent inclure la bibliothèque Cast:
<script
type="text/javascript"
src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>
Ajoutez un rappel pour gérer la disponibilité de l'API et initialiser la session Cast (en veillant à ajouter le gestionnaire avant le chargement de l'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);
}
Si vous utilisez l'application de récepteur multimédia stylisé par défaut et non une application de récepteur personnalisé enregistrée et personnalisée, vous pouvez créer un SessionRequest comme ceci:
var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
DEFAULT_MEDIA_RECEIVER_APP_ID);
Le rappel receiverListener ci-dessus est exécuté lorsqu'un ou plusieurs appareils deviennent disponibles:
function receiverListener(e) {
if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
// update UI
}
}
Lancez une session Cast lorsque l'utilisateur clique sur l'icône Cast, comme l'exigent les Consignes relatives à l'expérience utilisateur:
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
Un sélecteur d'appareil s'affiche:
La boîte de dialogue Détails de l'itinéraire s'affiche lorsque la page est déjà connectée et appelle requestSession():
Une fois que vous avez lancé une session de diffusion, vous pouvez charger des contenus multimédias pour l'appareil Cast sélectionné et ajouter un écouteur pour les événements de lecture de contenus multimédias:
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);
}
Ici, la variable currentMedia est un objet chrome.cast.media.Media, qui peut être utilisé pour contrôler la lecture:
function playMedia() {
currentMedia.play(null, success, error);
}
// ...
Une notification de lecture/pause s'affiche lorsque du contenu multimédia est en cours de lecture:
Si aucun contenu multimédia n'est en cours de lecture, la notification comporte uniquement un bouton d'arrêt. Pour arrêter la diffusion:
Le rappel sessionListener pour chrome.cast.ApiConfig() (voir ci-dessus) permet à votre application de rejoindre ou de gérer une session Cast existante:
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Si Chrome sur Android autorise la diffusion de contenus multimédias depuis votre site Web, mais que vous souhaitez désactiver cette fonctionnalité afin que l'interface utilisateur par défaut de diffusion n'interfère pas avec la vôtre, utilisez l'attribut disableRemotePlayback, disponible dans Chrome 49 et versions ultérieures:
<video disableRemotePlayback src="..."></video>
Le guide du SDK Cast pour le Web contient des liens vers des exemples d'applications, ainsi que des informations sur les fonctionnalités Cast, telles que la gestion des sessions, les pistes de texte (pour les sous-titres) et les mises à jour de l'état.
À l'heure actuelle, vous ne pouvez présenter du contenu dans une application réceptrice Cast qu'à l'aide du SDK Web Cast. Toutefois, nous travaillons actuellement à l'activation de l'API Slides afin de pouvoir l'utiliser sans le SDK Cast (sur ordinateur et Android) afin de présenter une page Web sur un appareil Cast sans enregistrement auprès de Google. Contrairement au SDK Cast disponible uniquement pour Chrome, l'utilisation de l'API standard permet à la page de fonctionner avec d'autres user-agents et appareils compatibles avec l'API.
L'API Presentation, ainsi que l'API Remote Playback, fait partie de l'initiative Second Screen Working Group visant à permettre aux pages Web d'utiliser des deuxièmes écrans pour afficher du contenu Web.
Ces API exploitent la gamme d'appareils mis en ligne, y compris les écrans connectés qui exécutent un user-agent, pour activer une grande variété d'applications avec un appareil de contrôle et un appareil d'affichage.
Nous vous tiendrons informé de l'avancement de la mise en œuvre.
En attendant, n'hésitez pas à nous contacter si vous détectez des bugs ou si vous souhaitez demander des fonctionnalités: crbug.com/new.