Presentar las páginas web en pantallas secundarias adjuntas

François Beaufort
François Beaufort
GitHub

Chrome 66 permite que las páginas web usen una pantalla secundaria adjunta a través de la API de Presentation y controlar el contenido a través de la API de Presentation API de Receiver.

2/1. El usuario elige una pantalla secundaria conectada.
2/1. El usuario elige una pantalla secundaria conectada.
2/2. Se presenta automáticamente una página web en la pantalla seleccionada anteriormente
. 2/2. Se presenta automáticamente una página web en la pantalla seleccionada anteriormente

Información general

Hasta ahora, los desarrolladores web podían crear experiencias en las que los usuarios vieran contenido local contenido en Chrome diferente del que verían en un control remoto pantalla y, al mismo tiempo, poder controlar esa experiencia a nivel local. Ejemplos administrar una fila de reproducción en youtube.com mientras los videos se reproducen en la TV, o ver un corto de diapositivas con notas del orador en una laptop mientras la pantalla completa se muestra en una sesión de Hangouts.

Sin embargo, hay situaciones en las que los usuarios pueden simplemente presentar contenido a una segunda pantalla conectada. Por ejemplo, imagina a un usuario en una sala de conferencias tienen un proyector al que se conectan mediante un cable HDMI. En vez de duplicar la presentación en un extremo remoto, el usuario quiere presentar las diapositivas en pantalla completa en el proyector y dejar la pantalla de laptop disponible para las notas del orador y el control deslizante. Si bien el sitio de desarrollo podría respaldar esto de una manera muy rudimentaria (por ejemplo, mostrar una nueva , que el usuario tiene que arrastrar manualmente a la pantalla secundaria y maximizar a pantalla completa), es engorroso y proporciona una experiencia entre la presentación local y remota.

Cómo presentar una página

Te explicaré cómo usar la API de Presentation para presentar una página web. en la pantalla secundaria conectada. El resultado final está disponible en https://googlechrome.github.io/samples/presentation-api/.

Primero, crearemos un nuevo objeto PresentationRequest que contendrá los URL que queremos presentar en la pantalla secundaria adjunta.

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

Para mostrar un mensaje en una presentación, se requiere un gesto del usuario, como un clic en un botón. Así que llamemos a presentationRequest.start() con un clic en un botón Esperar a que se resuelva la promesa una vez que el usuario haya seleccionado una presentación pantalla (p. ej., una pantalla secundaria adjunta en nuestro caso de uso).

function onPresentButtonClick() {
  presentationRequest.start()
  .then(connection => {
    console.log('Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log(error);
  });
}

La lista presentada al usuario también puede incluir endpoints remotos como Dispositivos Chromecast si estás conectado a una red que los anuncia. Ten en cuenta que las pantallas duplicadas no están en la lista. Consulta http://crbug.com/840466.

Selector de exhibidor para presentación
Selector de exhibidor para presentación
.

Cuando se resuelve la promesa, la página web en la URL del objeto PresentationRequest se presentarse en la pantalla elegida. ¡Y listo!

Ahora podemos seguir explorando el área "cerrar" y "terminate" eventos, como se muestra a continuación. Ten en cuenta que es posible volver a conectarse a una red "cerrada" presentationConnection con presentationRequest.reconnect(presentationId) donde presentationId es el ID del objeto presentationRequest anterior.

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

Cómo comunicarse con la página

Ahora piensas que es lindo, pero ¿cómo puedo pasar mensajes la página del controlador (la que acabamos de crear) y la del receptor (la que acabamos de crear) que pasamos al objeto PresentationRequest)?

Primero, recuperemos las conexiones existentes en la página del receptor con navigator.presentation.receiver.connectionList y escuchar los mensajes entrantes conexiones de red, como se muestra a continuación.

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

Cuando una conexión recibe un mensaje, se activa un “mensaje”. evento que puedes escuchar. El mensaje puede ser una string, un Blob, un ArrayBuffer o una ArrayBufferView. Para enviarlo, solo tienes que llamar a connection.send(message) desde el la página del controlador o la del receptor.

// Controller page

function onSendMessageButtonClick() {
  presentationConnection.send('Hello!');
}

presentationConnection.addEventListener('message', function(event) {
  console.log('I just received ' + event.data + ' from the receiver.');
});

Juega con la muestra en https://googlechrome.github.io/samples/presentation-api/ para tener una idea de cómo funciona. Estoy seguro de que disfrutarás este contenido tanto como yo.

Ejemplos y demostraciones

Echa un vistazo a la muestra oficial de Chrome que usamos en este artículo.

También te recomiendo la demostración interactiva de Photowall. Esta aplicación web permite múltiples controles para presentar de forma colaborativa una presentación de diapositivas de fotos en una pantalla de presentación. El código está disponible en https://github.com/GoogleChromeLabs/presentation-api-samples.

Captura de pantalla de demostración de Photowall
Foto de José Luis Mieza / CC BY-NC-SA 2.0

Una cosa más

Chrome tiene una transmisión menú del navegador que los usuarios pueden invocar en cualquier momento mientras visitan un sitio web. Si quieres controlar la presentación predeterminada de este menú, puedes asignar navigator.presentation.defaultRequest a una campaña presentationRequest objeto creado antes.

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

Sugerencias para desarrolladores

Para inspeccionar la página del receptor y depurarla, ve a la chrome://inspect, selecciona "Otro" y haz clic en el vínculo "Inspeccionar" junto a la URL presentada actualmente.

Inspecciona páginas de receptor de presentación
Inspecciona páginas de receptor de presentación
.

También puedes consultar el chrome://media-router-internals interno para conocer los procesos internos de descubrimiento y disponibilidad.

¿Qué sigue?

A partir de Chrome 66, se admiten las plataformas ChromeOS, Linux y Windows. Mac asistencia vendrá más adelante.

Recursos