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

One response to “[#HTML5] HowTo: Scan a #QRcode in a webpage using #JavaScript”

  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

Discover more from El Bruno

Subscribe now to keep reading and get access to the full archive.

Continue reading