Presentare pagine web su display secondari collegati

François Beaufort
François Beaufort
GitHub

Chrome 66 consente alle pagine web di utilizzare un display secondario collegato 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. Una pagina web viene presentata automaticamente sul display scelto in precedenza
2/2. Una pagina web viene presentata automaticamente sul display scelto in precedenza.

Sfondo

Fino a oggi, 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 essendo in grado di controllare l'esperienza localmente. 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.

Esistono però scenari in cui gli utenti potrebbero semplicemente voler presentare i contenuti su un secondo display collegato. Ad esempio, immagina un utente in una sala conferenze con 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. Sebbene l'autore del sito possa supportare questa funzionalità in modo molto rudimentale (ad es. aprendo una nuova finestra che l'utente deve trascinare manualmente sul display secondario e massimizzare per visualizzarla a schermo intero), questa operazione è complicata 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 che vogliamo presentare sul display secondario collegato.

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);
  });

La visualizzazione di una richiesta di visualizzazione della presentazione richiede un gesto dell'utente, ad esempio un clic su un pulsante. Chiamiamo presentationRequest.start() al clic di un pulsante e aspettiamo che la promessa venga risolta quando 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 di visualizzazione della presentazione

Quando la promessa viene risolta, la pagina web all'URL dell'oggetto PresentationRequest viene presentata al display scelto. Et voilà!

Ora possiamo fare un passo avanti e monitorare gli eventi "close" e "terminate" come mostrato di seguito. Tieni presente che è possibile ricollegarsi 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

Ora ti starai chiedendo, è bello, ma come faccio a passare i messaggi tra la mia pagina di controllo (quella che abbiamo appena creato) e la pagina del destinatario (quella che abbiamo passato all'oggetto PresentationRequest)?

Per prima cosa, recuperiamo le connessioni esistenti nella pagina del ricevitore connavigator.presentation.receiver.connectionList e ascoltiamo le connessioni 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 evento "message" che puoi ascoltare. Il messaggio può essere una stringa, un BLOB, un ArrayBuffer o un ArraybuView. Per inviarlo, è sufficiente 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.');
});

Prova 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.

Samples 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 collaborazione una presentazione di foto su un display per le presentazioni. 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 mentre visitano un sito web. Se vuoi controllare la presentazione predefinita di questo menu, assegnate 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 i dev

Per ispezionare la pagina del destinatario ed eseguire il debug, vai alla pagina internachrome://inspect, seleziona "Altro" e fai clic sul link "Ispeziona" accanto all'URL attualmente visualizzato.

Esaminare le pagine del ricevitore della presentazione
Esamina le pagine dei destinatari della presentazione

Ti consigliamo inoltre di consultare la pagina chrome://media-router-internals interna per approfondire le procedure di rilevamento/disponibilità interne.

Passaggi successivi

A partire da Chrome 66, sono supportate le piattaforme ChromeOS, Linux e Windows. Il supporto per Mac sarà disponibile in un secondo momento.

Risorse