Controles de uso compartido de pantalla que preservan la privacidad

François Beaufort

Elad Alon

Ya es posible compartir pestañas, ventanas y pantallas en la plataforma web con la API de Screen Capture. En resumen, getDisplayMedia() permite que el usuario seleccione una pantalla o una parte de ella (como una ventana) para capturarla como una transmisión de contenido multimedia. Luego, se puede grabar o compartir con otras personas a través de la red. Recientemente, se realizaron cambios en la API para preservar mejor la privacidad y evitar el uso compartido accidental de información personal.

Esta es una lista de los controles que puedes usar para compartir la pantalla y preservar la privacidad:

• La opción displaySurface puede indicar que la app web prefiere ofrecer un tipo específico de plataforma de visualización (pestañas, ventanas o pantallas).
• La opción monitorTypeSurfaces se puede usar para evitar que el usuario comparta una pantalla completa.
• La opción surfaceSwitching indica si Chrome debe permitir que el usuario cambie de forma dinámica entre las pestañas compartidas.
• La opción selfBrowserSurface se puede usar para evitar que el usuario comparta la pestaña actual. Esto evita el efecto "pasillo de espejos".
• La opción systemAudio garantiza que Chrome solo ofrezca al usuario la captura de audio relevante.

Cambios en getDisplayMedia()

Se realizaron los siguientes cambios en getDisplayMedia().

La opción displaySurface

Las apps web con recorridos del usuario especializados, que funcionan mejor cuando se comparte una ventana o una pantalla, pueden pedirle a Chrome que ofrezca ventanas o pantallas de forma más destacada en el selector de contenido multimedia. El orden de la oferta no cambia, pero el panel relevante está preseleccionado.

Los valores de la opción displaySurface son los siguientes:

• "browser" para 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 le daría a la app web demasiado poder sobre el usuario.

La opción monitorTypeSurfaces

Para proteger a las empresas de la filtración de información privada por errores de los empleados, las apps web de videoconferencias ahora pueden establecer monitorTypeSurfaces en "exclude". Luego, Chrome excluirá las pantallas del selector de contenido multimedia. Para incluirla, configúrala como "include". Actualmente, el valor predeterminado de monitorTypeSurfaces es "include", pero se recomienda que las apps web lo configuren de forma explícita, ya que el valor predeterminado puede 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

Uno de los motivos más citados para compartir toda la pantalla es el deseo de cambiar sin problemas entre compartir diferentes plataformas durante una sesión. Para solucionar este problema, Chrome ahora muestra un botón que permite al usuario alternar de forma dinámica entre compartir diferentes pestañas. El botón "Compartir esta pestaña en su lugar" ya estaba disponible para las extensiones de Chrome y ahora puede usarse en cualquier app web que llame a getDisplayMedia().

Si surfaceSwitching se establece en "include", el navegador expondrá dicho 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 las situaciones de videoconferencia, los usuarios suelen cometer el error de seleccionar la pestaña de videoconferencia, lo que genera un efecto de “laberinto de espejos”, un sonido estridente y confusión general.

Para proteger a los usuarios de sí mismos, las apps web de videoconferencias ahora pueden establecer selfBrowserSurface en "exclude". Luego, Chrome excluirá la pestaña actual de la lista de pestañas que se le ofrece al usuario. Para incluirla, configúrala como "include". Actualmente, el valor predeterminado de selfBrowserSurface es "exclude", pero se recomienda que las apps web lo configuren de forma explícita, ya que el valor predeterminado puede 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 es igual. Considera las apps web de videoconferencia: - Si el usuario comparte otra pestaña, tiene sentido capturar también el audio. - Por otro lado, el audio del sistema incluye el audio de los participantes remotos y no se debe volver a transmitirles.

En el futuro, es posible que se pueda excluir algunas fuentes de audio de la captura. Sin embargo, por ahora, a menudo es mejor que las apps web de videoconferencias eviten capturar el audio del sistema. Anteriormente, se podía hacer esto verificando qué superficie de visualización eligió el usuario y deteniendo la pista de audio si decidía compartir una pantalla. Sin embargo, esto genera un pequeño problema, ya que algunos usuarios se sienten confundidos cuando marcan explícitamente la casilla de verificación para compartir el audio del sistema y, luego, los participantes remotos les informan que no hay audio entrante.

Si configuras systemAudio en "exclude", una app web puede evitar que los usuarios se confundan con indicadores mixtos. Chrome ofrecerá capturar audio junto con pestañas y ventanas, pero no junto con 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 configuren de forma explícita, ya que el valor predeterminado puede cambiar en el futuro.

Demostración

Para jugar con estos controles de uso compartido de pantalla, ejecuta la demo en Glitch. Asegúrate de consultar el código fuente.

Navegadores compatibles

• displaySurface, surfaceSwitching y selfBrowserSurface están disponibles en Chrome 107 para computadoras.

• systemAudio está disponible en Chrome 105 para computadoras.

• monitorTypeSurfaces está disponible en Chrome 119 para computadoras.

Comentarios

El equipo de Chrome y la comunidad de estándares web quieren conocer tus experiencias con esos controles de uso compartido de pantalla.

Cuéntanos sobre el diseño

¿Hay algo en los controles de uso compartido de pantalla que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad?

• Informa un problema de especificación en el repositorio de GitHub o agrega tus comentarios a un problema existente.

¿Tienes 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 sea posible y de proporcionar instrucciones sencillas para reproducirlo. Glitch funciona bien para compartir código.

Expresar apoyo

¿Piensas usar esos controles de pantalla compartida? Tu apoyo público ayuda al equipo de Chrome a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas.

Envía un tuit 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

Gracias a Rachel Andrew por revisar