Cómo crear un escáner de código de barras en vivo usando la cámara web en JavaScript

Cómo crear un escáner de código de barras en vivo usando la cámara web en JavaScript

Un código de barras es un código legible por máquina en forma de números o patrones de líneas paralelas de diferentes anchos. Se utilizan para identificar un producto. Los sistemas de código de barras ayudan a las empresas y organizaciones a realizar un seguimiento de los productos y precios para una gestión centralizada en un sistema de software informático que permite incrementos increíbles en la productividad y la eficiencia. Desde hace mucho tiempo, los supermercados, hipermercados y otros grandes almacenes utilizan lectores de códigos de barras que se incorporan en dispositivos o sistemas complejos y permiten al vendedor escanear el producto fácilmente. Sin embargo, estos sistemas suelen ser, como se ha dicho, complejos y nada baratos.

Si eres un desarrollador web que trabaja con (o tal vez con una gran) empresa que por alguna razón, ya sea para vender algo o simplemente porque parte de la información de los documentos generados por tu sistema se puede recuperar fácilmente con este tipo de herramienta, entonces puede implementar esta función en su aplicación y ofrecerla a sus clientes. Seguramente estarán felices si saben que no necesitan comprar un dispositivo extra para escanear el código sino solo con su cámara web y lograr al mismo tiempo, la misma calidad.

En este artículo, le mostraremos cómo crear un escáner de código de barras en vivo con JavaScript utilizando la increíble biblioteca QuaggaJS en su aplicación web.

Que es QuaggaJS

QuaggaJS es un escáner de código de barras escrito íntegramente en JavaScript que admite la localización y decodificación en tiempo real de varios tipos de códigos de barras como EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5 y CODABAR. La biblioteca también puede usarse getUserMediapara obtener acceso directo a la transmisión de la cámara del usuario. Aunque el código se basa en un procesamiento de imágenes pesado, incluso los teléfonos inteligentes más recientes son capaces de localizar y decodificar códigos de barras en tiempo real. QuaggaJS es una versión modificada de la biblioteca zxing que facilita el proceso de escaneo de códigos de barras para su usuario. Simplemente hablando, este lector es invariable a la escala y la rotación, mientras que otras bibliotecas requieren que el código de barras esté alineado con la ventana gráfica. Este no es otro puerto del gran zxing biblioteca, pero más como una extensión. Esta implementación cuenta con un localizador de códigos de barras que es capaz de encontrar un patrón similar a un código de barras en una imagen, lo que da como resultado un cuadro delimitador estimado que incluye la rotación.

Quagga hace uso de muchas API web modernas que aún no están implementadas por todos los navegadores. Hay dos modos en los que opera Quagga:

  1. analizar imágenes estáticas (a través de Blobs).
  2. usando una cámara para decodificar las imágenes de una transmisión en vivo (requiere la presencia de la API MediaDevices).

Así es, también puede usar quaggaJS directamente con imágenes.

Instalación

Si usa administradores de paquetes, puede instalar Quagga fácilmente en su proyecto usando NPM:

npm install quagga

O con Bower:

bower install quagga

Alternativamente, puede simplemente descargar e incluir quagga.min.jsen su proyecto y estará listo para comenzar. El script expone la biblioteca en el espacio de nombres global bajo Quagga:

<!-- Incluir la versión reducida de quagga de un archivo local -->
<script src="quagga.min.js"></script>

<!-- O usa un CDN -->
<script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>

O si lo está usando desde ES6 con React, Angular, etc., entonces puede importarlo:

import Quagga from 'quagga'; // ES6
const Quagga = require('quagga').default; // Common JS (important: default)

Para obtener más información sobre esta biblioteca, le recomendamos que visite el repositorio oficial de Github aquí .

Uso

Como se mencionó anteriormente, Quagga funciona de 2 maneras, usando el escáner en vivo con la cámara web o procesando una imagen estática:

Escáner en vivo

Para poder escanear dinámicamente con la cámara web, obviamente necesita un navegador que lo admita navigator.getUserMedia. Comience por inicializar Quagg y configure el modo LiveStream. Una vez que se haya establecido la configuración predeterminada, use el Quagga.startmétodo para iniciar la transmisión de video y comenzar a ubicar y decodificar las imágenes. Debe configurar el tipo de códigos de barras que desea procesar a través de los lectores de propiedades en la opción de decodificador:

Quagga.init({
    inputStream : {
        name : "Live",
        type : "LiveStream",
         // Or '#yourElement' (optional)
        target: document.querySelector('#yourElement') 
    },
    decoder : {
        readers : ["code_128_reader"]
    }
}, function(err) {
    if (err) {
        console.log(err);
        return
    }
    console.log("Initialization finished. Ready to start");
    Quagga.start();
});

Al final del artículo, puedes ver un ejemplo completo del escáner en vivo que incluye la función de seguimiento.

Imagen estática

Si desea procesar imágenes de archivos (ya sea una imagen cargada al servidor por su usuario o directamente en el navegador), puede hacerlo con Quagga. Lo único que debe hacer es establecer la opción de localización truey proporcionar la ruta a la imagen (o la representación de la imagen en uri de datos base64):

Quagga.decodeSingle({
    decoder: {
        readers: ["code_128_reader"] // Lista de lectores activos
    },
    locate: true, // intenta localizar el código de barras en la imagen
    // Puede establecer la ruta a la imagen en su servidor
    // o usando su representación URI de datos base64data:image/jpg;base64, + data
    src: '/barcode_image.jpg'
}, function(result){
    if(result.codeResult) {
        console.log("result", result.codeResult.code);
    } else {
        console.log("not detected");
    }
});

Aunque hemos resumido ambas funciones en su expresión más sencilla, vale la pena leer la documentación para comprobar las características más interesantes que puede implementar.

Ejemplo

El siguiente documento muestra una implementación muy simple que mostrará el escáner en el scanner-containerdiv y rastreará el escáner de código de barras en él. Una vez que se procesa un código de barras válido, mostrará su resultado en la consola (en el lienzo detectado):

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Para realizar el seguimiento correctamente */
        canvas.drawing, canvas.drawingBuffer {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <!-- Div para mostrar el escáner -->
    <div id="scanner-container"></div>
    <input type="button" id="btn" value="Start/Stop the scanner" />

    <!-- Incluir la biblioteca image-diff -->
    <script src="quagga.min.js"></script>

    <script>
        var _scannerIsRunning = false;

        function startScanner() {
            Quagga.init({
                inputStream: {
                    name: "Live",
                    type: "LiveStream",
                    target: document.querySelector('#scanner-container'),
                    constraints: {
                        width: 480,
                        height: 320,
                        facingMode: "environment"
                    },
                },
                decoder: {
                    readers: [
                        "code_128_reader",
                        "ean_reader",
                        "ean_8_reader",
                        "code_39_reader",
                        "code_39_vin_reader",
                        "codabar_reader",
                        "upc_reader",
                        "upc_e_reader",
                        "i2of5_reader"
                    ],
                    debug: {
                        showCanvas: true,
                        showPatches: true,
                        showFoundPatches: true,
                        showSkeleton: true,
                        showLabels: true,
                        showPatchLabels: true,
                        showRemainingPatchLabels: true,
                        boxFromPatches: {
                            showTransformed: true,
                            showTransformedBox: true,
                            showBB: true
                        }
                    }
                },

            }, function (err) {
                if (err) {
                    console.log(err);
                    return
                }

                console.log("Initialization finished. Ready to start");
                Quagga.start();

                // Establecer bandera en se está ejecutando
                _scannerIsRunning = true;
            });

            Quagga.onProcessed(function (result) {
                var drawingCtx = Quagga.canvas.ctx.overlay,
                drawingCanvas = Quagga.canvas.dom.overlay;

                if (result) {
                    if (result.boxes) {
                        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                        result.boxes.filter(function (box) {
                            return box !== result.box;
                        }).forEach(function (box) {
                            Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
                        });
                    }

                    if (result.box) {
                        Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
                    }

                    if (result.codeResult && result.codeResult.code) {
                        Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
                    }
                }
            });


            Quagga.onDetected(function (result) {
                console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
            });
        }


        // Iniciar / detener el escáner
        document.getElementById("btn").addEventListener("click", function () {
            if (_scannerIsRunning) {
                Quagga.stop();
            } else {
                startScanner();
            }
        }, false);
    </script>
</body>

</html>

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable