Ya es posible compartir pestañas, ventanas y pantallas en la plataforma web con la API de Screen Capture. En resumen, getDisplayMedia() le permite al usuario seleccionar una pantalla o parte de ella (como una ventana) para capturarla como una transmisión de contenido multimedia. Esta transmisión puede grabarse o compartirse con otras personas a través de la red. En este artículo, se presentan algunos cambios recientes en la API para preservar mejor la privacidad y evitar el uso compartido accidental de información personal.
A continuación, se incluye una lista de controles que puedes usar para compartir la pantalla que preserve la privacidad:
- La opción
displaySurfacepuede indicar que la app web prefiere ofrecer un tipo de superficie de visualización específico (pestañas, ventanas o pantallas). - La opción
monitorTypeSurfacesse puede usar para evitar que el usuario comparta una pantalla completa. - La opción
surfaceSwitchingindica si Chrome debe permitir que el usuario cambie dinámicamente entre las pestañas compartidas. - Se puede usar la opción
selfBrowserSurfacepara evitar que el usuario comparta la pestaña actual. Esto evita el "salón de espejos" efecto. - La opción
systemAudiogarantiza que Chrome solo ofrezca capturas de audio relevantes al usuario.
Cambios en getDisplayMedia()
Se realizaron los siguientes cambios en getDisplayMedia().
La opción displaySurface
Las aplicaciones web con recorridos del usuario especializados, que funcionan mejor cuando compartes una ventana o una pantalla, aún pueden pedirle a Chrome que ofrezca ventanas o pantallas de forma más destacada en el selector de medios. El orden de la oferta no se modificará, pero el panel relevante estará preseleccionado.
Los valores de la opción displaySurface son los siguientes:
"browser"para las pestañas."window"para Windows"monitor"para pantallas.
const stream = await navigator.mediaDevices.getDisplayMedia({
// Pre-select the "Window" pane in the media picker.
video: { displaySurface: "window" },
});
Ten en cuenta que no ofrecemos la opción de seleccionar previamente una ventana o pantalla específica. Esto es así por diseño, ya que eso le daría a la aplicación web demasiada capacidad sobre el usuario.
La opción monitorTypeSurfaces
Para proteger a las empresas contra filtraciones de información privada a causa de errores de los empleados, las aplicaciones web de videoconferencia ahora pueden establecer monitorTypeSurfaces en "exclude". Luego, Chrome excluirá pantallas en el selector de medios. Para incluirla, configúrala como "include". Actualmente, el valor predeterminado de monitorTypeSurfaces es "include", pero se recomienda que las apps web lo establezcan explícitamente, ya que el valor predeterminado podría cambiar en el futuro.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Remove the "Entire Screen" pane in the media picker.
monitorTypeSurfaces: "exclude",
});
Ten en cuenta que un monitorTypeSurfaces: "exclude" explícito es mutuamente excluyente con displaySurface: "monitor".
La opción surfaceSwitching
Una de las razones más mencionadas para compartir toda la pantalla es el deseo de cambiar sin problemas entre compartir diferentes plataformas durante una sesión. Para solucionar esto, Chrome ahora muestra un botón que permite al usuario cambiar dinámicamente entre las diferentes pestañas compartidas. La opción "Compartir esta pestaña en su lugar" ya estaba disponible para las extensiones de Chrome y ahora se puede usar con cualquier aplicación web que llame a getDisplayMedia().
Si surfaceSwitching se establece en "include", el navegador expondrá ese botón. Si se establece en "exclude", no se mostrará ese botón al usuario. Se recomienda que las apps web establezcan un valor explícito, ya que Chrome podría cambiar el valor predeterminado con el tiempo.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Ask Chrome to expose browser-level UX elements that allow
// the user to switch the underlying track at any time,
// initiated by the user and without prior action by the web app.
surfaceSwitching: "include"
});
La opción selfBrowserSurface
En situaciones de videoconferencia, los usuarios suelen cometer el error de seleccionar la pestaña de videoconferencia, lo que genera un "salón de espejos". efecto, aullidos y confusión general.
Para proteger a los usuarios, las apps web de videoconferencia ahora pueden establecer selfBrowserSurface en "exclude". Luego, Chrome excluirá la pestaña actual de la lista de pestañas que se ofrecen al usuario. Para incluirla, configúrala como "include". Actualmente, el valor predeterminado de selfBrowserSurface es "exclude", pero se recomienda que las apps web lo establezcan explícitamente, ya que el valor predeterminado podría cambiar en el futuro.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
selfBrowserSurface: "exclude" // Avoid 🦶🔫.
});
Ten en cuenta que un selfBrowserSurface: "exclude" explícito es mutuamente excluyente con preferCurrentTab: true.
La opción systemAudio
getDisplayMedia() permite capturar audio junto con video. Sin embargo, no todo el audio se crea de la misma manera. Considera usar las aplicaciones web de videoconferencia:
- Si el usuario comparte otra pestaña, también tiene sentido capturar audio.
- El audio del sistema, por otro lado, incluye las grabaciones de audio propio y no se le debe transmitir de vuelta.
En el futuro, es posible que se excluyan algunas fuentes de audio de la captura. Sin embargo, por ahora, las aplicaciones web de videoconferencias a menudo consideran que lo mejor es evitar simplemente la captura de audio del sistema. Antes, esto podía hacerse comprobando qué superficie de visualización eligió el usuario y deteniendo la pista de audio si elegía compartir una pantalla. Sin embargo, esto plantea un pequeño problema, ya que algunos usuarios se confunden cuando marcan explícitamente la casilla de verificación para compartir el audio del sistema y, luego, los participantes remotos les dicen que no hay audio entrante.
Si estableces systemAudio en "exclude", una app web puede evitar confundir a los usuarios con indicadores mixtos. Chrome ofrecerá capturar audio junto a las pestañas y ventanas, pero no junto a las pantallas.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true, // Ask to capture audio; caveat follows.
systemAudio: "exclude" // Do not offer to capture *system* audio.
});
Actualmente, el valor predeterminado de systemAudio es "include", pero se recomienda que las apps web lo establezcan explícitamente, ya que el valor predeterminado podría cambiar en el futuro.
Demostración
Si quieres jugar con estos controles para compartir pantalla, ejecuta la demostración en Glitch. Asegúrate de consultar el código fuente.
Navegadores compatibles
displaySurface,surfaceSwitchingyselfBrowserSurfaceestán disponibles en Chrome 107 para computadoras de escritorio.
Navegadores compatibles
- 105
- 105
- x
- x
systemAudioestá disponible en Chrome 105 para computadoras de escritorio.
Navegadores compatibles
- 119
- 119
- x
- x
monitorTypeSurfacesestá disponible en Chrome 119 para computadoras de escritorio.
Comentarios
El equipo de Chrome y la comunidad de estándares de la Web quieren conocer tu experiencia con esos controles de uso compartido de pantalla.
Cuéntanos sobre el diseño
¿Tienen esos controles de uso compartido de la pantalla que no funcionen como esperabas? ¿O faltan métodos o propiedades que necesites para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad?
- Informa un problema de especificaciones en el repositorio de GitHub o agrega tus ideas sobre un problema existente.
¿Tiene problemas con la implementación?
¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de la especificación?
- Informa un error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedas e instrucciones sencillas para la reproducción. Glitch funciona bien para compartir código.
Demostrar apoyo
¿Piensas usar esos controles de pantalla compartida? Tu asistencia pública ayuda al equipo de Chrome a priorizar funciones y les muestra a otros proveedores de navegadores la importancia de brindar compatibilidad con ellas.
Envía un tweet a @ChromiumDev y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Especificación
- Explicación de
displaySurface - Explicación de
monitorTypeSurfaces - Explicación de
surfaceSwitching - Explicación de
selfBrowserSurface - Explicación de
systemAudio - Revisión de TAG
Agradecimientos
Hero image de John Schnobrich.
Gracias a Rachel Andrew por revisar este artículo.