Cómo tomar capturas de pantalla en el navegador usando JavaScript

Tomar capturas de pantalla en el navegador (o 'del lado del cliente') tiene que ver con las compensaciones: no existe una solución perfecta para cada situación. Echemos un vistazo a tres formas diferentes en que puede tomar capturas de pantalla y luego cómo puede usarlas enviándolas a un servidor o permitiendo que el usuario descargue la imagen.

Las capturas de pantalla pueden ser una parte muy valiosa e importante de su aplicación JavaScript. Empresas como Google las usan para obtener comentarios de los usuarios, productos como BugHerd usan capturas de pantalla como parte central de su producto y son excelentes para generar exportaciones de datos (como gráficos).

Pedir a los usuarios que tomen una captura de pantalla de lo que están viendo genera mucha fricción. Primero, necesitan conocer el método abreviado de teclado (que es diferente de macOS a Windows).

Entonces necesitan saber qué hacer con él. Por ejemplo, podrían subirlo a algún lugar como Dropbox o enviártelo por correo electrónico. La mayoría de los usuarios probablemente tampoco sabrán cómo cambiar el tamaño u optimizar la calidad de la captura de pantalla. Si aloja las capturas de pantalla usted mismo, debe asegurarse de que ocupen el menor espacio posible, lo que a su vez garantiza que gaste lo menos posible.

Aquí hay tres formas en que puede capturar automáticamente capturas de pantalla para sus usuarios:

1. Uso de html2canvas para capturas de pantalla del lado del cliente

Niklas von Hertzen respondió una pregunta de StackOverflow en 2011 diciendo que es posible colocar el DOM de la página en un lienzo HTML y usarlo para generar una captura de pantalla. Después de hacer público el código, actualizó su respuesta con la idea original que es html2canvas . Una investigación posterior reveló que Google usa una técnica muy similar para generar automáticamente capturas de pantalla de los usuarios que brindan comentarios, lo que demuestra las escalas de implementación y es lo suficientemente sólida para productos grandes.

Cómo usar html2canvas

La idea es bastante simple: captura el DOM (HTML de la página) cuando desea generar una captura de pantalla y pasa ese DOM a un lienzo HTML. Bajo ciertas restricciones, el elemento canvas puede generar un URI de datos de los contenidos que contiene (como una cadena base64). El siguiente ejemplo genera una captura de pantalla y la abre en la ventana como una imagen.

 const screenshotTarget = document .body; html2canvas(screenshotTarget).then( ( canvas ) => { const base64image = canvas.toDataURL( "image/png" ); window .location.href = base64image; });

Pros/Cons del método canvas

ventajas

Rápido: no necesita esperar a ningún servicio externo, todo esto se hace en el clienteActualizado regularmente: aunque html2cavnas no se actualiza a diario, ve actualizaciones y correcciones regularmente cada pocos mesesMuy popular: la comunidad es fuerte y activa, hay hay más de 40 solicitudes de extracción abiertas y 600 problemas registrados (hasta julio de 2020). También hay preguntas regulares (¡y respuestas!) en Stack Overflow. Buen soporte de navegador: html2canvas tiene más de 9 años y aún mantiene un excelente soporte de navegador .

Contras

No es compatible con Shadow DOM o Web Components: hay una solicitud de extracción abierta para agregar soporte, y parece que los mantenedores están interesados en fusionarlo. Restricciones de origen cruzado: cuando agrega elementos que contienen solicitudes al lienzo (como imágenes , hojas de estilo, etc.), están sujetas a las mismas políticas de COR que las solicitudes normales.

No es compatible con todas las propiedades de CSS: las propiedades se agregan y configuran manualmente, por lo que una cobertura del 100 % es difícil. La documentación indica que "html2canvas nunca tendrá compatibilidad completa con CSS". Frágil para las actualizaciones: html2canvas puede ser frágil para las actualizaciones del navegador, lo que ocasionalmente rompe la funcionalidad existente.

2. Genera capturas de pantalla con getDisplayMedia

Casi al mismo tiempo que se lanzó html2canvas, la idea de que la web podría admitir videollamadas nativas estaba cobrando mucha fuerza. En 2011, Google lanzó Hangouts, una plataforma de video y audio en tiempo real. Para admitir Hangouts, Google presentó la idea (y alguna implementación) de Real-Time Communication (RTC) que luego se desarrolló en WebRTC. Desde entonces, WebRTC se ha convertido en un estándar en todos los navegadores modernos, y es la infraestructura que proporciona a la web comunicación de video, audio y datos en tiempo real.

Una parte de WebRTC es getDisplayMedia , que se utiliza como API para compartir pantalla. Puede capturar una imagen fija de un video, como compartir la pantalla, que esencialmente se convierte en una captura de pantalla. Veamos un ejemplo básico:

 const capture = async () => { const canvas = document .createElement( "canvas" ); const context = canvas.getContext( "2d" ); const video = document .createElement( "video" ); try { const captureStream = await navigator.mediaDevices.getDisplayMedia(); video.srcObject = captureStream; context.drawImage(video, 0 , 0 , window .width, window .height); const frame = canvas.toDataURL( "image/png" ); captureStream.getTracks().forEach( track => track.stop()); window .location.href = frame; } catch (err) { console .error( "Error: " + err); } }; capture();

Aunque el ejemplo anterior no es tan pequeño como el primero, sigue siendo relativamente fácil seguir lo que sucede. En primer lugar, los elementos de lienzo y video se crean en la memoria, luego el

 getDisplayMedia

Ventajas y desventajas de la API getDisplayMedia

ventajas

Buena compatibilidad con los navegadores modernos: es una API nativa, lo que significa que viene integrada en los navegadores modernos, no es necesario ningún script o código de terceros.

Extensible : puede agregar fácilmente soporte para grabación de video en el futuro, usando la misma APIPixel perfect: es exactamente lo que ve el usuario

Escritorio o pestaña : la API getDisplayMedia puede grabar el escritorio o una ventana del navegador, lo que lo hace ideal para tomar una captura de pantalla de algo que no sea su aplicación.

Contras

Permisos : necesita obtener permisos del usuario para grabar. Dependiendo del navegador, el diálogo de permisos puede verse diferente y, a veces, puede ser confuso.

Lento : debido a que necesita obtener permiso, el usuario puede tardar un tiempo en hacer clic en aceptar y comprender lo que está sucediendo. Si el usuario necesita una captura de pantalla al instante, esta pequeña interacción de la interfaz de usuario retrasará la captura de contenido sensible al tiempo.

3. Capturas de pantalla como servicio

Los servicios de captura de pantalla son cada vez más populares, ya que ofrecen una manera fácil de integrar capturas de pantalla en su aplicación existente. Si bien no es del lado del cliente, usar un servicio de captura de pantalla como url2png , Stillio o Urlbox significa que no necesita administrar ninguna infraestructura que tome las capturas de pantalla.

Si bien la implementación puede diferir según el servicio, la idea general es la misma. Envía la URL (y los parámetros personalizables como dimensiones, formato y calidad) a un servicio externo y espera una respuesta o escucha la respuesta en otro lugar. Esto generalmente se maneja con un servicio de back-end, así que echemos un vistazo usando url2png y NodeJS y expresa:

 const url2png = require ( 'url2png' )( 'API_KEY' , 'PRIVATE_KEY' ); const fs = require ( 'fs' ); app.get( '/screenshot' , (req, res) => { url2png.readURL(req.query.url, {}).pipe(fs.createWriteStream( 'screenshot.png' )); res.json({ success : true }) });

El ejemplo anterior toma una solicitud como

 /screenshot?url=http://google.com.au

Pros/Cons de usar un servicio de captura de pantalla

ventajas

Posprocesamiento : los servicios también pueden manejar el posprocesamiento, lo que ofrece la flexibilidad de generar imágenes en diferentes tipos de archivos, tamaños, calidad y más.

API sólidas : muchas personas utilizan los servicios y facilitan grandes volúmenes de solicitudes. Infraestructura: no necesita mantener la infraestructura para administrar el proceso de tomar una captura de pantalla. Si está feliz, proyectos como PhantomJS y servicios como SauceLabs son un buen lugar para comenzar.

Contras

Sin estado : es posible que la captura de pantalla no sea lo que ve el usuario. Por ejemplo, si el usuario ha interactuado con la página o si está autenticado, el servicio de captura de pantalla no podrá mostrar la misma página para una captura de pantalla.

Costo : de las tres opciones, esta es la única que tiene un costo. Aunque es bastante barato, si maneja grandes volúmenes de capturas de pantalla, podría ser costoso.

Tiempo : los servicios de captura de pantalla pueden tardar varios minutos en generar y devolver una imagen.

Redondeo

Ya sea que esté integrando capturas de pantalla para obtener comentarios o para una función crítica en su aplicación, debe sopesar los pros y los contras de cada solución.

El uso de una solución del lado del cliente, como html2canvas o la API getDisplayMedia significa que no tiene que administrar ninguna infraestructura de servidor y, en general, las imágenes se generan con bastante rapidez.

Si necesita una representación perfecta de píxeles de lo que está mirando su usuario y no le importa la ventana emergente de permisos a veces obtusa, la API getDisplayMedia es un buen lugar para comenzar.

Si desea tomar capturas de pantalla semiprecisas rápidamente sin depender de un servicio externo, html2canvas podría ser la opción adecuada para usted.

Finalmente, si está de acuerdo con subcontratar la implementación técnica y el costo asociado con ella, un servicio de captura de pantalla podría ser la mejor opción.