[#HTML5] HowTo: Escanear un codigo QR con #JavaScript

Hola!

No me pregunten porqué, pero ha llegado un momento del día donde tengo que leer un código QR desde un navegador. Como obviamente no soy el primero ni el último en necesitar esto, la primera búsqueda en BING me lleva a una fabulosa librería JS: DWA012 / html5-qrcode.

Y a partir de aquí es más simple que nadie

1. Crear un proyecto ASP.Net WEB API (solo para probar)

2. Agregar el JS y la carga del mismo en BundleConfig.cs

3. Agregar el siguiente código en la página Index.cshtml

   1: @{

   2:     ViewBag.Title = "Home Page";

   3: }

   4:  

   5: <div class="jumbotron">

   6: </div>

   7:  

   8: <div class="row">

   9:     <div class="col-md-12">

  10:         <h2>QR Code</h2>

  11:         <div id="reader" style="width:300px;height:250px">

  12:         </div>

  13:         <h6>Result</h6>

  14:         <span id="read" class="center"></span>

  15:         <br>

  16:     </div>

  17: </div>

  18:  

  19: @section scripts {

  20:     <!--Script references. -->

  21:     <script>
   1:  

   2:         $(document).ready(function () {

   3:             $('#reader').html5_qrcode(function (data) {

   4:                 alert(data);

   5:             },

   6:                 function (error) {

   7:                     console.log(error);

   8:                 }, function (videoError) {

   9:                     console.log(videoError);

  10:                 }

  11:             );

  12:         });    

</script>

  22: }

4. Ejecutar la app y listo!

Como siempre un video para que quede mejor

HTM5 QR Code Scan

Y la descarga del código … pues ya lo armas tu Open-mouthed smile

Download: https://github.com/dwa012/html5-qrcode

Saludos @ La Finca

El Bruno

image image image Google

32 thoughts on “[#HTML5] HowTo: Escanear un codigo QR con #JavaScript

  1. Hola, también se puede leer el código desde safari en un iphone o ipad? en un código similar que encontré me dice que el navegador no soporta getusermedia

    Like

    1. No lo he probado en un iPhone (no tengo devices de Apple a mano por ahora).
      Entiendo que si es estandar, debería funcionar, pero mejor probarlo …
      Saludos
      /Bruno

      Like

  2. Hola Bruno,, todo bien pero un detalle solo funciona localhost pero al publicarlo no.. es decir si un cliente accede a la url donde lo he publicado.. como activo su camara del dispositivo ??? ,, apoyo gracias

    Like

    1. Hola Carlos
      Una vez publicado, cada persona tiene que dar permisos explícitos a el site donde está publicado para activar la cámara y que se pueda usar desde el mismo.
      Saludos

      Like

  3. Hola, ha pasado un tiempo pero tengo este problema. Cuando hago las pruebas en mi pc funciona todo correctamente pero cuando accedo desde mi dispositivo móvil no funciona bien. Con navegador Mozilla toma la cámara pero no reconoce el código QR y con chrome no se abre ni la cámara (aunque trabajo con https) ¿Sabéis a que puede ser debido?
    Saludos

    Like

    1. Hola Fabian
      en que url lo has publicado? supongo que deberas tener especial cuidado al publicar en una url publica o intranet.
      Saludos
      -Bruno

      Like

      1. Hola,
        lo tengo disponible en https://zeeper.es/principal/scanerQR
        lo he probado en mi pc y como te digo funciona muy bien pero en el móvil no. Con Mozilla creo que no lo reconoce porque la camara no enfoca bien el código y se ve algo difuso y en Chrome se ve negro. También lo he probado en mi tablet y pasa lo mismo.

        Like

          1. Pues no se que decirte, en cuanto vuelva a algun proyecto web probare esto y actualizare el post
            Si encuentras la solucion, por favor comentala!
            Saludos
            /Bruno

            Like

    1. Yo no pude conseguirlo, si lo consigues háblame, o si necesitas colaboración para intentar buscar la solución también.

      Saludos

      Like

    1. y cual es el problema? ese es el funcionamiento por por defecto.
      Busca un par de tutoriales en Javascript y veras como cambiar de camara y como avanzar un poco mas con el ejemplo
      Saludos
      -Bruno

      Like

  4. hola no tienes un ejemplo mas claro con codigo fuente donde sirva el scan con la table o telefono desde el navegador
    quiero hacer un login de inicio de sesion con el qr gracias pero no consigo un ejemplo claro

    Like

  5. Hola , me genera el siguiente problema, es que cuando lee el codigo y lo muestra en una input , hago la consulta con la bd para ver si esta registrado, pero me envia un vacio por lo que la consulta siempre me da error, porque es que lo que se captura no se muestra como texto? puedes ayudarme ?

    Like

  6. Hola muy buen post, solo una pregunta, ¿funciona para otros tipos de códigos? por ejemplo, códigos de barras ?? y de ser así, de que manera puedo trabajar con estos códigos de barras ?

    Like

  7. Si vas a compartir algo primero serciorate de que funcione bien, como ya te diste cuenta mucha gente que llegó a esta publicación está comentando que no le funciona bien o de plano no funciona, en mi caso no funciona y no tiene caso que siga intentado con tu ejemplo primero no explicas bien como funciona y segundo este ejemplo no funciona si se abre un navegador en dispositivos móviles.

    Liked by 1 person

    1. Hola Ale
      Un par de cosas: en primer lugar se escribe “cerciórate” , no se que has escrito. Luego, si te fijas la fecha del post es de hace mas de 59 meses ! No veas como cambian las cosas en este tiempo. Y el código funciona, lo puedes ver en el propio post. Eso si, hay que actualizarlo a la fecha actual, donde los navegadores, permisos y otros factores han cambiado 😀
      Un Saludo “Ale Alosno” (supongo que tu apellido tampoco esta bien escrito?)

      Like

  8. Hola, tengo este error:
    Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided.

    Estuve mirando soluciones pero aun no consigue que funcione.
    ¿Puedes ayudarme?

    Like

  9. actualice estos códigos fuentes , pero me dice que no encuentra ningún patrón , a que crees que se deberá esto?
    saludos

    Like

Leave a Reply to eduardo ferrer Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.