La plataforma web ya permite que una app web capture una pista de video de la pestaña actual. Ahora se envía con 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.
Anteriormente, las apps web podían recortar pistas de video "de forma manual", es decir, podían manipular cada fotograma directamente. Esto no fue ni sólido ni rendidor. Region Capture aborda estas deficiencias. La aplicación web ahora puede indicar al navegador que realice el trabajo en su nombre.
Acerca de Region Capture
Ya creaste un sitio web con Dynamic ContentTM. Es la mejor app web de todos los tiempos y las personas no pueden dejar de usarla, a menudo de forma colaborativa. Un posible paso siguiente es incorporar capacidades de conferencias virtuales. Decides seguir con eso. Se asocia con un proveedor de servicios de videoconferencias existente e incorpora su aplicación web como un iframe de origen cruzado. La aplicación web de videoconferencia captura la pestaña actual como una pista de video y la transmite a los participantes remotos.
No tan rápido... Realmente no quieres transmitirles los videos de las personas, ¿verdad? Es mejor recortar esa parte. Pero ¿cómo? El iframe incorporado no sabe qué contenido expones 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? ¿Quieres acercar o alejar la imagen? ¿Interactúa con la página de una manera que produce un cambio de diseño? Incluso si envías las coordenadas nuevas al iframe de captura, los problemas de tiempo podrían generar algunos fotogramas mal recortados.
Entonces, usemos la captura de región. Hay un Element en tu página, tal vez un <div>, que incluye el contenido principal. Asígnale el nombre mainContentArea. Quieres que la aplicación 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 de mainContentArea. Pasa este CropTarget a la aplicación web de videoconferencias. Después de recortar la pista de video con este CropTarget, los fotogramas de esa pista ahora solo incluirán los píxeles que se encuentren dentro del cuadro delimitador de mainContentArea. Si mainContentArea cambia de tamaño, forma o ubicación, la pista de video continúa sin requerir ninguna entrada adicional de ninguna de las apps web.
Volvamos a repasar estos pasos:
Para definir un CropTarget en tu app web, llama 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 videoconferencias le solicita al navegador que recorte el recorrido 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.
¡Listo! ¡Listo!
Análisis detallado
Detección de atributos
Para verificar si CropTarget.fromElement() es compatible, usa lo siguiente:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Cómo derivar un CropTarget
Enfoquémonos en el elemento llamado mainContentArea. Para derivar un elemento CropTarget de este, llama a CropTarget.fromElement(mainContentArea). La promesa que se muestra se resolverá con un nuevo objeto CropTarget si se ejecuta correctamente. De lo contrario, se rechazará si acuñas 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
Cuando se captura la pestaña, se crea una instancia de la pista de video como BrowserCaptureMediaStreamTrack, que es una subclase de MediaStreamTrack. Esa subclase expone cropTo(). Llama a track.cropTo(cropTarget) para comenzar a recortar los contornos de mainContentArea (el elemento del que se derivó cutTarget).
Si se ejecuta correctamente, la promesa se resolverá cuando se pueda garantizar que todos los fotogramas de video posteriores consistirán en los píxeles que se encuentran dentro del cuadro delimitador de mainContentArea.
Si no tiene éxito, se rechazará la promesa. Esto sucederá en los siguientes casos:
- El
CropTargetse creó en otra pestaña. (Por ahora, manténgase al tanto). - El
CropTargetse derivó de un elemento que ya no existe. - La pista tiene clones. (consulta el error 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ña, no solo para la autocaptura. Por lo tanto, se recomienda comprobar si el usuario seleccionó la pestaña actual antes de intentar recortar el recorrido. Esto se puede lograr con el identificador de captura. También es posible pedirle al navegador que incentive al usuario a realizar una captura de pantalla 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 la captura de región, solo importan la posición y el tamaño del objetivo, no el índice z. Se capturarán los píxeles que oculten el objetivo. No se capturarán las partes ocluidas del objetivo.
Esta es una consecuencia de que la captura regional es básicamente un recorte. Una alternativa, que será su propia API en el futuro, es la captura a nivel del elemento, es decir, capturar solo los píxeles asociados con el objetivo, sin importar las oclusiones. Esta API tiene un conjunto diferente de requisitos de seguridad y privacidad que el de un simple recorte.
Seguridad y privacidad
La captura de región permite que una app web que ya está observando todos los píxeles en la pestaña quite algunos de ellos de forma voluntaria. Es evidentemente seguro, ya que no se puede obtener información nueva.
La captura regional se puede usar para limitar la información que se envía a los participantes remotos. Por ejemplo, tal vez te gustaría compartir algunas diapositivas, pero no tus notas del orador.
No es recomendable compartir las notas de forma remota. Captura de región de inserción.
Ten en cuenta que, a nivel local, la captura de región no agrega ninguna garantía de seguridad. Cuando se entrega un recorrido a otro documento, el documento receptor aún puede anular 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. Asegúrate de consultar el código fuente.
Navegadores compatibles
Navegadores compatibles
- 104
- 104
- x
- x
La captura de región solo está disponible desde Chrome 104 en computadoras de escritorio.
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 región 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 a nivel del elemento.
Comentarios
El equipo de Chrome y la comunidad de estándares de la Web quieren conocer tu experiencia con Region Capture.
Cuéntanos sobre el diseño
¿Hay algo sobre la captura de región 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 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 la captura regional? 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.
Vínculos útiles
Agradecimientos
Agradecemos a Joe Medley por revisar este artículo.