Hace poco explicaba cómo capturar vídeo usando Javascript y HTML5. Uno de los posibles usos de esta captura de vídeo es la lectura de códigos de barras. Tradicionalmente para «leer» un código de barras se ha utilizado hardware específico, pero de un tiempo a esta parte, la capacidad de proceso es suficiente como para utilizar algoritmos de visión artificial que nos permiten localizar el código de barras dentro de una imagen y decodificarlo.

Implementar este tipo de algoritmos no es una tarea trivial (aunque tampoco es imposible), así que para ver cómo funciona vamos a usar una librería que se encarga de (casi) todo: QuaggaJS.

La librería

QuaggaJS es una librería que nos permite decodificar códigos de barras utilizando Javascript. Soporta varios tipos de códigos de barras, de momento todos unidimensionales, como EAN, Code128 o Code39.

Se trata de una librería bastante reciente (su primera versión de principios de este año) y con un desarrollo activo, por lo que todavía puede que no esté todo lo pulida que a uno le gustaría, y seguramente con el tiempo se añadan nuevas funcionalidades.

Para usarla, sólo necesitamos irla alimentando con imágenes, y ella se encargada de detectar los códigos de barras que aparezcan en las imágenes. Podemos proporcionarle imágenes estáticas, o podemos utilizar directamente el stream de vídeo procedente de la cámara para decodificar los códigos de barras en tiempo real.

El ejemplo

Vamos a ver un ejemplo de cómo decodificar códigos de barrras usando el vídeo capturado en tiempo real.

Lo primero será instalar QuaggaJS, cosa que podemmos hacer a través de npm (si vamos a usarla con browserify) o descargando y referenciando el fichero js, como hacían nuestros mayores antes de que los gestores de paquetes dominasen el mundo.

En nuestro HTML necesitaremos algo así:

<p>Barcode: <span class="found"></span></p>
<div id="interactive" class="viewport"></div>

Es muy importante que el elemento donde vamos a ir mostrando el vídeo tenga como id interactive y como class viewport. Resulta extraño, pero ahora mismo no hay ninguna forma de indicarle a la QuaggaJS el elemento que vamos a utilizar y busca directamente por esos valores.

Ahora que tenemos el HTML mínimo para realizar la captura de vídeo, podemos pasar a la parte Javascript. Empezamos por inicializar QuaggaJS:

Quagga.init({
  inputStream: {
      name: "Live",
      type: "LiveStream",
      constraints: {
            width: 640,
            height: 480,
            facing: "environment"
        }
  },
  locator: {
    patchSize: "medium",
    halfSample: true
  },
  numOfWorkers: 4,
  locate: true,
  decoder : {
      readers: ["code_128_reader", "ean_reader"]
  }
}, function() {
  Quagga.start();
});

El método init nos permite inicializar la librería estableciendo el origen del vídeo, que en este caso marcamos como LiveStream para indicar que queremos capturarlo de la cámara, los parámetros de captura, y varios parámetros del algoritmo de identificación de código de barras.

Es especialmente importante añadir en la colección de decoder.readers aquellos tipos de códigos de barras que queramos intentar decodificar, por si queremos limitar la lectura a algún tipo determinado (cosa que además acelerará ligeramente el proceso de decodificación).

Por último, podremos pasar la típica funcción callback que se invocará cuando la inicialización se haya completado. En este caso lo que haremos será iniciar el proceso de reconocimiento invocando el método Quagga.start().

Para ser notificados cuando se detecte un código de barras debemos emplear el método Quagga.onDetected(callback):

Quagga.onDetected(function(result) {
  var code = result.codeResult.code;
  document.querySelector(".found").innerHTML = code;
});

Además, podremos recibir información de cómo va el proceso de decodificación usando el método Quagga.onProcessed(callback), del cual podéis encontrar un ejemplo en el repositorio oficial.

Podéis ver el ejemplo funcionando y jugar con él en este jsfiddle.

Las pegas

Poder utilizar este tipo de funcionalidades en una aplicación web está muy bien, pero la realidad es que tiene unas cuantas limitaciones, algunas propias de la librería que hemos usado en el ejemplo y otras tal vez más ligadas a la plataforma.

En lo que respecta a QuaggaJS, se nota que todavía está un poco verde. La documentación es escasa e incompleta, y hay algunas cosas que resulta dificilmente justificables, como la obligatoriedad de identificar el elemento que va mostrar el video con un id y una clase determinada (cosa que además no he encontrado documentada en ningún sitio y me hizo perder un buen rato).

Por otra parte, su desarrollo está bastante vivo, por lo que cabe esperar que estas cosas se vayan resolviendo poco a poco.

Otro problema es el rendimiento a la hora de reconocer códigos de barras. Entiendo que el proceso que tiene que realizar es costoso porque necesita localizar el código dentro de la imagen antes de decodificarlo, pero la verdad es que no es demasiado rápido. Para leer un código de barras de vez en cuando está bien, pero si pretendes hacer una aplicación que realice una lectura intesiva de códigos de barras (por ejemplo una aplicación de inventario, de entrada de mercancía, de picking, etc.), es muy lento.

No sé hasta qué punto es culpa de los algoritmos elegidos, de la forma en la que están implementados, del rendimiento «puro» del motor de Javascript, o de la potencia del teléfono con el que he hecho las pruebas. Aun así, supongo que como todo lo que está relacionado con rendimiento será algo que vaya mejorando a lo largo del tiempo.