Con la introducción reciente de la API de Document Picture-in-Picture (e incluso 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 su pestaña actual. Esto es especialmente útil para las apps web de videoconferencias, ya que permite que los presentadores vean a los participantes y, además, interactúen con ellos en tiempo real mientras presentan un documento o usan otras pestañas o ventanas.
Ingresar automáticamente al modo de pantalla en pantalla
Para admitir estos casos de uso de videoconferencias, a partir de 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 pantalla en pantalla automática si cumple con todas las condiciones que se indican a continuación:
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 con getUserMedia.
El usuario permite la "pantalla en pantalla automática" a través de un parámetro de configuración del navegador que está habilitado de forma predeterminada.
Cuando una app web es apta, se activa la función de devolución de llamada del controlador de acciones de la sesión multimedia para la acción "enterpictureinpicture" cuando el usuario cambia el foco 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 <video> de HTML o la API de pantalla en pantalla de documentos para abrir una ventana siempre visible que se complete 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 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 la muestra de sesión multimedia de videoconferencia.
Cómo ingresar al modo de 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 pantalla en pantalla con el control multimedia de la IU del navegador Chrome.
Cuando no se reproduce ningún elemento <video> de HTML, sino solo audio, registrar el controlador de acciones de la sesión multimedia para "enterpictureinpicture" le indica al navegador que la app web sabe cómo controlarlo y se encargará de abrir una ventana de pantalla en pantalla por sí misma.
También es ú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 controle con la API de Picture-in-Picture 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 la pantalla en pantalla con el control multimedia en 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 de VideoJS de la API de Document Picture-in-Picture o la muestra de sesión de contenido multimedia de video.
Interactúa y envía comentarios
Si tienes comentarios o tienes algún problema, puedes compartirlos en crbug.com.
Recursos
Reconocimientos
Agradecemos a Tommy Steimel, Ryan Flores, Shimi Rahim, Frank Liberato y Rachel Andrew por sus revisiones.