Con la reciente introducción de la API de Pantalla en pantalla de documentos (y también antes), los desarrolladores web están cada vez más interesados en poder abrir automáticamente una ventana de pantalla en pantalla cuando el usuario cambia el enfoque de la pestaña actual. Esto es especialmente útil para las aplicaciones web de videoconferencia, donde permite a los presentadores ver e interactuar con los participantes en tiempo real mientras presentan un documento o usan otras pestañas o ventanas.
Ingresa al modo de pantalla en pantalla automáticamente
Para admitir estos casos de uso de videoconferencia, desde Chrome 120, las apps web para computadoras pueden ingresar automáticamente al modo de pantalla en pantalla, con algunas restricciones para garantizar una experiencia del usuario positiva. Una app web solo es apta para la función de pantalla en pantalla automática si cumple con todas las condiciones siguientes:
Registró un controlador de acción de sesión multimedia para la acción
"enterpictureinpicture".Está capturando activamente la cámara o el micrófono a través de getUserMedia.
El usuario habilita el modo de “pantalla en pantalla automática” mediante una configuración del navegador habilitada de forma predeterminada.
Cuando una app web es apta, la función de devolución de llamada del controlador de acciones de la sesión multimedia para la acción "enterpictureinpicture" se activa cuando el usuario cambia el enfoque a otra pestaña, lo que le permite abrir una ventana de pantalla en pantalla sin un gesto del usuario.
Los desarrolladores web pueden usar la API de pantalla en pantalla para <video> para abrir una ventana de pantalla en pantalla desde un elemento de <video> HTML o la API de pantalla en pantalla de documentos para abrir una ventana siempre en pantalla a fin de completar con contenido HTML arbitrario. La ventana de pantalla en pantalla no se enfoca cuando se abre y se cierra automáticamente cuando la visibilidad de la página vuelve a ser visible.
En el siguiente ejemplo, se muestra cómo solicitar acceso a la cámara del usuario. Luego, registra de forma segura un controlador de acciones de sesión multimedia para la acción "enterpictureinpicture" con una función de devolución de llamada que abra una ventana de pantalla en pantalla. Esta ventana contiene la transmisión de video por Internet de la cámara del usuario con la API de pantalla en pantalla para <video>.
const video = document.querySelector("video");
// Request access to the user's camera.
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
video.srcObject = stream;
});
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Prueba el ejemplo de Sesión multimedia para videoconferencias.
Ingresa a la función pantalla en pantalla desde el control multimedia del navegador
La acción de sesión multimedia "enterpictureinpicture" también es útil cuando el usuario quiere ingresar al modo de pantalla en pantalla con el control multimedia de la IU del navegador Chrome.
Cuando no se está reproduciendo un elemento <video> HTML, sino solo audio, si registras el controlador de acciones de la sesión multimedia de "enterpictureinpicture", se le indicará al navegador que la app web sabe cómo controlarlo y que abrirá una ventana de pantalla en pantalla.
También resulta útil cuando la app web quiere usar la API de Document Picture-in-Picture para abrir una ventana de pantalla en pantalla en lugar de permitir que el navegador la maneje con la API de pantalla en pantalla para <video>.
En el siguiente ejemplo, se muestra cómo registrar de forma segura un controlador de acciones de sesión multimedia para la acción "enterpictureinpicture". La función de devolución de llamada abre una ventana de pantalla en pantalla con la API de Document Picture-in-Picture cuando el usuario ingresa a esta función con el control multimedia de la IU del navegador Chrome.
try {
// Use the Document Picture-in-Picture API when entering
// picture-in-picture from browser media control.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
const pipWindow = await documentPictureInPicture.requestWindow();
// Populate HTML content and handle closing window...
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Prueba la demostración del reproductor VideoJS o la muestra de sesión multimedia de video de la API de Document Picture-in-Picture.
Interactúa y comparte comentarios
Si tienes algún comentario o problema, puedes compartirlo en crbug.com.
Recursos
Agradecimientos
Gracias a Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato y Rachel Andrew por sus opiniones.