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.](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/12-user-picks-secondar-03beeb097e67e.jpg?authuser=7&hl=es-419)
![2/2. Se presenta automáticamente una página web en la pantalla seleccionada anteriormente](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/22-web-page-is-automat-5dab3e95502c3.jpg?authuser=7&hl=es-419)
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](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/presentation-display-pick-6b14dbd5ed08c.png?authuser=7&hl=es-419)
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](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/photowall-demo-screenshot-10527faacc264.jpg?authuser=7&hl=es-419)
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](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/inspect-presentation-rece-260dbbca83182.png?authuser=7&hl=es-419)
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
- Estado de las funciones de Chrome: https://www.chromestatus.com/features#presentation%20api
- Errores de implementación: https://crbug.com/?q=component:Blink>PresentationAPI
- Especificaciones de la API de presentación: https://w3c.github.io/presentation-api/
- Problemas de especificaciones: https://github.com/w3c/presentation-api/issues