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

1 comment

  1. Hi! When i upload it to my host, it not working (not camera is showed). But when run in localhost it work perfect! What happened?

    Like

Leave a comment

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.