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

François Beaufort

Elad Alon

La plataforma web ahora incluye Capture Handle, un mecanismo que ayuda a la colaboración entre las apps web de captura y las capturadas. Capture Handle permite que una app web de captura identifique de forma ergonómica y confiable la app web capturada (si la app web capturada habilitó la opción).

Algunos ejemplos ilustran los beneficios.

Ejemplo 1: Si una app web de videoconferencia captura una app web de presentación, la app web de videoconferencia puede exponer controles al usuario para navegar entre las diapositivas. Como los controles están integrados directamente en la app web de videoconferencias, el usuario no tiene que cambiar de pestaña de videoconferencia a la pestaña de presentación de forma reiterada. Con esta carga eliminada, el usuario ahora puede concentrarse más en la presentación.

Ejemplo 2: El efecto de "salón de espejos" se produce cuando una superficie capturada se renderiza de nuevo en la ubicación que se está capturando. En particular, si el usuario elige capturar la pestaña en la que se está realizando una llamada de videoconferencia y la app web de videoconferencia renderiza una vista previa local, se observará este efecto temido. Con Capture Handle, se puede detectar y mitigar la autocaptura, por ejemplo, cuando la app web suprime la vista previa local.

Acerca del mango de captura

El identificador de captura consta de dos partes complementarias:

• Las apps web capturadas pueden habilitar la opción para exponer 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 otras apps web que intenten capturarla. Para ello, llama a navigator.mediaDevices.setCaptureHandleConfig() con un objeto opcional que consta de estos miembros:

• handle: Puede ser cualquier cadena de hasta 1,024 caracteres.
• exposeOrigin: Si es true, el origen de la app web capturada puede exponerse a las apps web de captura.
• 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 consta del único elemento "*", todas las apps web de captura pueden observar CaptureHandle. De lo contrario, solo las apps web de captura cuyo origen esté en permittedOrigins podrán observarlo.

En el siguiente ejemplo, se muestra cómo exponer un UUID generado de forma aleatoria como un identificador y el origen a cualquier app 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, a través de mensajería con un trabajador o una infraestructura de nube compartida).

Lado de captura

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

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

En el siguiente ejemplo, se muestra cómo leer la información del identificador 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 se producen en los siguientes casos:

• La app web capturada llama a navigator.mediaDevices.setCaptureHandleConfig().
• Se produce una navegación entre documentos en la app web capturada.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Seguridad y privacidad

Actualmente, es posible colaborar entre las apps web de captura y las capturadas, por ejemplo, incorporando "píxeles mágicos" en la app web capturada o códigos QR en la transmisión de video. Capture Handle ofrece un mecanismo más simple, confiable y seguro. También permite que la app web capturada seleccione el público, ya sea orígenes seleccionados 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 seguros (solo HTTPS).

Muestra

Puedes probar Capture Handle ejecutando la muestra.

Demostraciones

Algunas demostraciones están disponibles en las siguientes ubicaciones:

• Control remoto
• Detección de autograbación

Detección de características

Para verificar si se admite getCaptureHandle(), usa lo siguiente:

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

Para verificar si se admite navigator.mediaDevices.setCaptureHandleConfig(), usa lo siguiente:

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

¿Qué sigue?

A continuación, se incluye un avance de lo que puedes esperar en el futuro cercano para mejorar el uso compartido de pantalla en la Web:

• La captura de regiones permitiría recortar una pista de video derivada de la captura de pantalla de la pestaña actual.
• Conditional Focus permitiría que la app web de captura le indique al navegador que cambie el enfoque a la superficie de visualización capturada o que evite ese cambio de enfoque.

Comentarios

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

Cuéntanos sobre el diseño

¿Hay algo sobre Capture Handle 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 tu opinión 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 sencillas instrucciones para reproducir el error.

Mostrar apoyo

¿Planeas usar Capture Handle? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas.

Envía un tweet a @ChromiumDev y cuéntanos dónde y cómo lo usas.

Vínculos útiles

• Especificación
• Explicación
• Revisión del TAG
• Error de Chromium
• Entrada de ChromeStatus.com

Agradecimientos

Gracias a Joe Medley por revisar este artículo.