Imaginez pouvoir utiliser une application Web depuis votre téléphone pour présenter une présentation sur un projecteur de conférence, ou partager des images, jouer à des jeux ou regarder des vidéos sur un écran de télévision, en utilisant l'application Web mobile comme télécommande.
La dernière version de Chrome sur Android permet aux sites de présenter du contenu sur les appareils Google Cast à l'aide du SDK Web Cast. Vous pouvez donc désormais créer des applications d'envoi Cast à l'aide du SDK Web avec Chrome sur Android ou iOS (ou sur ordinateur avec l'extension), ainsi que des applications qui utilisent le SDK Cast natif pour Android et iOS. (Auparavant, une application d'envoi Google Cast nécessitait l'extension Google Cast pour Chrome. Par conséquent, sur Android, il n'était possible d'interagir avec les appareils Cast qu'à partir d'applications natives.)
Vous trouverez ci-dessous une brève présentation de la création d'une application d'envoi Cast à l'aide du SDK Web. Pour en savoir plus, consultez le Guide de développement d'applications Chrome Sender.
Toutes les pages utilisant 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 de diffusion (assurez-vous d'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 Styled Media Receiver par défaut et non une application Custom Receiver (Récepteur personnalisé) enregistrée, vous pouvez créer un SessionRequest comme suit:
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 votre 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 une session Cast, vous pouvez charger des contenus multimédias pour l'appareil Cast sélectionné et ajouter un écouteur pour les événements de lecture multimédia:
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 variable currentMedia ici 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/mise en 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 ne comporte qu'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 permet de caster des contenus multimédias depuis votre site Web, mais que vous souhaitez désactiver cette fonctionnalité pour que l'interface utilisateur de la diffusion par casting par défaut 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 Web Cast contient des liens vers des exemples d'applications et des informations sur les fonctionnalités Cast, telles que la gestion des sessions, les pistes de texte (pour les sous-titres et les légendes) et les mises à jour d'état.
Pour le moment, vous ne pouvez présenter du contenu à une application réceptrice Cast qu'à l'aide du SDK Web Cast. Toutefois, des travaux sont en cours pour permettre d'utiliser l'API Presentation sans le SDK Cast (sur ordinateur et Android) afin de présenter n'importe quelle page Web à un appareil Cast sans s'enregistrer auprès de Google. Contrairement au SDK Cast réservé à 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, font partie des efforts du Second Screen Working Group visant à permettre aux pages Web d'utiliser un deuxième écran pour afficher du contenu Web.
Ces API exploitent la gamme d'appareils connectés, y compris les écrans connectés qui exécutent un user-agent, pour permettre 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 l'implémentation.
En attendant, n'hésitez pas à nous contacter si vous trouvez des bugs ou si vous avez des demandes de fonctionnalités: crbug.com/new.