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:

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:

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ó:

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.