Uso compartido mejorado de las pestañas con Captura de región

François Beaufort
François Beaufort
GitHub
Elad Alon

La plataforma web ya permite que una app web capture un recorrido en video de la pestaña actual. Ahora se incluye en Region Capture, un mecanismo para recortar estas pistas de video. La aplicación web designa una parte de la pestaña actual como su área de interés, y el navegador recorta todos los píxeles fuera de esa área.

Antes, las apps web podían recortar pistas de video “manualmente”. Es decir, las aplicaciones web podrían manipular cada uno de los fotogramas directamente. Esta información no era sólida ni eficiente. Region Capture resuelve estas deficiencias. Ahora, la app web puede indicar al navegador que haga el trabajo en su nombre.

Acerca de la captura de región

Acabas de crear un sitio web con Dynamic ContentTM. Es la mejor aplicación web de todos los tiempos y las personas simplemente no pueden dejar de usarla, a menudo de forma colaborativa. Un posible próximo paso es incorporar capacidades de conferencias virtuales. Entonces, decides hacerlo. Te asocias con un proveedor de servicios de videoconferencia existente y, luego, incorporas su aplicación web como un iframe de origen cruzado. La app web de videoconferencia captura la pestaña actual como una pista de video y la transmite a los participantes remotos.

Captura de pantalla de una ventana del navegador que muestra una app web en la que se destacan el área de contenido principal y el iframe de origen cruzado.
El área de contenido principal está en azul, y el iframe de origen cruzado está en rojo.

No tan rápido... No quieres transmitirles los videos de las personas, ¿verdad? Recorta esa parte. Pero ¿cómo? El iframe incorporado no sabe qué contenido se expone ni dónde, por lo que no puede recortarse sin ayuda. En teoría, podrías pasar las coordenadas previstas. Pero ¿qué sucede si el usuario cambia el tamaño de la ventana? ¿Desplaza el viewport? ¿Aleja o aleja la imagen? ¿Interactúa con la página de una manera que produce un cambio de diseño? Incluso si envías las nuevas coordenadas al iframe de captura, los problemas de tiempo aún podrían provocar que se recorten los fotogramas de forma incorrecta.

Entonces, usaremos la captura de región. Hay un Element en tu página, tal vez un <div>, que incluye el contenido principal. La llamaremos mainContentArea. Quieres que la app web de videoconferencias capture y comparta de forma remota el área definida por el cuadro de límite de este elemento. Por lo tanto, derivas un CropTarget a partir de mainContentArea. Debes pasar este CropTarget a la app web de videoconferencias. Después de recortar la pista de video con este CropTarget, los fotogramas de esa pista ahora consisten solo de los píxeles que se encuentran dentro del cuadro delimitador de mainContentArea. Si mainContentArea cambia de tamaño, forma o ubicación, la pista de video sigue el proceso, sin necesidad de ninguna entrada adicional de ninguna de las apps web.

Repasemos estos pasos nuevamente:

Para definir un CropTarget en tu app web, debes llamar a CropTarget.fromElement() con el elemento que elijas como entrada.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Debes pasar el CropTarget a la aplicación web de videoconferencias.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

La app web de videoconferencia le solicita al navegador que recorte la pista para el área definida por CropTarget llamando a cropTo() en la pista de video de captura automática con el objetivo de recorte recibido de la app web principal.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

¡Y listo! Eso es todo.

Análisis detallado

Detección de funciones

Para comprobar si CropTarget.fromElement() es compatible, usa lo siguiente:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

Cómo obtener un CropTarget

Enfoquémonos en el elemento llamado mainContentArea. Para derivar un CropTarget a partir de él, llama a CropTarget.fromElement(mainContentArea). Si se ejecuta correctamente, la promesa que se muestra se resolverá con un objeto CropTarget nuevo. De lo contrario, se rechazará si acuñaste una cantidad injustificada de objetos CropTarget.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

A diferencia de Element, un objeto CropTarget es serializable. Por ejemplo, se puede pasar a otro documento con Window.postMessage().

Recortes

Al capturar pestañas, se crea una instancia de la pista de video como una BrowserCaptureMediaStreamTrack, que es una subclase de MediaStreamTrack. Esa subclase expone cropTo(). Llama a track.cropTo(cropTarget) para comenzar a recortar a los contornos de mainContentArea (el elemento del que se derivó recorteTarget).

Si se aplica correctamente, la promesa se resolverá cuando se pueda garantizar que todos los fotogramas de video posteriores serán los píxeles que se encuentren dentro del cuadro delimitador de mainContentArea.

De lo contrario, se rechazará la promesa. Esto sucederá en los siguientes casos:

  • Se creó CropTarget en otra pestaña. (por ahora, mantente atento).
  • El CropTarget se derivó de un elemento que ya no existe.
  • La pista tiene clones. (Consulta el problema 1509418).
  • La pista actual no es una pista de video de captura automática. consulta a continuación.

El método cropTo() se expone en cualquier pista de video de captura de pestañas, no solo en el de la captura personal. Por lo tanto, se recomienda verificar si el usuario seleccionó la pestaña actual antes de intentar recortar la pista. Esto se puede lograr con el Controlador de la captura. También es posible solicitarle al navegador que guíe al usuario para que tome su foto con preferCurrentTab.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Para volver al estado sin recortar, llama a cropTo() con null.

// Stop cropping.
await track.cropTo(null);

Contenido ocluido

En el caso de la captura regional, solo la posición y el tamaño del objetivo son importantes, no el z-index. Se capturarán los píxeles que oculten el objetivo. Las partes ocluidas del objetivo no se capturarán.

Esto es una consecuencia de Region Capture que, básicamente, se está recortando. Una alternativa, que será su propia API en el futuro, es la captura de nivel de elemento. es decir, captura solo los píxeles asociados con el objetivo, independientemente de las oclusiones. Esta API tiene un conjunto de requisitos de seguridad y privacidad diferente al del simple recorte.

Imagen de diferentes resultados de las APIs de Region Capture y Element-level Capture.
Comportamiento de Region Capture con contenido que se oculta.

Seguridad y privacidad

Region Capture permite que una app web que ya está observando todos los píxeles de la pestaña quite voluntariamente algunos de esos píxeles. Es evidentemente seguro, ya que no se puede obtener información nueva.

La captura de región se puede usar para limitar la información que se envía a los participantes remotos. Por ejemplo, es posible que desees compartir algunas diapositivas, pero no tus notas del orador.

Captura de pantalla de una ventana del navegador que contiene diapositivas y notas del orador.
Una app web que contiene diapositivas y notas del orador.
No se recomienda compartir las notas de forma remota. Captura de la región del indicador.

Ten en cuenta que, a nivel local, Region Capture no agrega ninguna garantía de seguridad. Cuando se entrega un recorrido a otro documento, el documento receptor aún puede deshacer el recorte y obtener acceso a todos los píxeles de la pestaña capturada.

Chrome dibuja un borde azul alrededor de los bordes de las pestañas capturadas. Al recortar, Chrome generalmente dibuja el borde azul alrededor del objetivo recortado.

Demostración

Para jugar con Region Capture, ejecuta la demostración en Glitch. Sé asegúrate de consultar el código fuente.

Navegadores compatibles

Navegadores compatibles

  • Chrome: 104
  • Edge: 104.
  • Firefox: No es compatible.
  • Safari: no es compatible.

La Captura de región solo está disponible a partir de Chrome 104 en computadoras.

¿Qué sigue?

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

  • Region Capture admitirá capturas de otras pestañas.
  • El enfoque condicional permitirá 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.
  • Es posible que se proporcione una API de captura de nivel de elemento.

Comentarios

El equipo de Chrome y la comunidad de estándares de la Web quieren saber sobre tu experiencia con Region Capture.

Cuéntanos sobre el diseño

¿Hay algo en Region Capture 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 e instrucciones sencillas para la reproducción. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Demostrar apoyo

¿Planeas usar Region Capture? 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.