Chrome 66 permet aux pages Web d'utiliser un affichage secondaire via le API Presentation et pour contrôler son contenu via l'interface Presentation API Receiver.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Contexte
Jusqu'à présent, les développeurs Web pouvaient créer des expériences dans lesquelles un utilisateur verrait des informations contenu différent dans Chrome de celui affiché sur une télécommande s'affichent tout en ayant la possibilité de les contrôler localement. Exemples gérer la file d'attente de lecture sur youtube.com pendant la lecture des vidéos sur le téléviseur ; ou affichage d'une bobine de diapositives avec les commentaires du présentateur sur un ordinateur portable alors que le mode plein écran s'affiche dans une session Hangout.
Il existe cependant des scénarios dans lesquels les utilisateurs peuvent simplement souhaiter présenter du contenu sur un deuxième écran connecté. Par exemple, imaginez qu'un utilisateur se trouve dans une salle de conférence équipé d’un projecteur auquel il est connecté via un câble HDMI. Plutôt que de dupliquer la présentation sur un point de terminaison distant, l'utilisateur souhaite vraiment que les diapositives soient affichées en plein écran sur le projecteur, en laissant écran d'ordinateur portable disponible pour les commentaires du présentateur et les commandes des diapositives. Bien que le site pourrait appuyer cette affirmation de façon très rudimentaire (par exemple, en proposant un nouveau que l'utilisateur doit ensuite faire glisser manuellement vers l'écran secondaire s'afficher en plein écran), elle est fastidieuse et offre une entre la présentation locale et la présentation à distance.
Présenter une page
Voyons comment utiliser l'API Presentation pour présenter une page Web sur votre écran secondaire connecté. Le résultat final est disponible à l'adresse https://googlechrome.github.io/samples/presentation-api/.
Tout d'abord, nous allons créer un objet PresentationRequest qui contiendra les
URL à afficher sur l'écran secondaire joint.
const presentationRequest = new PresentationRequest('receiver.html');
In this article, I won’t cover use cases where the parameter passed to
`PresentationRequest` can be an array like `['cast://foo’, 'apple://foo',
'https://example.com']` as this is not relevant there.
We can now monitor presentation display availability and toggle a "Present"
button visibility based on presentation displays availability. Note that we can
also decide to always show this button.
<aside class="caution"><b>Caution:</b> The browser may use more energy while the <code>availability</code> object is alive
and actively listening for presentation display availability changes. Please
use it with caution in order to save energy on mobile.</aside>
```js
presentationRequest.getAvailability()
.then(availability => {
console.log('Available presentation displays: ' + availability.value);
availability.addEventListener('change', function() {
console.log('> Available presentation displays: ' + availability.value);
});
})
.catch(error => {
console.log('Presentation availability not supported, ' + error.name + ': ' +
error.message);
});
L'affichage d'une invite d'affichage de présentation nécessite un geste de l'utilisateur, comme un clic
sur un bouton. Nous appelons donc presentationRequest.start() lors d'un clic sur un bouton et
attendre la résolution de la promesse une fois que l'utilisateur a sélectionné une présentation
(par exemple, un écran connecté secondaire dans notre cas d'utilisation).
function onPresentButtonClick() {
presentationRequest.start()
.then(connection => {
console.log('Connected to ' + connection.url + ', id: ' + connection.id);
})
.catch(error => {
console.log(error);
});
}
La liste présentée à l'utilisateur peut également inclure des points de terminaison distants tels que les appareils Chromecast si vous êtes connecté à un réseau qui les annonce. Notez que les écrans en miroir ne figurent pas dans la liste. Consultez la page http://crbug.com/840466.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Lorsque la promesse est résolue, la page Web à l'URL de l'objet PresentationRequest est
à l'écran choisi. Et voilà!
Nous pouvons maintenant aller plus loin et surveiller et "terminer" événements tels qu'ils sont
ci-dessous. Notez qu'il est possible de se reconnecter à un réseau "fermé"
presentationConnection avec presentationRequest.reconnect(presentationId)
où presentationId est l'ID de l'objet presentationRequest précédent.
function onCloseButtonClick() {
// Disconnect presentation connection but will allow reconnection.
presentationConnection.close();
}
presentationConnection.addEventListener('close', function() {
console.log('Connection closed.');
});
function onTerminateButtonClick() {
// Stop presentation connection for good.
presentationConnection.terminate();
}
presentationConnection.addEventListener('terminate', function() {
console.log('Connection terminated.');
});
Communiquer avec la page
Vous vous demandez peut-être comment transmettre des messages
la page de la manette (celle que nous venons de créer) et la page du récepteur (celle que
transmis à l'objet PresentationRequest) ?
Commençons par récupérer les connexions existantes sur la page du récepteur avec
navigator.presentation.receiver.connectionList et écouter les messages entrants
comme indiqué ci-dessous.
// Receiver page
navigator.presentation.receiver.connectionList
.then(list => {
list.connections.map(connection => addConnection(connection));
list.addEventListener('connectionavailable', function(event) {
addConnection(event.connection);
});
});
function addConnection(connection) {
connection.addEventListener('message', function(event) {
console.log('Message: ' + event.data);
connection.send('Hey controller! I just received a message.');
});
connection.addEventListener('close', function(event) {
console.log('Connection closed!', event.reason);
});
}
Lorsqu'une connexion reçoit un message, un "message" est déclenché que vous pouvez écouter.
Le message peut être une chaîne, un Blob, un ArrayBuffer ou un ArrayBufferView.
Pour l'envoyer, il vous suffit d'appeler connection.send(message) à partir du
la page de la manette ou la page du récepteur.
// Controller page
function onSendMessageButtonClick() {
presentationConnection.send('Hello!');
}
presentationConnection.addEventListener('message', function(event) {
console.log('I just received ' + event.data + ' from the receiver.');
});
Jouez avec l'extrait à https://googlechrome.github.io/samples/presentation-api/ pour vous faire une idée de son fonctionnement. Je suis sûr que vous apprécierez cet événement autant que moi.
Exemples et démonstrations
Consultez l'exemple Chrome officiel que nous avons utilisé pour cet article.
Je vous recommande également la démonstration interactive Photowall. Cette application Web permet plusieurs contrôleurs pour présenter un diaporama de façon collaborative sur un écran de présentation. Le code est disponible à l'adresse https://github.com/GoogleChromeLabs/presentation-api-samples.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Encore une chose
Chrome dispose d'un bouton "Caster" le menu du navigateur que les utilisateurs peuvent appeler à tout moment
sur votre site Web. Si vous souhaitez contrôler la présentation par défaut de ce menu, puis
attribuer navigator.presentation.defaultRequest à un
Objet presentationRequest créé précédemment.
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
Conseils de développement
Pour inspecter la page du récepteur et la déboguer, accédez à
chrome://inspect, sélectionnez "Autre", puis cliquez sur le lien "Inspecter" à côté de
l'URL actuellement présentée.
<ph type="x-smartling-placeholder">Vous pouvez également consulter la chrome://media-router-internals interne
pour présenter les processus internes de découverte et de disponibilité.
Étape suivante
À partir de Chrome 66, les plates-formes ChromeOS, Linux et Windows sont compatibles. Mac l'assistance sera disponible ultérieurement.
Ressources
- État des fonctionnalités Chrome: https://www.chromestatus.com/features#presentation%20api
- Bugs d'implémentation: https://crbug.com/?q=component:Blink>PresentationAPI
- Spécification de l'API Presentation: https://w3c.github.io/presentation-api/
- Problèmes de spécifications: https://github.com/w3c/presentation-api/issues