Crear un lector de códigos de barras utilizando React

Tiempo de lectura: 2 minutos

Hoy vamos a aprender cómo implementar un lector de códigos de barras utilizando React.

Lo primero que tenemos que hacer es instalar la librería quagga2 también se puede usar quagga.

npm install @ericblade/quagga2 --save

Una vez instalado, vamos a crear un componente llamado scanner.tsx

import Quagga from '@ericblade/quagga2';
import React, { useEffect, useCallback } from 'react';

interface ScannerProps {
    onDetected: (result: any) => void;
}

const Scanner: React.FC<ScannerProps> = ({ onDetected }) => {
    const _onDetected = useCallback((result: any) => {
        onDetected(result);
    }, [onDetected]);

    useEffect(() => {
        Quagga.init(
            {
                inputStream: {
                    type: 'LiveStream',
                    constraints: {
                        width: 640,
                        height: 480,
                        facingMode: 'environment', // or user
                    },
                },
                locator: {
                    patchSize: 'medium',
                    halfSample: true,
                },
                numOfWorkers: 4,
                decoder: {
                    readers: ["ean_reader"],
                },
                locate: true,
            },
            function (err) {
                if (err) {
                    return console.log(err);
                }
                Quagga.start();
            }
        );
        Quagga.onDetected(_onDetected);

        return () => {
            Quagga.offDetected(_onDetected);
            Quagga.stop(); // Detiene el escaneo cuando el componente se desmonta
        };
    }, [_onDetected]);

    return <div id="interactive" className="viewport" style={{
        width: '640px', 
        height: '480px',
        margin: '0 auto'
    }}/>;
};

export default Scanner;

El lector reconocerá códigos que indiquemos en el decoder: { readers: [«ean_reader», …] para añadir más puedes consultar la documentación de quagga:

Códigos disponibles:

    code_128_reader (default)
    ean_reader
    ean_8_reader
    code_39_reader
    code_39_vin_reader
    codabar_reader
    upc_reader
    upc_e_reader
    i2of5_reader
    2of5_reader
    code_93_reader

Y ahora vamos a utilizarlo en cualquiera de nuestras pantallas:

Primero creamos un estado:

  const [resultScanner, setResultScanner] = useState<any>();

Ahora obtenemos la actualización del estado:

  useEffect(() => {

    if (resultScanner!= undefined) {
      alert("Result Scan: " + JSON.stringify(resultScanner));
    }

  }, [resultScanner])

Y ahora lo usamos con el componente creado:

<Scanner onDetected={setResultScanner} />