Lector QR Javascript


 Debido a una aplicación que estoy desarrollando para control de visitas de funcionarios de una empresa a dar soporte, y debido a que algunos no hacen las visitas presenciales , se decidió colocar un codigo QR a los equipos para que en el momento en que el funcionario llegue hacer la visita lo lea y quede constancia de su presencia física en el lugar.

Me puse entonces a hacer el lector de QR , para mi sistema que esta en Java y Tomcar, hizo muchos ensayos con WebRTC (htmls) aunque me funciona de  forma discreta en el navegador la verdad fue que en IOS y Android no logre que me tomara la cámara de entorno ("enviroment"),  siempre se queda en la frontal ("front"), asi que siempre me tomaba el Qr de mi cara, no me sirvió, luego intente con OpenCV, con java no puede que me funcionara, lo logre bastante bien con Python , y ya lo tenia como una opción seria por si lo demás no me funcionaba, luego intente con las librerías para java de Zxing de lado del servidor , aunque leí la imagen no pude que el decodificador funcionara correctamente, tocaba dimensionar  la imagen y hacer varios ajustes de largo y ancho de la imagen , manipular el bitMap(), eliminar colores si los había etc, pero la calidad de la cámara tenia que ser 1A sino no veía el QR, en fin después de hacer intentos de varias maneras y leer cuanto chat y tutorial había respecto al tema la verdad  excepto por OpencCV en pyton era frustrante.

En ultimo momento y ya resignado hacer una "maraña" , java - Python me encontré este articulo : https://blog.minhazav.dev/research/html5-qrcode (gracias,gracias, gracias el señor los bendiga)

Alli se puede ver  funcionando claramente el lector de QR , en un sencillo Javascript con una librería ajustada de Zxing : html5-qrcode.js

A partir de esa librería es trivial el lector de Qr. aunque se ve larga en mi aplicación ,la realidad es así por algunos ajustes de mi parte para acondicionar  a la salida/captura de mi programa mediante la creación de una tabla dinámica function mostrarQr() que es lo mas largo del código (entre ajustes varios y presentación se van yo creo que mas del 80% del código que aquí presento), algunas lineas enbellecedoras y un ajuste de <style></style> para encuadrar la ventana de captura/lectura de la cámara, para que quede bien alineada y centrada dependiendo del dispositivo (navegador, android,IOS) de la presentación de boostrap y un revisión para ver si la pagina esta cargada antes de activar la cámara , poco mas. A la librería html5-qrcode.js le metí un poco la mano pero únicamente para cambiar los mensajes de ingles a español. Eete fue mi código final.

La librería ademas de capturar en "vivo" el codigo QR, permite leer una imagen de archivo QR, si se desea.

En pagina oficial de la librería hay muchas cosas de interés y un manejo interesante de Node, la verdad me dificulto donde encontrar de donde descargar lo que en verdad me interesaba

Esta es la pagina oficial de html5-qrcode.js: https://github.com/mebjas/html5-qrcode

De este link : en la misma pagina pueden descargar el archivo de interés que es html5-qrcode.js : https://github.com/mebjas/html5-qrcode/releases , en mi caso al momento versión 2.0.11 y allí encuentras
html5-qrcode.min.js 

que coloque en mi carpeta js

Nota: En la ventana del reader de la cámara no me acepto un tamaño inferior o igual 250px, en alguna parte lei que el tamaño mínimo de resolución de código QR es 3 cms(1.2 pulgadas) y que tiene que encuadrar en una ventana proporcional a eso en pixeles, unos 250px.

La verdad no hice mucho con eso la coloque mínimo en 300px y todo sobre ruedas.

Te pude interesar este link  Crear codigo QR en tomcat

---------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>
<head>
  <title>Qr code</title>

  <link href="css/bootstrap.min.css"   rel="stylesheet"/>
  <script src="js/bootstrap.min.js">         </script>
  <script src="js/html5-qrcode.min.js"></script>
 

  <style>
    .reader
           {
             display: block;
             width  : 350px;
           }
     @media (max-width: 767px)
       {
        .reader
           {
             display: block;
             width  : 300px;
           }
      }
  </style>
 </head>

  <body>
   
    <div class="jumbotron " >
       <center>
         <br>
         <div id="reader" class="reader"></div>
         <div id="scanned-result"></div>
         <center>
    </div>
  </body>


<script>
  function docReady(fn)
    {
     
      if (document.readyState === "complete" || document.readyState === "interactive") {
            setTimeout(fn, 1);
        }
      else
       {
        document.addEventListener("DOMContentLoaded", fn);
       }
   }
  function mostraQr(codeId, decodedText, decodedResult)
    {
        let resultSection = document.getElementById('scanned-result');
        let tableBodyId = "scanned-result-table-body";
        if (!document.getElementById(tableBodyId)) {
            let table = document.createElement("table");
            table.className = "styled-table";
            table.style.width = "100%";
            resultSection.appendChild(table);
            let theader = document.createElement('thead');
            let trow = document.createElement('tr');
            let th1 = document.createElement('th');
            th1.innerText = "conteo";
            let th2 = document.createElement('th');
            th2.innerText = "Formato";
            let th3 = document.createElement('th');
            th3.innerText = "Resultado";
            trow.appendChild(th1);
            trow.appendChild(th2);
            trow.appendChild(th3);
            theader.appendChild(trow);
            table.appendChild(theader);
            let tbody = document.createElement("tbody");
            tbody.id = tableBodyId;
            table.appendChild(tbody);

  }

        let tbody = document.getElementById(tableBodyId);
        let trow = document.createElement('tr');
        let td1 = document.createElement('td');
        td1.innerText = `${codeId}`;
        let td2 = document.createElement('td');
        td2.innerText = `${decodedResult.result.format.formatName}`;
        let td3 = document.createElement('td');
        td3.innerText = `${decodedText}`;
        trow.appendChild(td1);
        trow.appendChild(td2);
        trow.appendChild(td3);
        tbody.appendChild(trow);

    
  }
  docReady(function() {
        // Este el verdadero codigo de interes
        var lastMessage;
        var codeId = 0;
        function onScanSuccess(decodedText, decodedResult) {
        // y decodedText() es el heroe de la pelicula
                if (lastMessage !== decodedText) {
                        lastMessage = decodedText;
            mostrarQr(codeId, decodedText, decodedResult);
            ++codeId;
                }
        }
        let html5QrcodeScanner = new Html5QrcodeScanner(
        "reader",
        {
            fps: 10,
            qrbox: 250,

            experimentalFeatures: {
                useBarCodeDetectorIfSupported: true
            }
        });
        html5QrcodeScanner.render(onScanSuccess);
});


</script>
</head>
</html>









Comentarios

  1. yo me quiero suicidar, no veo la forma de hacer 2 cosas, 1 que funcione en red local y si lo tengo en https que funcione en navegador en iphone.

    ResponderEliminar

Publicar un comentario

Entradas populares