摘自: https://elbruno.com/2014/02/20/html5-howto-scan-a-qrcode-in-a-webpage-using-javascript/
<
iframe src=\”https://elbruno.com/2014/02/20/html5-howto-scan-a-qrcode-in-a-webpage-using-javascript/\” class=\”iframe-full-content\”>
[#HTML5] HowTo: Scan a #QRcode in a webpage using #JavaScript
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
And the download of the code already… well better code this your self
Download: https://github.com/dwa012/html5-qrcode
Greetings @ La Finca
El Bruno
One thought on “[#HTML5] HowTo: Scan a #QRcode in a webpage using #JavaScript”
Leave a Reply Cancel reply
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 );
/* */
//initialize and attach hovercards to all gravatars
jQuery( document ).ready( function( $ ) {
if (typeof Gravatar === \”undefined\”){
return;
}
if ( typeof Gravatar.init !== \”function\” ) {
return;
}
Gravatar.profile_cb = function( hash, id ) {
WPGroHo.syncProfileData( hash, id );
};
Gravatar.my_hash = WPGroHo.my_hash;
Gravatar.init( \’body\’, \’#wp-admin-bar-my-account\’ );
});
/* */
window.WPCOM_sharing_counts = {\”https:\\/\\/elbruno.com\\/2014\\/02\\/20\\/html5-howto-scan-a-qrcode-in-a-webpage-using-javascript\\/\”:6347};
window._idl = {};
_idl.campaign = \”\”;
_idl.variant = \”banner\”;
(function() {
var idl = document.createElement(\’script\’);
idl.type = \’text/javascript\’;
idl.async = true;
idl.src = (\’https:\’ == document.location.protocol ? \’https://\’ : \’http://\’) + \’members.internetdefenseleague.org/include/?url=\’ + (_idl.url || \’\’) + \’&campaign=\’ + (_idl.campaign || \’\’) + \’&variant=\’ + (_idl.variant || \’banner\’);
document.getElementsByTagName(\’body\’)[0].appendChild(idl);
})();
/* */
/* */
/* <![CDATA[ */
var actionbardata = {\"siteID\":\"19872796\",\"siteName\":\"El Bruno\",\"siteURL\":\"https:\\/\\/elbruno.com\",\"icon\":\"\”,\”canManageOptions\”:\”\”,\”canCustomizeSite\”:\”\”,\”isFollowing\”:\”\”,\”themeSlug\”:\”pub\\/karuna\”,\”signupURL\”:\”https:\\/\\/wordpress.com\\/start\\/\”,\”loginURL\”:\”https:\\/\\/brunocapuano.wordpress.com\\/wp-login.php?redirect_to=https%3A%2F%2Felbruno.com%2F2014%2F02%2F20%2Fhtml5-howto-scan-a-qrcode-in-a-webpage-using-javascript%2F\”,\”themeURL\”:\”https:\\/\\/wordpress.com\\/theme\\/karuna\\/\”,\”xhrURL\”:\”https:\\/\\/elbruno.com\\/wp-admin\\/admin-ajax.php\”,\”nonce\”:\”64a5c60b83\”,\”isSingular\”:\”1\”,\”isFolded\”:\”\”,\”isLoggedIn\”:\”\”,\”isMobile\”:\”\”,\”subscribeNonce\”:\”\”,\”referer\”:\”https:\\/\\/elbruno.com\\/2014\\/02\\/20\\/html5-howto-scan-a-qrcode-in-a-webpage-using-javascript\\/\”,\”canFollow\”:\”1\”,\”feedID\”:\”408672\”,\”statusMessage\”:\”\”,\”customizeLink\”:\”https:\\/\\/brunocapuano.wordpress.com\\/wp-admin\\/customize.php?url=https%3A%2F%2Fbrunocapuano.wordpress.com%2F2014%2F02%2F20%2Fhtml5-howto-scan-a-qrcode-in-a-webpage-using-javascript%2F\”,\”postID\”:\”6347\”,\”shortlink\”:\”https:\\/\\/wp.me\\/p1lnOY-1En\”,\”canEditPost\”:\”\”,\”editLink\”:\”https:\\/\\/wordpress.com\\/post\\/elbruno.com\\/6347\”,\”statsLink\”:\”https:\\/\\/wordpress.com\\/stats\\/post\\/6347\\/elbruno.com\”,\”i18n\”:{\”view\”:\”View site\”,\”follow\”:\”Follow\”,\”following\”:\”Following\”,\”edit\”:\”Edit\”,\”login\”:\”Log in\”,\”signup\”:\”Sign up\”,\”customize\”:\”Customize\”,\”report\”:\”Report this content\”,\”themeInfo\”:\”Get theme: Karuna\”,\”shortlink\”:\”Copy shortlink\”,\”copied\”:\”Copied\”,\”followedText\”:\”New posts from this site will now appear in your Reader\”,\”foldBar\”:\”Collapse this bar\”,\”unfoldBar\”:\”Expand this bar\”,\”editSubs\”:\”Manage subscriptions\”,\”viewReader\”:\”View site in Reader\”,\”viewReadPost\”:\”View post in Reader\”,\”subscribe\”:\”Sign me up\”,\”enterEmail\”:\”Enter your email address\”,\”followers\”:\”Join 3,978 other followers\”,\”alreadyUser\”:\”Already have a WordPress.com account? Log in now.\”,\”stats\”:\”Stats\”}};
/* ]]> */
/* */
/* */
var windowOpen;
jQuery( document.body ).on( \’click\’, \’a.share-linkedin\’, function() {
// If there\’s another sharing window open, close it.
if ( \’undefined\’ !== typeof windowOpen ) {
windowOpen.close();
}
windowOpen = window.open( jQuery( this ).attr( \’href\’ ), \’wpcomlinkedin\’, \’menubar=1,resizable=1,width=580,height=450\’ );
return false;
});
var windowOpen;
jQuery( document.body ).on( \’click\’, \’a.share-twitter\’, function() {
// If there\’s another sharing window open, close it.
if ( \’undefined\’ !== typeof windowOpen ) {
windowOpen.close();
}
windowOpen = window.open( jQuery( this ).attr( \’href\’ ), \’wpcomtwitter\’, \’menubar=1,resizable=1,width=600,height=350\’ );
return false;
});
var windowOpen;
jQuery( document.body ).on( \’click\’, \’a.share-google-plus-1\’, function() {
// If there\’s another sharing window open, close it.
if ( \’undefined\’ !== typeof windowOpen ) {
windowOpen.close();
}
windowOpen = window.open( jQuery( this ).attr( \’href\’ ), \’wpcomgoogle-plus-1\’, \’menubar=1,resizable=1,width=480,height=550\’ );
return false;
});
var windowOpen;
jQuery( document.body ).on( \’click\’, \’a.share-facebook\’, function() {
// If there\’s another sharing window open, close it.
if ( \’undefined\’ !== typeof windowOpen ) {
windowOpen.close();
}
windowOpen = window.open( jQuery( this ).attr( \’href\’ ), \’wpcomfacebook\’, \’menubar=1,resizable=1,width=600,height=400\’ );
return false;
});
var windowOpen;
jQuery( document.body ).on( \’click\’, \’a.share-pocket\’, function() {
// If there\’s another sharing window open, close it.
if ( \’undefined\’ !== typeof windowOpen ) {
windowOpen.close();
}
windowOpen = window.open( jQuery( this ).attr( \’href\’ ), \’wpcompocket\’, \’menubar=1,resizable=1,width=450,height=450\’ );
return false;
});
var windowOpen;
jQuery( document.body ).on( \’click\’, \’a.share-telegram\’, function() {
// If there\’s another sharing window open, close it.
if ( \’undefined\’ !== typeof windowOpen ) {
windowOpen.close();
}
windowOpen = window.open( jQuery( this ).attr( \’href\’ ), \’wpcomtelegram\’, \’menubar=1,resizable=1,width=450,height=450\’ );
return false;
});
var windowOpen;
jQuery( document.body ).on( \’click\’, \’a.share-skype\’, function() {
// If there\’s another sharing window open, close it.
if ( \’undefined\’ !== typeof windowOpen ) {
windowOpen.close();
}
windowOpen = window.open( jQuery( this ).attr( \’href\’ ), \’wpcomskype\’, \’menubar=1,resizable=1,width=305,height=665\’ );
return false;
});
//
var skimlinks_pub_id = \”725X584219\”
var skimlinks_sitename = \”brunocapuano.wordpress.com\”;
<div id=\"likes-other-gravatars\">
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?
LikeLike