Mejor uso compartido de pestañas con el controlador de captura

François Beaufort
François Beaufort
GitHub
Elad Alon

Navegadores compatibles

  • 102
  • 102
  • x
  • x

La plataforma web ahora cuenta con el controlador de captura, un mecanismo que ayuda a la colaboración entre las capturas y las capturas de aplicaciones web. El controlador de captura permite que una app web de captura identifique de forma ergonómica y segura la app web capturada (si la app web capturada está habilitada).

Algunos ejemplos ilustran los beneficios.

Ejemplo 1: Si una aplicación web de videoconferencias captura una aplicación web de presentaciones, esta última puede exponer los controles para que el usuario navegue entre diapositivas. Debido a que los controles están incorporados directamente en la app web de videoconferencias, el usuario no tiene que cambiar varias veces entre la pestaña de videoconferencia y la pestaña presentada. Con esta carga despejada, el usuario ahora tiene la libertad de concentrarse más plenamente en la entrega de su presentación.

Ejemplo 2: El efecto "sala de espejos" se produce cuando una superficie capturada se renderiza en la ubicación que se está capturando. En particular, si el usuario elige capturar la pestaña en la que se realiza una videoconferencia y la aplicación web de videoconferencias renderiza una vista previa local, se observará este temido efecto. Con el controlador de captura, la captura automática puede detectarse y mitigarse, por ejemplo, a través de la aplicación web que suprime la vista previa local.

Ilustración del efecto Hall de espejos

Información acerca del controlador de captura

El controlador de captura consta de dos partes complementarias:

  • Las apps web capturadas pueden habilitar la exposición de cierta información a algunos orígenes con navigator.mediaDevices.setCaptureHandleConfig().
  • Luego, cuando se capturan apps web, se puede leer esa información con getCaptureHandle() en objetos MediaStreamTrack.

Lado capturado

Las apps web pueden exponer información a quienes podrían estar capturando apps web. Para ello, llama a navigator.mediaDevices.setCaptureHandleConfig() con un objeto opcional que consta de los siguientes miembros:

  • handle: Puede ser cualquier cadena de hasta 1,024 caracteres.
  • exposeOrigin: Si es true, es posible que el origen de la app web capturada esté expuesto para capturar apps web.
  • permittedOrigins: Los valores válidos son (i) un array vacío, (ii) un array con el único elemento "*" o (iii) un array de orígenes. Si permittedOrigins consiste en el único elemento "*", todas las apps web que capturan pueden observar CaptureHandle. De lo contrario, solo es observable para capturar apps web cuyo origen se encuentra en permittedOrigins.

En el siguiente ejemplo, se muestra cómo exponer un UUID generado de forma aleatoria como un controlador y el origen a cualquier aplicación web de captura.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Ten en cuenta que la app web capturada no sabe si se está capturando. A menos que la app web de captura use información de CaptureHandle para establecer comunicación con la app web capturada (por ejemplo, mediante mensajería a través de un trabajador o una infraestructura de nube compartida).

Capturando lado

La app web de captura contiene un MediaStreamTrack de video y puede leer la información del controlador de captura llamando a getCaptureHandle() en ese MediaStreamTrack. Esta llamada muestra null si no hay ningún controlador de captura disponible o si la app web de captura no tiene permiso para leerlo. Si hay un controlador de captura disponible y la app web de captura se agrega a permittedOrigins, esta llamada muestra un objeto con los siguientes miembros:

  • handle: Es el valor de cadena que establece la app web capturada con navigator.mediaDevices.setCaptureHandleConfig().
  • origin: Es el origen de la app web capturada si exposeOrigin se configuró como true. De lo contrario, no se define.

En el siguiente ejemplo, se muestra cómo leer la información del controlador de captura de una pista de video.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

Supervisa los cambios de CaptureHandle escuchando eventos "capturehandlechange" en un objeto MediaStreamTrack. Los cambios se producen en los siguientes casos:

  • La app web capturada llama a navigator.mediaDevices.setCaptureHandleConfig().
  • La navegación entre documentos ocurre en la aplicación web capturada.
videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Seguridad y privacidad

En la actualidad, la colaboración entre la captura y las aplicaciones web capturadas es, en teoría, posible si se incorporan, por ejemplo, “píxeles mágicos” en la aplicación web capturada o si se incorporan códigos QR en la transmisión de video por Internet. El controlador de captura ofrece un mecanismo más simple, confiable y seguro. También permite que la app web capturada seleccione el público, ya sea el origen o toda la Web.

Ten en cuenta que navigator.mediaDevices.setCaptureHandleConfig() solo está disponible para marcos principales de nivel superior en contextos de navegación segura (solo HTTPS).

Ejemplo

Para jugar con el controlador de captura, ejecuta el ejemplo en Glitch. Asegúrate de consultar el código fuente.

Demostraciones

Algunas demostraciones están disponibles en:

Detección de funciones

Para comprobar si getCaptureHandle() es compatible, usa lo siguiente:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

Para comprobar si navigator.mediaDevices.setCaptureHandleConfig() es compatible, usa lo siguiente:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

¿Qué sigue?

Aquí te mostramos un adelanto de lo que puedes esperar en un futuro cercano, que mejorará la pantalla compartida en la Web:

  • Region Capture permitiría recortar una pista de video derivada de la captura de pantalla de la pestaña actual.
  • El enfoque condicional permitiría que la app web de captura le indicara al navegador que cambie el enfoque a la superficie de visualización capturada o que evite este cambio.

Comentarios

El equipo de Chrome y la comunidad de estándares de la Web quieren conocer tu experiencia con Capture Handle.

Cuéntanos sobre el diseño

¿Hay algo del controlador de captura que no funcione 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, así como instrucciones sencillas para reproducirlo. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Demostrar apoyo

¿Planeas usar el controlador de captura? 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.

Agradecimientos

Gracias a Joe Medley por leer este artículo.