[#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

13 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

Leave a 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s