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í:
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.
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
Claro, envíeme un mensaje en https://parzibyte.me/#contacto
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