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

Francisco Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

Navegadores compatibles

  • 102
  • 102
  • x
  • x

La plataforma web ahora incluye el controlador de captura, un mecanismo que ayuda a la colaboración entre la captura y la captura de apps web. El identificador de captura permite que una app web de captura identifique de manera ergonómica y segura la app web capturada (si se habilitó la aplicación web capturada).

Algunos ejemplos ilustran los beneficios.

Ejemplo 1: Si una app web de videoconferencias está capturando una app web de presentaciones, esta última puede mostrar controles al usuario para navegar entre diapositivas. Debido a que los controles están incorporados directamente en la aplicación web de videoconferencias, el usuario no tiene que alternar varias veces entre la pestaña de videoconferencias y la pestaña presentada. Con esta carga levantada, el usuario ahora puede concentrarse más completamente en la presentación de su presentación.

Ejemplo 2: El efecto "salón de espejos" se produce cuando una superficie capturada se renderiza en la ubicación capturada. En particular, si el usuario elige capturar la pestaña en la que se realiza una llamada de videoconferencia y la aplicación web de videoconferencia muestra una vista previa local, se observará este efecto temido. Con el controlador de captura, se puede detectar y mitigar la captura propia; por ejemplo, si la app web suprime la vista previa local.

Ilustración del efecto salón de los espejos

Información acerca del identificador de captura

El identificador 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, las apps web de captura pueden leer esa información con getCaptureHandle() en objetos MediaStreamTrack.

Lado capturado

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

  • handle: Puede ser cualquier string de hasta 1,024 caracteres.
  • exposeOrigin: Si es true, el origen de la app web capturada podría exponerse a la captura de apps web.
  • permittedOrigins: Los valores válidos son (i) un array vacío, (ii) un array con el único artículo "*" o (iii) un array de orígenes. Si permittedOrigins consta del único elemento "*", todas las apps web de captura pueden observar CaptureHandle. De lo contrario, solo se puede observar para capturar las aplicaciones web cuyo origen está en permittedOrigins.

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

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

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

Lado de captura

La app web de captura contiene una 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 establecido por la aplicación web capturada con navigator.mediaDevices.setCaptureHandleConfig().
  • origin: Es el origen de la aplicación web capturada si exposeOrigin se configuró como true. De lo contrario, no está definido.

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 los eventos de "capturehandlechange" en un objeto MediaStreamTrack. Los cambios ocurren cuando:

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

Seguridad y privacidad

En la actualidad, la colaboración entre las apps web capturadas y capturadas es posible, por ejemplo, mediante la incorporación de “píxeles mágicos” en la app web capturada o la incorporación de 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 aplicación web capturada seleccione el público, ya sea seleccionar orígenes o toda la Web.

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

Ejemplo

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

Demostraciones

Algunas demostraciones están disponibles en:

Detección de atributos

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

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

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

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

Próximos pasos

Este es un adelanto de lo que puedes esperar en un futuro cercano que mejorará el uso compartido de pantalla en la Web:

  • La captura de la región permite recortar una pista de video derivada de la captura de pantalla de la pestaña actual.
  • El enfoque condicional permitiría a la app web de captura indicar al navegador que cambie el enfoque a la superficie de pantalla capturada o que evite ese cambio de enfoque.

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

¿El controlador de captura 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 muy bien para compartir repros rápidos y fáciles.

Demuestra tu 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 lo importante que es brindarles asistencia.

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

Agradecimientos

Agradecemos a Joe Medley por revisar este artículo.