Chrome 66 consente alle pagine web di utilizzare un display secondario collegato tramite la API Presentation e di controllarne i contenuti tramite l'API Presentation dell'API ricevitore.
Sfondo
Finora gli sviluppatori web potevano creare esperienze in cui un utente vedeva un'esperienza contenuti in Chrome diversi da quelli che visualizzerebbero su un telecomando ma puoi comunque controllare l'esperienza a livello locale. Esempi puoi gestire una coda di riproduzione su youtube.com durante la riproduzione dei video sulla TV, o vedere una slide con le note del relatore su un laptop mentre la modalità viene mostrata in una sessione Hangout.
Esistono però degli scenari in cui gli utenti potrebbero semplicemente voler presentare i contenuti un secondo display collegato. Ad esempio, immagina un utente in una sala conferenze dotati di un proiettore a cui sono collegati 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 schermo di un laptop disponibile per le note del relatore e il controllo delle slide. Mentre il sito potrebbe supportare questa funzionalità in modo molto rudimentale (ad es. aprire una nuova che l'utente deve trascinare manualmente sul display secondario e ingrandire a schermo intero), è ingombrante e fornisce una esperienza tra presentazione locale e remota.
Presentazione di una pagina
Esaminiamo in dettaglio come utilizzare l'API Presentation per presentare una pagina web sul display secondario collegato. Il risultato finale è disponibile all'indirizzo https://googlechrome.github.io/samples/presentation-api/.
Per prima cosa, creeremo un nuovo oggetto PresentationRequest che conterrà
URL che vogliamo 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 presentationRequest.start() facendo clic su un pulsante
attendere la risoluzione della promessa una volta che l'utente ha selezionato una presentazione
display (ad esempio, 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 può includere anche endpoint remoti come I dispositivi Chromecast, se collegati 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
presentati al display scelto. Evviva!
Ora possiamo andare oltre e monitorare la chiusura e "termina" eventi come mostrato
di seguito. Tieni presente che è possibile riconnettersi a un account "chiuso"
presentationConnection 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
Stai pensando: va bene, ma come faccio a passare messaggi tra
pagina del controller (quella che abbiamo appena creato) e la pagina di destinazione (quella
che abbiamo passato all'oggetto PresentationRequest)?
Innanzitutto, recupera le connessioni esistenti nella pagina destinatario con
navigator.presentation.receiver.connectionList e ascolta la musica in arrivo
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 attiva un "messaggio" dell'evento
che puoi ascoltare.
Il messaggio può essere una stringa, un BLOB, un ArrayBuffer o un ArraybuView.
Per inviare il messaggio è sufficiente chiamare connection.send(message) dal
la pagina del controller o la pagina di destinazione.
// Controller page
function onSendMessageButtonClick() {
presentationConnection.send('Hello!');
}
presentationConnection.addEventListener('message', function(event) {
console.log('I just received ' + event.data + ' from the receiver.');
});
Riproduci l'anteprima https://googlechrome.github.io/samples/presentation-api/ per avere un'idea 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 più controller su cui presentare in modo collaborativo una presentazione di foto display per una presentazione. Il codice è disponibile all'indirizzo https://github.com/GoogleChromeLabs/presentation-api-samples.
Un'ultima cosa
Chrome dispone della funzionalità "Cast" menu del browser che gli utenti possono richiamare in qualsiasi momento durante la visita a
sito web. Se vuoi controllare la presentazione predefinita di questo menu,
assegna navigator.presentation.defaultRequest a un
Oggetto presentationRequest 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 sezione
chrome://inspect, seleziona "Altro" e fai clic sul link "Controlla" accanto a
l'URL attualmente presentato.
Puoi anche consultare le chrome://media-router-internals interne
pagina per approfondire i processi interni di scoperta/disponibilità.
Passaggi successivi
A partire da Chrome 66, sono supportate le piattaforme ChromeOS, Linux e Windows. Mac l'assistenza sarà disponibile in seguito.
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