Leyendo código de barras para enviarlo a otro sitio usando algo como una API

Leer código de barras con cámara y enviarlo a página web

En este post te mostraré cómo leer un código de barras con una cámara usando JS (desde un teléfono, tableta o computadora con cámara web) y además enviarlo a una página web.

Esto nos va a permitir:

  • Usar la webapp expuesta aquí como una API, sin que tu sitio necesite HTTPS
  • Saltar la seguridad del acceso a la cámara solo en HTTPS, pues puedes leer el código de barras con la cámara y luego enviarlo a tu verdadero sitio web

Al final esta aplicación web será como una API gratuita para leer un código de barras y enviarlo a tu sitio web. Veamos los detalles a continuación.

Funcionamiento de la aplicación web

La webapp que lee el código de barras con JavaScript desde el navegador usando la cámara del dispositivo va a leer el código usando QuaggaJS pero lo va a reenviar al destino que tú le indiques en una variable GET.

Así puedes redireccionar a tus usuarios a la API e indicar la URL de redirección. Cuando el código de barras sea leído, se va a enviar en una variable GET al sitio que indicaste.

Leyendo código de barras

Lo primero que haremos será leer el código de barras como ya lo indiqué en mi post:

Leer código de barras con JavaScript y cámara

Ahora lo que vamos a cambiar es el evento cuando el código ha sido leído correctamente:

Quagga.onDetected((data) => {
  const codigo = data.codeResult.code;
  if (codigo && !leido && destino) {
    const url = destino + "?codigo=" + codigo;
    leido = true;
    window.location.href = url;
  }
});

Lo que estoy haciendo es concatenar el código leído a la URL de destino en la línea 4. Por cierto, estoy estableciendo una bandera de leido en true para evitar que se hagan varias redirecciones.

La magia y el envío del código están en la línea 6, pues ahí se redirecciona cuando se lee el código.

Modo de uso

La aplicación se encuentra en el siguiente enlace: https://parzibyte.github.io/enviar-codigo-barras-leido/

Si tú quieres usarlo, primero codifica el destino como base64 y envíalo a esa página en la variable GET destino.

En mi caso quiero que lo envíe a http://localhost/request.php por lo que codificado es aHR0cDovL2xvY2FsaG9zdC9yZXF1ZXN0LnBocA== y la URL final queda así:

https://parzibyte.github.io/enviar-codigo-barras-leido/?destino=aHR0cDovL2xvY2FsaG9zdC9yZXF1ZXN0LnBocA==

Al ingresar aparece el lector correctamente:

Leyendo código de barras para enviarlo a otro sitio usando algo como una API
Leyendo código de barras para enviarlo a otro sitio usando algo como una API

Y es redireccionado correctamente, pasando la lectura en la variable codigo.

En este caso en mi teléfono no tengo un servidor web escuchando en el puerto 80 en mi teléfono así que solo te mostraré la URL a la que se envió:

Código enviado desde API de lector de código de barras
Código enviado desde API de lector de código de barras

Poniendo todo junto

Si quieres puedes usar el servicio tal y como está, o clonar el repositorio, ajustar lo necesario y publicarlo en las GitHub pages.

Básicamente lo publicado aquí permite saltar las limitaciones de la API para acceder a la cámara web desde JS, pues si tu sitio no tiene https no podrás acceder a la misma ni leer códigos, por eso es que proporciono este servicio.

Te dejo con más tutoriales de JavaScript en mi blog.

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.

3 comentarios en “Leer código de barras con cámara y enviarlo a página web”

  1. Hola, todo bien, usted que me ayude a leer codigos de barras desde el dispositivo, de una base de datos que tengo en SQL Server y guadar en una table.
    Gracias
    Le pago por el servicio
    de Costa Rica

  2. hola estoy desarrollando una app web en bubble.io y quiero integrar un lector de código de barras que me devuelva el código a una entrada en mi aplicación. es posible. quisiera obtener su ayuda

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *