Detector de incendios en base a video con javascript

Pagina del proyecto

Los incendios en espacios pequeños como apartamentos, casas o edificios son advertidos mediante detectores de humo y detectores de calor y son efectivos, pero estos tienen muchos problemas al tratarse de espacios abiertos.

Una aproximación diferente es pasar el problema al terreno de la visión computacional, en el que se tratara de detectar el fuego y el humo a través de vídeo en tiempo real.

Crear un detector incendios en base a vídeo tiene la ventaja de cubrir un área más grande con una simple cámara y no hereda ninguna deficiencia de los detectores tradicionales.

Para hacer esto me decidí por Javascript ya que es el lenguaje de programación interpretado que conozco mejor y con el que me siento más cómodo para experimentar, por ser relativamente rápido trabajar con el.

El repositorio de código de este proyecto se encuentra en Github, en la siguiente liga.

En primera instancia se comenzó por una simple imagen con fuego

1

Para poder trabajar con la imagen teníamos que cargarla en nuestro HTML y después utilizar el elemento canvas que nos permitirá la manipulación de imágenes pixel por pixel.

Para definir si se ha encontrado fuego se utilizo un método muy sencillo que se basa en un diccionario de colores para decidir que es fuego y que no.

Las coordenadas del pixel se envía a un escuchador donde se busca definir cuatro puntos maximos y minimos en los ejes "X" y "Y" para dibujar un rectángulo al finalizar.

Se obtuvieron los siguientes resultados

2

3

Después de detectar el fuego en las imagen se paso a detectarlo en video, podemos decir que el video solo son muchas imágenes continuas.

El proceso es muy similar en video y en imágenes, se seguirá trabajando con el objeto canvas, pero en lugar de recibir una imagen y pasarla al procesamiento, se pasan muchas.

Hay que tener una función que ejecute el procedimiento N veces cada determinado tiempo, debido a que la detección del fuego en la imagen es lento se hizo cada segundo y se obtuvieron buenos resultados con la flama de un encendedor.

4

5

Técnicamente para pasar una imagen a canvas se utilizaba la etiqueta <img> pero ahora se utiliza la etiqueta <video> y una función de Javascript que obtiene el vídeo de la webcam mediante el objeto getUserMedia y después se refresca el elemento canvas en una frecuencia determinada.

Para aumentar la velocidad del procesamiento de las imagen se implementaron los Web Workers, el resultado de integrar esta tecnologia es un rendimiento muy superior en el procesamiento.

Caemos en la idea que al finalizar el procesamiento del video, solo son necesarios los 4 puntos para dibujar nuestro rectángulo.

Actualmente el proyecto solo es demostrativo, pero es posible llevarlo a mucho más agregando mejoras de algoritmos para tener un detector de fuego en video fiable y que no falle cada vez que pasamos algo rojo frente a el (xD) .

Entre las mejoras que podemos agregar serían:

  • Algoritmo de detección de movimiento.
  • Algoritmo de búsqueda profunda.
  • Incorporar el modelo de color HSV.
  • Detección de humo.

Estas ideas las obtuve al buscar en Github algunos proyectos relacionados, la mayoria estaban escritos en C++ o Python, quiza tengan un mejor rendimiento.

Una ventaja de mi proyecto es que puedes correrlo con tan solo descargarte el código, tener una webcam y abrir el archivo index.html en tu navegador.

6

¡Mira mamá sin compilar!

Nuevamente el repositorio del proyecto se encuentra aquí, quiza mas adelante haga una pagina web para este proyecto.

Actualización

Utilizando Github Pages fue relativamente sencillo crear una pagina para mi proyecto y aquí lo pueden ver correr sin descargar nada.

Jesús Perales

Read more posts by this author.

Subscribe to Jesús Perales

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!