Los códigos QR se han vuelto mucho más populares en los últimos años. Son muy utilizados para proporcionar información y facilitar el check-in. Si bien se encuentra más comúnmente como parte de las aplicaciones móviles nativas, también puede incrustar escaneos QR en sus sitios web.
Vea cómo usar la popular biblioteca jsQR en combinación con Web Workers para ofrecer una experiencia de escaneo QR de alto rendimiento en la web. Asumiremos que ya está familiarizado con los fundamentos de JavaScript y tiene un sitio web en funcionamiento al que está listo para agregar su código.
1. Primeros pasos
Contenidos
Comience descargando el biblioteca jsQR en formato distribuible precompilado. Asegúrese de que sea de acceso público en su servidor web; en este artículo, asumimos que la URL es /jsQR.js. jsQR también está disponible como un paquete npm si tiene configurada una rutina de compilación.
Este paquete proporciona detección en tiempo real de códigos QR visibles en una transmisión de video. Recupera los datos dentro del código y los proporciona a su aplicación.
2. Obtener una señal de cámara
El siguiente paso es adquirir un MediaStream desde el navegador. Usa la API de mediaDevices para obtener una nueva transmisión desde la cámara del usuario:
const getCamera = async () => { if (!navigator.mediaDevices) { throw new Error(«mediaDevices API no disponible»); } const dispositivos = esperar navigator.mediaDevices.enumerateDevices(); const cámaras = dispositivos.filtro(d => (d.tipo === «entrada de video»)); cámaras de retorno[0]; };
Estamos seleccionando la primera cámara encontrada. Puede agregar lógica adicional para permitir la selección de una cámara específica indicada por el usuario. En una aplicación real, también debe mejorar el manejo de errores cuando la API de mediaDevices no está disponible. Esto podría deberse a que el usuario está en un navegador antiguo o porque ha bloqueado permanentemente el permiso de acceso a la cámara.
Use la función getCamera() para adquirir la transmisión de video. Adjunte la transmisión a un elemento
const stream = esperar getCamera(); const video = documento.getElementById(«video»); video.srcObject = corriente; esperar video.play();
3. Crear una pantalla
El siguiente paso es crear un elemento de lienzo. Los datos de video se transmitirán desde la cámara al lienzo donde se extraerán los píxeles de la imagen y se alimentarán a jsQR. La pantalla debe escalarse para que coincida con las dimensiones de la transmisión de video.
const videoTracks = await stream.getVideoTracks(); const videoTrackSettings = videoTracks[0].getConfiguración(); const lienzo = documento.createElement(«lienzo»); canvas.height = videoTrackSettings.height; canvas.width = videoTrackSettings.width; const canvasContext = canvas.getContext(«2d»);
El contexto de la pantalla se usará en el siguiente paso para dibujar cada cuadro de la transmisión de video en la pantalla.
4. Agregar jsQR
Luego agregue jsQR a su código. Ejecutando jsQR en un trabajador web permite que el navegador delegue esto a un proceso en segundo plano, mejorando el rendimiento. jsQR necesita escanear cada cuadro de video, por lo que ejecutarlo en su hilo principal de JavaScript puede causar ralentizaciones severas en dispositivos de gama baja.
El hilo principal y su trabajador web pueden comunicarse a través de mensajes. Su tema principal enviará un mensaje al trabajador jsQR cada vez que haya un nuevo cuadro de video disponible. El trabajador inspeccionará este marco en busca de códigos QR en su subproceso de fondo y luego enviará un mensaje al subproceso principal cuando se procese el marco.
Cargue su trabajador en su código JavaScript principal y agregue un detector de mensajes:
const qrTrabajador = nuevo Trabajador(«/qr-trabajador.js»); qrWorker.addEventListener(«mensaje», ({data}) => { if (data) { // Datos del código QR disponibles // // Manejar un escaneo exitoso aquí. } else { // No se detectó ningún código QR en este cuadro // // Envía el siguiente cuadro al trabajador QR // ahora (este código se presenta a continuación). tick(); } });
A continuación, agregue qr-worker.js a su proyecto. Esto debe ser de acceso público en la URL proporcionada al constructor Worker. Los navegadores descargarán el trabajador web cuando sea necesario.
importScripts(«jsQR.js»); self.addEventListener(«mensaje», e => { const {datos, ancho, alto} = e.datos; const qrData = jsQR(datos, ancho, alto); self.postMessage(qrData); });
la función importScripts() descarga la biblioteca jsQR. Esta llamada es equivalente a una etiqueta
