javascript

Leer código de barras (lector USB conectado) con JavaScript

En este post te mostraré algo muy simple pero que no todos sabemos al principio: cómo conectar un lector de código de barras a nuestra aplicación de JavaScript.

Con esto me refiero a un lector de código de barras físico, conectado a la computadora ya sea por USB o PS/2.

Vamos a leer el código de barras y saber cuando el código se ha terminado de leer. Todo esto en la web con JavaScript y un input.

Nota: recuerda que en mi blog ya te enseñé a leer códigos de barras en JavaScript con la cámara del dispositivo, pero no con un lector físico de esos que tienen “luces rojas”.

Funcionamiento del lector

Los lectores son un periférico más en nuestra computadora, así como el ratón y teclado. Básicamente el lector no cuenta con una API o algo complicado para leer, ya que funciona como un teclado.

Lo que hace el lector al encontrar un código de barras es escribirlo (como si fuera un teclado, ya lo dije) y al final presionar la tecla Enter.

Sé que técnicamente el lector debe tener un funcionamiento complejo, pero lo que a nosotros nos importa es saber cómo se comporta al conectarlo, y ya lo dije, es como un teclado que escribe el código leído y presiona Enter.

Nota: puede que haya otro tipo de lectores en donde tal vez debamos usar el puerto serial o cosas complejas, pero hasta donde yo conozco, todos son así de simples.

Conectar JavaScript con lector de código de barras

Entonces al final esto es como trabajar con un teclado, así que vamos a escuchar las pulsaciones del teclado en nuestro input. Para ello podemos escuchar el evento keydown que se desencadena cada vez que el usuario presiona una tecla.

En este evento podemos saber el keyCode, mismo que nos dirá el código de la tecla presionada. Y para la tecla Enter tenemos el keyCode 13.

Entonces vamos a agregar un listener a nuestro input, y si detectamos un Enter significa que el código se ha terminado de leer.

Y ya al momento de leerlo nosotros podemos hacer cualquier cosa con el código de barras leído.

Código JS para leer código de barras

Veamos primero el código HTML, tenemos un simple input y la carga de nuestro script.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leer código de barras con JS</title>
</head>

<body>
    <h1>Leer código de barras con JS y lector físico</h1>
    <p>Enfoca el input (es decir, dale un clic) y lee un código con el lector. No olvides abrir la consola con F12</p>
    <input type="text" id="codigo" placeholder="Enfoca este input y usa el lector">
    <br>
    <p><a href="//parzibyte.me/blog">By Parzibyte</a></p>
</body>
<script src="script.js"></script>

</html>

Luego tenemos el código JavaScript, en donde recuperamos el elemento (obtenemos una referencia al mismo con querySelector) y le agregamos el listener:

document.addEventListener("DOMContentLoaded", () => {
    const $codigo = document.querySelector("#codigo");
    $codigo.addEventListener("keydown", evento => {
        if (evento.keyCode === 13) {
            // El lector ya terminó de leer
            const codigoDeBarras = $codigo.value;
            // Aquí ya podemos hacer algo con el código. Yo solo lo imprimiré
            console.log("Tenemos un código de barras:");
            console.log(codigoDeBarras);
            // Limpiar el campo
            $codigo.value = "";
        }
    });
});

Como puedes ver dentro del listener escuchamos todas las teclas presionadas, pero solo nos interesa cuando se presiona Enter.

Si esa tecla es presionada entonces obtenemos el código de barras leído y lo imprimimos (en este punto ya puedes hacer cualquier cosa con el código leído).

Por cierto, es importante que el input esté enfocado (esto se puede lograr con $codigo.focus()).

Y así es como podemos leer un código de barras con un lector físico en JS de manera muy simple. Obviamente esto funcionará para cualquier lenguaje de programación, solo hace falta leer la cadena y ya.

Puedes probar el ejemplo en este enlace, y por aquí te dejo más tutoriales con JavaScript.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/