cadena de bloques

Construye filtros de cámara ASCII en tiempo real con Javascript plano


Construye filtros de cámara ASCII en tiempo real con Javascript plano Fotografía de Alfonso Reyes de Unsplash.

Hace poco vi videos en Youtube sobre circuitos integrados [IC] y la Ley de Moore, que incluían interesantes gráficos ASCII de Jack Kilby y otros. Quiero recrear este efecto en el navegador como un filtro de imagen para video de webcam.

Esto es lo que estamos construyendo hoy:

Construye filtros de cámara ASCII en tiempo real con Javascript plano Nuestro filtro de cámara está en acción

Puede probarlo aquí: https://mariotacke.github.io/blog-real-time-ascii-camera-filter/. Vamos 🚀

Paso 1: Solicitar una licencia

Antes de aplicar el filtro mágico, necesitamos acceder al flujo de video de la cámara. Acceder a la cámara de video es simple con la API MediaDevices del navegador:

Solicitar permiso.

Primero, usamos la función getUserMedia del navegador, que nos pide que pasemos un objeto de restricción que especifique a qué dispositivos queremos acceder y las devoluciones de llamadas de éxito y error. En el ejemplo anterior, necesitamos un acceso de video que solicite al navegador que pregunte si el usuario tiene permiso. Si el usuario acepta, podemos acceder al objeto MediaStream, que podemos usar como componente fuente de un archivo.

Finalmente, iniciamos el video llamando a play [] en el elemento de video y nos suscribimos a su evento de reproducción para iniciar el bucle de render. Para hacer esto, usamos requestAnimationFrame, que es más eficiente que ejecutar setInterval.

Paso 2: Accede a la fuente de video de la cámara.

Conceptualmente, un filtro de video es simplemente un filtro de imagen que se realiza para cada fotograma del video. Por lo tanto, para que funcione, necesitamos acceder a los datos de píxeles de cada fotograma, ejecutarlos a través de nuestro filtro de imágenes y luego volver a escribirlos en el lienzo.

Para ello, utilizaremos un elemento y dos lienzos. ¿Por qué son dos lonas? Para extraer datos de cuadros de video, primero debemos dibujarlos en el lienzo. Solo así podemos extraer datos de píxeles del contexto del lienzo, manipularlos y dibujarlos en otro lienzo.

Establecer el bucle principal.

processFrame es nuestra principal función de bucle de render. Una vez que tenemos acceso al ancho y alto del video, usamos drawImage para dibujar el video en el contexto de hiddenContext 2D. Esto nos permite extraer datos más libremente más tarde a través de su función getImageData. Ok, ahora tenemos una copia completa de nuestros componentes de elementos.

Paso 3: pixelado

Hablemos de estrategia: nuestro objetivo es dibujar personajes como video de entrada en la pantalla. Primero, la mayoría de las fuentes tienen anchos variables, lo que puede dificultar nuestros cálculos, así que escojamos una fuente monoespaciada. Elegí Consolas. Esto nos permite determinar el ancho del carácter y simplificar el siguiente paso.

Usa el método de contexto para calcular el ancho del texto.

Afortunadamente, el contexto del lienzo proporciona una función measureText que acepta una cadena y devuelve el ancho y la altura en píxeles. Como elegimos una fuente monoespaciada, podemos usar el ancho de la fuente en todo el algoritmo.

En segundo lugar, tenemos que darle un poco de color al personaje. Elegí calcular el color promedio del rectángulo de imagen de origen que dibuja el texto. Esto nos obliga a recorrer una parte del marco de entrada, resumir los valores RGB y dividirlo por el número de píxeles en el marco.

Si simplemente imprimimos estas partes, esto es lo que parece:

Construye filtros de cámara ASCII en tiempo real con Javascript plano Filtro pixelado simple. Se siente como el mundo de los años noventa … calculando el color promedio de una parte del marco.

Comencemos con el bucle primero. Aumentamos gradualmente los datos del cuadro de la imagen aumentando la altura de la fuente y la posición x aumentando la altura de la fuente. Piénsalo: un personaje a la vez. A continuación, tenemos que extraer la parte del cuadro que cubre el personaje. La función getImageData del contexto funciona muy bien porque nos permite pasar el ancho y la altura del desplazamiento x / y. Luego usamos esta frameSection y lo ejecutamos a través de nuestra función getAverageRGB, que devuelve un solo valor RGB.

Los datos de imagen se almacenan normalmente en cuatro bytes Rojo [R], Verde [G], Azul [B] y A [alfa], por lo que tenemos que iterar a través de la parte del marco en cuatro pasos. Para calcular el color promedio, sumamos los valores de R, G y B, respectivamente, y lo dividimos por el número de píxeles en el marco.

Paso 4: Integrar todo junto

Ahora que hemos calculado el valor RGB promedio de la parte del cuadro que queremos dibujar, podemos seleccionar un carácter para representarlo.

Dibuja un personaje de color en el lienzo.

Finalmente, nuestra salida:

Construye filtros de cámara ASCII en tiempo real con Javascript plano Usa el carácter @ para indicar cada parte del cuadro

Espera, esto es aburrido. Agreguemos una variedad de caracteres en lugar de un simple carácter @. ¿Qué pasa con las letras inglesas o matriciales letras japonesas? Solo elige uno

Cambiar a un conjunto de caracteres más interesante. Construye filtros de cámara ASCII en tiempo real con Javascript plano El producto final. Hermoso caos de varios personajes. 😅

Conclusión

En este artículo, describo el proceso de creación de un filtro de cámara ASCII art sobre un flujo de cámara en vivo. Establecemos el bucle de renderización preguntando al usuario si se debe permitir el acceso a la fuente de la cámara y finalmente implementar el filtro de imagen utilizando el lienzo. Hasta la proxima vez

Construye filtros de cámara ASCII en tiempo real con Javascript plano Izquierda: transmisión de video original, derecha: salida ASCII

Gracias por tomarse el tiempo para leer mi artículo. Si le gusta, presione el botón Clap unas cuantas veces. Si este artículo le es útil, siéntase libre de compartirlo.

Para obtener más información acerca de mí, asegúrese de seguirme en Twitter, seguirme en los medios o visitar mi sitio.

Referencia

de

  Base de código: https://github.com/mariotacke/blog-real-time-ascii-camera-filter MDN: MediaDevices MDN: CanvasRenderingContext2D Video: Circuitos integrados y ley de Moore Fuente: compilado a partir de 0x información de HACKERNOON. Los derechos de autor pertenecen al autor, el enlace original: https://hackernoon.com/building-a-real-time-ascii-camera-filter-in-plain-javascript-5b6e1f2f95f9?source=collection_category—4—0——— ———–. Reimpreso sin permiso