HTML5 QR Code scanning with javascript - Support for scanning the local file and using default camera added (v1.0.5) | Minhaz’s Blog

[utterances-bot]

HTML5 QR Code scanning with javascript - Support for scanning the local file and using default camera added (v1.0.5) | Minhaz’s Blog

html5-qrcode helps developer to integrate QR code scanning in HTML5 based applications. It abstracts camera access and usage on different browsers and simplify QR Code scanning for developers. The primary goal of the library is cross-platform support across different OS versions and Browsers. One of the key problems with cross-platform support was some browsers in Android and many browsers in iOS (almost all other than Safari which are based on WebKit for iOS) did not support camera access. This prevents users from doing inline QR Code scanning which is the primary feature of the library. To mitigate this I have added support for scanning local media on the device and it implicitly adds support for capturing QR Code using default camera on the device and scanning it. This is an upgrade to the existing library - you can read more about it here. In this article I have explained now file-based scanning works and how to use it.

https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/

[ziobit]

Found the reason WHY it was not working on my setup! Using a (crappy) browser on my phone, I finally got a detailed error. And the reason was on my test server, the page was NOT on https, so most browsers were NOT ALLOWING enumerating the cameras! Edge let me do it, and my vivo browser too. Both chrome and ff didn't, but didn't provide an error either! So maybe put it in the faq... if it's not working, be sure to use a https connection otherwise the browser will not let enumerate the cameras! This is the link my (crappy) browser gave: https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features

[mebjas]

Ah that is a great point, I'll update the README. Can you verify if file based approach also don't work in http version?

[OneDivZero]

great work! I'll trying to integrate it in an app right now (social context) ... maybe you wanna support me (currently rails-based frontend cause of rapid prototyping)

[mebjas]

@OneDivZero Are you facing issues in integration?

[OneDivZero]

@mebjas yes, there seems to be a problem with the recognized scan-region for small viewports. I printed a qr-code in the size of a hand and I'm trying it to scan with an iPhone 7 using a qr-box with 350x350px (and boxsize in code is not set, thus it should use full dimension). You have to hold your phone about 0,5m far away only for having a chance to get a match. And then it only succeeds in round about one out of ten trials. It works great with macbook-cam, when using more than a qr-box with 600+ px. But reducing step by step the size also works bad on desktop browser.

[OneDivZero]

I'll create an issue ;-)

[mebjas]

@OneDivZero Fixed :)

[cfcoderatcodefactory]

This looks amazing – do you have a working version (without buttons to ask for permission to use camera, selection of camera etc.) somewhere?

[mebjas]

Camera permissions are required so the demo with buttons are at https://blog.minhazav.dev/research/html5-qrcode.html

Don't have a demo without button but would be easy to create, just request permission on page load. But based on research I read, requesting permission on page startup without context has higher chance of rejection by users.

[cfcoderatcodefactory]

Thanks!

[sandifajariadi]

Hi Minhaz, Im developing android app using App Inventor, it's an online drag n drop developer tools. I want to use your method using webview, but not work, because webview restrict file input. Can I use your method just by sending the file string data (maybe in base64 or blob). Is there any method in the qr javascript that can take string as input?

[sandifajariadi]

Hi Minhaz, just update, i made some modif on your js, so there is a checking if the variable is an instance of file or not. I make it always true and give blob data from convertion of a base64 string, and it worked!

[mebjas]

@sandifajariadi That's pretty cool. Please let me know if you write about it somewhere so others can benefit from it too!

[sandifajariadi]

Hi Minhaz, i made this article, hope can help others https://medium.com/@sandi.fajariadi_79986/detect-qr-code-from-an-image-using-javascript-ba30b0aa7d59

[emilajar-soup]

hi. Minhaz.

I made some web page, use your js. everythings are OK. but one issue I have. Some tiny qr didnt read. i can zoom camera in your script"?

[mebjas]

@emilajar-soup Sounds interesting, can you put a feature request here - https://github.com/mebjas/html5-qrcode/issues and I'll take it up from there.

If possible also add a sample of how small are you trying to scan.

[ghost]

@mebjas, I have very little experience working with HTML, CSS, and js. All I want to ask is, would simply copy-pasting this code work or I've to do some changes/additions to this code. If there are any additions/changes could you please describe them?

[mebjas]

@Samruddhi2001- for now I'd recommend copying code in https://blog.minhazav.dev/research/html5-qrcode

Meanwhile I have an action item on me to try to make a fully self contained QR Code scanner which will make it easier to integrate - https://github.com/mebjas/html5-qrcode/issues/46

If you are interested, watch that issue and I'll try to implement that asap.

[ghost]

@mebjas Thank You..!!

[mebjas]

@Samruddhi2001 @emilajar-soup and others I have just implemented a full scanner on top of Html5Qrcode called Html5QrcodeScanner - it comes with default UI so you don't have to implement the user interface. You can use it like this:

[1] Create a container in HTML

<div id="qr-reader" style="width:500px"></div>

[2] Include the javascript

<script src="https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js"></script>

[3] Initialise the script

<script>
function onScanSuccess(qrCodeMessage) {
    // handle on success condition with the decoded message
}

var html5QrcodeScanner = new Html5QrcodeScanner(
    "qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);
</script>

This is what is done in the latest update to demo - https://blog.minhazav.dev/research/html5-qrcode

You can download the latest js from Github master branch or from here - https://github.com/mebjas/html5-qrcode/releases/tag/v1.1.0

[ccrstudio]

Hi! Great job mebjas! I had not permitted the camera´s use in android mobile Chrome. Now, everytime I try to use QrCode Scan on it, it gave the message: "NotAllowedError: Permission denied". I tried to give permission through android, but the site address where app is installed not appears on site list. Is there any way to reset this denial via code so that forces the site to use camera? Thnaks in advantage!!

[joshyro]

Hello and Thank you for this awesome project. My code is already working (Django over https). Is there a way to hide "Scan Image File" option?

[sonesay]

Hi all. Can anyone help me out here? I want to stop scanning once a successful scan is completed. Code examples please as I've having issues trying to call stop().

[MTrykar]

Hi all,

I am trying to use this in my web app on Android (hosted on Google App Engine), but I always see the error the the Html5Qrcode is not defined. You can find the app here: https://lebensmitteldatenbank-305221.ue.r.appspot.com/food/add

I would simply like to achieve to scan a QR code and enter the value into the first text box. Any help is much appreciated! :)

Best regards, Manuel

[Makcintoshawesome]

hello can I ask on how to integrate beep scan sound when scanning qr code?thank you

[marcodocker]

Sorry for the newbie question but i have it working. Just like your https://blog.minhazav.dev/research/html5-qrcode The QR code will always contain a link to a certain webpage.

How can i get it to scan/recognize=jump to URL.

As soon as it opens the URL the scanner should have the permission to use the camera but for the rest it should be "empty", ready for the next qrcode-scan.

[mebjas]

@marcodocker

You can go to the URL if the url is detected in callback

function onScanSuccess(decodedText, decodedResult) {
   // check if decodedText is a url
   location.href = decodedText;
}

var html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

[tomurphy-78]

Hi, great library!! On my android and early iPhones 1D and 2D barcodes are easily read. However on newer iPhones I have found 1D barcodes are not read, or maybe 1 off. 2D barcodes are a little better.

Have you or anyone else seen problems with scanning 1D barcodes on iPhone's and were able to fix it?

Cheers Tom

[AthraaOil]

Hi, I have upload the code and not work from my own localhost, the camera just launching not access, so what I have to do to make the camera open to access the barcode from the pc

[sandeep-jangra123]

in my browser , scanner work properly but in app , I got camera permission error always and i also gives the all permissions, how can i fix this error

[tkhobbes]

Is there ANY possibility to have this run if the origin is non-secure (http instead of https)? I am writing a small app just for myself - it will run on my home server and not accessible from outside...?

[lux18]

is it possible to edit the style?

[testuser280]

hello i was trying to set default camera scanner on the backcamera… how and where i put the rule for this result?

[rahulsharma991]

hello i was trying to set default camera scanner on the backcamera… how and where i put the rule for this result?

Pass the param in start func:- private html5Qrcode: Html5Qrcode; this.html5Qrcode .start( { facingMode: 'environment' });

[testuser280]

i'm sure it works but in this moment i am using the script: hmtl5-qrcode.min.js with The Var inside that is very long and inside i've found some var that are named Facing mode but i cant change the code to have the final result that i want (always the Back camera as default )

[tchikou-ramy]

HOW CAN I REMOVE THE SPAN OF 'scan an image file'