Presentare pagine web su display secondari collegati

François Beaufort
François Beaufort
GitHub

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.

1/2. L'utente sceglie un display secondario collegato
1/2. L'utente sceglie un display secondario collegato
2/2. Viene visualizzata automaticamente una pagina web sul display selezionato in precedenza
2/2. Viene visualizzata automaticamente una pagina web sul display selezionato in precedenza

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.

Selettore di visualizzazione della presentazione
Selettore visualizzazione presentazione

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.

Screenshot della demo del Photowall
Foto di José Luis Mieza / CC BY-NC-SA 2.0

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.

Ispeziona le pagine di destinazione della presentazione
Esamina le pagine destinatario della presentazione

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