Controles de uso compartido de pantalla que preservan la privacidad

Ya es posible compartir pestañas, ventanas y pantallas en la plataforma web con la API de Screen Capture. En resumen, getDisplayMedia() permite al usuario seleccionar una pantalla o parte de ella (como una ventana) para capturarla como transmisión multimedia. Puedes grabar o compartir esta transmisión 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.

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

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

Cambios en getDisplayMedia()

Se realizaron los siguientes cambios en getDisplayMedia().

La opción displaySurface

Las aplicaciones web con recorridos de usuario especializados, que funcionan mejor cuando se comparte una ventana o una pantalla, aún pueden solicitar a Chrome que ofrezca ventanas o pantallas de forma más destacada en el selector de medios. El orden de la oferta no se modifica, pero el panel relevante está 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 preseleccionar una ventana o pantalla específica. Esto se debe a que se diseñó porque la aplicación web tendría demasiado poder sobre el usuario.

La opción monitorTypeSurfaces

Para proteger a las empresas de la filtración 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á las pantallas del selector de medios. Para incluirlo, configúralo como "include". Por el momento, el valor predeterminado de monitorTypeSurfaces es "include", pero se recomienda que las apps web lo configuren explícitamente, 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

Una de las razones principales por las que se comparte toda la pantalla es el deseo de alternar entre diferentes plataformas sin inconvenientes durante una sesión. Para solucionar este problema, Chrome ahora muestra un botón que permite al usuario alternar dinámicamente 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 lo puede usar cualquier app web que llame a getDisplayMedia().

Si surfaceSwitching se establece en "include", el navegador expondrá dicho botón. Si se configura en "exclude", no se le mostrará al usuario ese botón. 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 estos casos, los usuarios suelen cometer el error de seleccionar la pestaña correspondiente, lo que genera un efecto de “salón de espejos”, aullidos y confusión general.

Para proteger a los usuarios de sí mismos, las aplicaciones web de videoconferencia ahora pueden establecer selfBrowserSurface en "exclude". Chrome excluirá la pestaña actual de la lista de pestañas ofrecidas al usuario. Para incluirlo, configúralo como "include". Por el momento, el valor predeterminado de selfBrowserSurface es "exclude", pero se recomienda que las apps web lo configuren explícitamente, 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. Pero no todo el audio se crea de la misma manera. Considera las apps web de videoconferencia: - Si el usuario comparte otra pestaña, también tiene sentido capturar el audio. - El audio del sistema, por otro lado, incluye el audio propio de los participantes remotos y no debe transmitirles.

En el futuro, es posible que se puedan excluir algunas fuentes de audio de la captura. Sin embargo, por ahora, en las aplicaciones web de videoconferencias, es mejor evitar la captura de audio del sistema. Esto se podía hacer previamente verificando qué plataforma de visualización eligió el usuario y deteniendo la pista de audio si optaba por compartir una pantalla. Sin embargo, esto genera un pequeño problema: 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 configuras systemAudio como "exclude", una app web puede evitar desconcertar a los usuarios debido a 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.
});

Por el momento, el valor predeterminado de systemAudio es "include", pero se recomienda que las apps web lo configuren explícitamente, ya que el valor predeterminado puede cambiar en el futuro.

Demostración

Puedes jugar con estos controles de uso compartido de pantalla ejecutando la demostración en Glitch. Asegúrate de consultar el código fuente.

Navegadores compatibles

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

• systemAudio está disponible en Chrome 105 para computadoras de escritorio.

• monitorTypeSurfaces está 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

¿Hay algo acerca de los controles para compartir 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 sobre un problema específico en el repositorio de GitHub o agrega tus ideas a un problema existente.

¿Tienes problemas con la implementación?

¿Encontraste un error en la implementación de Chrome? ¿La implementación es diferente de la especificación?

• Informa el error en https://new.crbug.com. Asegúrate de incluir todos los detalles que puedas, además de instrucciones simples para reproducir el contenido. Glitch funciona bien para compartir código.

Demuestra tu apoyo

¿Planeas 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 lo importante que es brindarles asistencia.

Envía un tweet a @ChromiumDev y cuéntanos dónde y cómo lo estás usando.

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
• Opinión sobre la ETIQUETA

Agradecimientos

Hero image de John Schnobrich.

Agradecemos a Rachel Andrew por revisar este artículo.