[#HTML5] HowTo: Scan a #QRcode in a webpage using #JavaScript

Hello!

Do not ask me why, but now is a time of the day where I have to read a QR code from a Web browser. As I’m obviously not the first nor the last in this need, the first BING search leads me to a great JS library: DWA012 / html5-qrcode .

And from here it is simpler than anyone else

1. Create an ASP.Net WEB API project (just to test)

2. Add the JS and the load of the same on BundleConfig.cs

3. Add the following code to the Index.cshtml page

   1: @{

   2:     ViewBag.Title = "El Bruno - QR Reader";

   3: }

   4: <div class="row">

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

   6:         <h2>QR Code</h2>

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

   8:         </div>

   9:         <h6>Result</h6>

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

  11:         <br>

  12:     </div>

  13: </div>

  14:  

  15: @section scripts {

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

  17:     <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:         });

  13:     

</script>

  18: }

4. Run the app and ready!

As always a video to make it better

HTM5 QR Code Scan

And the download of the code already… well better code this your self Open-mouthed smile

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

Greetings @ La Finca

El Bruno

imageimageimageGoogle

Advertisements

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