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

20 Feb 201419 Feb 2014 by elbruno, posted in Code Sample, EnglishPost, HowTo, HTML, Visual Studio 2013

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:     

  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

__ATA.cmd.push(function() {
__ATA.initSlot(\’atatags-198727961-5b527cee29a2c\’, {
collapseEmpty: \’before\’,
sectionId: \’198727961\’,
width: 300,
height: 250
});
});

__ATA.cmd.push(function() {
__ATA.initSlot(\’atatags-198727964-5b527cee29a2f\’, {
collapseEmpty: \’before\’,
sectionId: \’198727964\’,
width: 300,
height: 250
});
});

__ATA.cmd.push(function() {
__ATA.initVideoSlot(\’atatags-198727965-5b527cee29a71\’, {
sectionId: \’198727965\’,
format: \’inread\’
});
});

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

Leave a Reply Cancel reply

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

Gravatar

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 )

w

Cancel

Connecting to %s

var highlander_expando_javascript = function(){
var input = document.createElement( \’input\’ ),
comment = jQuery( \’#comment\’ );

if ( \’placeholder\’ in input ) {
comment.attr( \’placeholder\’, jQuery( \’.comment-textarea label\’ ).remove().text() );
}

// Expando Mode: start small, then auto-resize on first click + text length
jQuery( \’#comment-form-identity\’ ).hide();
jQuery( \’#comment-form-subscribe\’ ).hide();
jQuery( \’#commentform .form-submit\’ ).hide();

comment.css( { \’height\’:\’10px\’ } ).one( \’focus\’, function() {
var timer = setInterval( HighlanderComments.resizeCallback, 10 )
jQuery( this ).animate( { \’height\’: HighlanderComments.initialHeight } ).delay( 100 ).queue( function(n) { clearInterval( timer ); HighlanderComments.resizeCallback(); n(); } );
jQuery( \’#comment-form-identity\’ ).slideDown();
jQuery( \’#comment-form-subscribe\’ ).slideDown();
jQuery( \’#commentform .form-submit\’ ).slideDown();
});
}
jQuery(document).ready( highlander_expando_javascript );