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:
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.
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.
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:
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.
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ó:
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.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios
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