Chrome 66 consente alle pagine web di utilizzare un display collegato secondario tramite l'API Presentation e di controllarne i contenuti tramite l'API Presentation Receiver.
Contesto
Finora gli sviluppatori web potevano creare esperienze in cui un utente visualizzava contenuti locali in Chrome diversi da quelli che vedeva su un display remoto, pur avendo la possibilità di controllare l'esperienza a livello locale. Alcuni esempi sono la gestione di una coda di riproduzione su youtube.com durante la riproduzione dei video sulla TV o la visualizzazione di una slide con le note del relatore su un laptop mentre la presentazione a schermo intero viene visualizzata in una sessione di Hangout.
In alcuni casi, però, gli utenti potrebbero voler semplicemente presentare i contenuti su un secondo display collegato. Ad esempio, immagina un utente in una sala conferenze dotata di un proiettore a cui è collegato tramite un cavo HDMI. Anziché eseguire il mirroring della presentazione su un endpoint remoto, l'utente vuole davvero presentare le slide a schermo intero sul proiettore, lasciando lo schermo del laptop disponibile per le note del relatore e il controllo delle slide. Anche se l'autore del sito potrebbe supportare questa funzionalità in modo molto rudimentale (ad es. aprendo una nuova finestra, che l'utente deve quindi trascinare manualmente sul display secondario e ingrandirla a schermo intero), è complessa e offre un'esperienza incoerente tra la presentazione locale e quella remota.
Presentazione di una pagina
Esaminiamo come utilizzare l'API Presentation per presentare una pagina web sul display collegato secondario. Il risultato finale è disponibile all'indirizzo https://googlechrome.github.io/samples/presentation-api/.
Per prima cosa, creeremo un nuovo oggetto PresentationRequest
che conterrà l'URL da presentare sul display collegato secondario.
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);
});
Per mostrare la richiesta di visualizzazione di una presentazione è necessario un gesto dell'utente, ad esempio un clic su un pulsante. Chiamiamo quindi presentationRequest.start()
con un clic su un pulsante e attendiamo che la promessa venga risolta dopo che l'utente ha selezionato un display per la presentazione (ad es. un display secondario collegato nel nostro caso d'uso).
function onPresentButtonClick() {
presentationRequest.start()
.then(connection => {
console.log('Connected to ' + connection.url + ', id: ' + connection.id);
})
.catch(error => {
console.log(error);
});
}
L'elenco presentato all'utente potrebbe includere anche endpoint remoti come i dispositivi Chromecast, se connessi a una rete che li pubblicizza. Tieni presente che i display con mirroring non sono presenti nell'elenco. Visita la pagina http://crbug.com/840466.
Una volta risolta la promessa, la pagina web all'URL dell'oggetto PresentationRequest
viene
presentata al display scelto. Evviva!
Ora possiamo andare oltre e monitorare gli eventi di "chiusura" e "chiusura" come mostrato di seguito. Tieni presente che è possibile riconnettersi a un presentationConnection
"chiuso" con presentationRequest.reconnect(presentationId)
, dove presentationId
è l'ID dell'oggetto presentationRequest
precedente.
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.');
});
Comunicare con la pagina
Hai pensato: va bene, ma come faccio a passare messaggi tra la mia
pagina controller (quella che abbiamo appena creato) e la pagina destinatario (quella
che abbiamo passato all'oggetto PresentationRequest
)?
Innanzitutto, recupera le connessioni esistenti nella pagina del destinatario con navigator.presentation.receiver.connectionList
e ascolta le connessioni in entrata come mostrato di seguito.
// 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);
});
}
Una connessione che riceve un messaggio genera un evento "messaggio" che puoi ascoltare.
Il messaggio può essere una stringa, un BLOB, un ArrayBuffer o un ArraybuView.
Per inviarlo è semplice chiamare connection.send(message)
dalla
pagina del controller o dalla pagina del destinatario.
// Controller page
function onSendMessageButtonClick() {
presentationConnection.send('Hello!');
}
presentationConnection.addEventListener('message', function(event) {
console.log('I just received ' + event.data + ' from the receiver.');
});
Guarda l'esempio all'indirizzo https://googlechrome.github.io/samples/presentation-api/ per farti un'idea di come funziona. Sicuramente ti piacerà tanto quanto piace a me.
Esempi e demo
Dai un'occhiata all'esempio ufficiale di Chrome che abbiamo usato per questo articolo.
Ti consiglio anche la demo interattiva di Photowall. Questa app web consente a più controller di presentare in modo collaborativo una presentazione di foto sul display di una presentazione. Il codice è disponibile all'indirizzo https://github.com/GoogleChromeLabs/presentation-api-samples.
Un'ultima cosa
Chrome ha un menu del browser "Trasmetti" che gli utenti possono richiamare in qualsiasi momento quando visitano un sito web. Se vuoi controllare la presentazione predefinita per questo menu, assegna navigator.presentation.defaultRequest
a un oggetto presentationRequest
personalizzato creato in precedenza.
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
Suggerimenti per gli sviluppatori
Per esaminare la pagina di destinazione ed eseguirne il debug, vai alla pagina chrome://inspect
interna, seleziona "Altro" e fai clic sul link "Controlla" accanto all'URL attualmente presentato.
Puoi anche consultare la pagina interna di chrome://media-router-internals
per approfondire i processi interni di rilevamento/disponibilità.
Passaggi successivi
A partire da Chrome 66, sono supportate le piattaforme ChromeOS, Linux e Windows. Il supporto per Mac verrà introdotto più tardi.
Risorse
- Stato delle funzionalità di Chrome: https://www.chromestatus.com/features#presentation%20api
- Bug di implementazione: https://crbug.com/?q=component:Blink>PresentationAPI
- Specifiche dell'API Presentation: https://w3c.github.io/presentation-api/
- Problemi con le specifiche: https://github.com/w3c/presentation-api/issues