Se usó la API de Cloud Translation para traducir esta página.

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

François Beaufort

Elad Alon

Navegadores compatibles

La plataforma web ahora se envía con Capture Handle, un mecanismo que ayuda a la colaboración entre las apps web capturadas y las que realizan capturas. El identificador de captura permite que una app web de captura identifique la app web capturada de forma ergonómica y segura (si la app web capturada aceptó).

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. Una vez que se quita esta carga, el usuario puede concentrarse más en la presentación.

Ejemplo 2: El efecto "pasillo de espejos" se produce cuando una superficie capturada se vuelve a renderizar 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 temido efecto. Con el controlador de captura, la captura automática se puede detectar y mitigar, 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 identificador de captura

El Control 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 apps web que podrían capturarla. 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, el origen de la app web capturada puede estar expuesto a la captura de 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 consta del único elemento "*", todas las apps web de captura pueden observar CaptureHandle. De lo contrario, solo se puede observar para capturar apps web cuyo origen está en permittedOrigins.

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 está siendo capturada. 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).

Lado de captura

La app web de captura contiene un MediaStreamTrack de video y puede leer la información del control 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 control de captura disponible y se agrega la app web de captura 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 control 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...
}

Para supervisar los cambios de CaptureHandle, escucha los eventos "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

En la actualidad, la colaboración entre las apps web capturadas y las que realizan la captura es teóricamente posible, por ejemplo, mediante la incorporación de "píxeles mágicos" en la app web capturada o de códigos QR en la transmisión de video. El Control 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 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

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

Demostraciones

Algunas demostraciones están disponibles en los siguientes lugares:

Detección de atributos

Para verificar 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í tienes un adelanto de lo que puedes esperar en un futuro cercano para mejorar la función de compartir pantalla 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 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 tus experiencias con el Control de captura.

Cuéntanos sobre el diseño

¿Hay algo en el control de captura 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 muy bien para compartir repros rápidos y fáciles.

Expresar apoyo

¿Piensas usar el control 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.

Vínculos útiles

Agradecimientos

Agradecemos a Joe Medley por revisar este artículo.