HTML5 QR Code scanning with javascript - launched v1.0.1 | Minhaz’s Blog

[utterances-bot]

HTML5 QR Code scanning with javascript - launched v1.0.1 | Minhaz’s Blog

In 2015 I had written an HTML5 based QR code scanning library as a jQuery extension. Recently I realised there was some consistent traffic on my Github Project and the demo page. As I dug more into what was going on and I was embarrassed to see the poor design and obsolete support to the latest HTML APIs around Camera. I recently fixed some of the issues and refactored the javascript library that is now independent of jQuery and supports Promise based APIs. In this article I’ll explain how to use the new version of the library, some changes and reasons for them and existing issues and plan to fix them.

https://blog.minhazav.dev/HTML5-QR-Code-scanning-launched-v1.0.1/

[mirkoprog]

with android mobile browser not found any camera, work only from pc windows, but if i open your demo its also work from mobile. please help me

[mebjas]

with android mobile browser not found any camera, work only from pc windows, but if i open your demo its also work from mobile. please help me

@mirkoprog - I'd recommend creating an issue at mebjas/html5-qrcode/issues with more details on browser, OS - where it works, where it not works, if you have error logs add that too and if there are screenshots that would be helpful too.

Happy to look into it.

[ziobit]

I have the exact same problem but anyway, all your links on the top page points to a 404 :)

Apr 4, 2020 • html javascript jquery qrcode camera promise

Demo works, trying to integrate it, when no syntax errors in the console, I get "Unable to query any cameras. Reason: unable to query supported devices." but the same browser, same session, if I open the demo, it works

[mebjas]

@ziobit

I have the exact same problem but anyway, all your links on the top page points to a 404 :)

Can you point which links don't work? I will fix them.

Demo works, trying to integrate it, when no syntax errors in the console, I get "Unable to query any cameras. Reason: unable to query supported devices." but the same browser, same session, if I open the demo, it works

Can you point me to how you are using it, maybe I can spot the issue.

[mirkoprog]

i have open a issue:
mebjas/html5-qrcode#25
there you can find my code

[ziobit]

(1)
Regarding the 404, it's totally not important and not high priority for anybody, but just check the source code here:

html
javascript
jquery
qrcode
camera
promise

All those links href are invalid and point to a 404.

(2)
Small typo: in all the examples, you wrote "Start scaning", with a missing "n" :)

(3)
Regarding my main issue, not working, if I simply copy/paste your html code, create the corresponding needed js files (in particular the qrcode) on my server, it simply cannot enumerate the cameras.
I even copied the (useless, I had to read the js code to understand what they were doing :) :) :) anchorize and instapage js files, to no avail.
No errors nor warnings on the browser console either. I put some printouts at the beginning/end of the ready event and it goes there and it goes out, so it's executing the initialization. But don't worry, it's working on your page, so of course it's something I am doing wrong, no need to worry :) It's just weird, basically I have a mirror of your page and resources and with no (apparent) error anywhere, still it does not work. PS: this morning I tried the new 1.0.5 version, same result. Working on your server, not enumerating the cameras on mine (both on pc and on mobile).

[mebjas]

@mirkoprog - let's take this further on the issue you created.
@ziobit
(1) Oh yes, this is a known problem - for some reason Github is not creating the pages for categories while Jekyll can do this for local version. I didn't get time to prioritise and fix it - it's Github + Jekyll blog issue.

(2) Fixed it, thanks for pointing.

(3) I see, it's related to http and https - I will see if this can be identified at the library level and thrown out as error so developers don't have to spend time figuring this out. For starters I'll update the README of the project. I just need to know if the file based scanning also don't work with http.

Also, I just noticed cloning the demo page is one way to try it, but IMO the demo code is very embarrassing, and I'll try to improve it asap.

[keanwalker]

hi, thanks for the completed QR code scanner. I tried just refer to the minified version, but could not load the back camera of phone. however, if I refer the both JS on your demo site, is working like charm. Perhaps you are missing something in the minified version?

[mebjas]

@keanwalker - Can you check your console logs to see if there are some errors?

I just tested using the minified js on the master branch and it seemed to work fine for me. Are you using a specific version of the package?

[keanwalker]

Hey, yes i got it from master branch. It returns "Error getting userMedia, error = NotReadableError: Could not start video source". and I force to set the cameras[i] to 1 to get the back camera. but using your js codes below, is working fine.

https://blog.minhazav.dev/assets/research/html5qrcode/qrcode.js
https://blog.minhazav.dev/assets/research/html5qrcode/html5qrcode.js

[mebjas]

@keanwalker
I see, I think it's related to an issue that was fixed today with pull/42. The issues are described in:

• issues/38
• issues/41

I merged the pull request today only, so master was little behind while I had already deployed the changes with fix to demo page.

If you are no longer able having the issue in the demo page it's kind of a good sign that the issues/38 might have got fixed as well with the PR#42. Would you mind adding a comment in issues/38 if you are no longer finding the issue either in the demo code or the minified/html5-qrcode.min.js in master now?

Once again, the minified code was updated just today in master and might no longer have this issue.

[keanwalker]

hi mebjas, yes working now. thanks. i will add comment in issues/38.

[cuici]

Hi, thanks for your work. Is-it possible to scan a barcode ?

[mebjas]

@cuici no not right now :(

But you could file a feature request here

[cfcoderatcodefactory]

Hi!
Love this app!
Questions: I would like to use the whole viewport and not a «standard» QR Code Scanner frame. Is it in any way possible to 1) get the location (coordinates) and size (width and height) of the QR-code inside the viewport/camera viewfinder?

[mebjas]

@cfcoderatcodefactory

I would like to use the whole viewport

For this you can call the start method without qrbox config. In that case it'd treat entire viewport for scanning.

const html5QrCode = new Html5Qrcode(/* element id */ "reader");
html5QrCode.start(
  cameraId, 
  {
    fps: 10,    // Optional frame per seconds for qr code scanning
    // <--  no qrbox set
  },
  qrCodeMessage => {
    // do something when code is read
  },
  errorMessage => {
    // parse error, ignore it.
  })
.catch(err => {
  // Start failed, handle it.
});

For the second part - please file a feature request at https://github.com/mebjas/html5-qrcode/issues I'll try to take it up from there - at the moment this functionality doesn't exist.

[breizhim]

I had to rename "devices" variable to "cameras" to make it works. "devices" is undefined (using your mini JS version).

[cfcoderatcodefactory]

Hi again, thanks for your prompt reply on my previous question. Amazing reponse time!
A couple more:

1. I would like the scanned image (while developing/adapting your code to my needs) to be drawn to a canvas. How do I go about achieving that?
2. I have removed the 'qrbox' config from the start method. But where do I ensure that the video/scanning window is not larger than the viewport?

[cfcoderatcodefactory]

…PS: In my question 1 in previous comment: A visible canvas.

[cfcoderatcodefactory]

…aaand another PS to my question 1: When i QR Code is recognized I want to continue the «live feed» in the video window, but render a «still» image in the canvas.

[mebjas]

@cfcoderatcodefactory Could you share more on what is the final goal? As for visible canvas - as of now the tech works like this

There is a <video> element which renders the live feed. Based on scanning frequency it copies the video screenshot to a <canvas> which is hidden. If you want access to the canvas I think it'd not be possible from library as it abstracts that - but as a hack you can access the canvas from HTML DOM.

It'd always be created with <canvas id="qr-canvas" /> with JS you can access it.

Hope this helps. I dont understand the second question though.

[mebjas]

@breizhim could you share where the mistake is or send a pull request to fix that?

[breizhim]

@mebjas I had to rename "devices" variable by "cameras" in your example:

function listcamera() {
	Html5Qrcode.getCameras().then(cameras => {
		   if (cameras && cameras.length) {
			   var cameraId = cameras[0].id;

The devices variable was "undefined". By replace it to cameras it works.

BUT, I have another problem : the camera is working, I have the white field of scan in the middle, BUT it won't trigger when I show him a QR Code... (I still using your example). I have no JS error... the script can't find patterns.

[mebjas]

@breizhim The name of variable doesn't matter as far as you use the same variable inside the lambda, like

function listcamera() {
	Html5Qrcode.getCameras().then(randomName => {
		   if (randomName && randomName.length) {
			   var cameraId = randomName[0].id;

As for the QR code not scanning maybe you can share some video or provide description of the environment - like OS, device, browser etc

[antheroo]

Hi Minhaz, thanks for sharing this!
Got it working in a jiff, but I encountered an error with the qrcode.decode() as I didn't realize that 'qrcode' was being used by this library and I had something else assigned as qrcode. Perhaps it would be helpful to mention that in the Readme :)

[mebjas]

@antheroo That's a great point - I think the library should abstract qrcode - would you mind raising an Issue or Feature request for this - https://github.com/mebjas/html5-qrcode/issues

[antheroo]

@antheroo That's a great point - I think the library should abstract qrcode - would you mind raising an Issue or Feature request for this - https://github.com/mebjas/html5-qrcode/issues

Done! mebjas/html5-qrcode#51 (comment)

[breizhim]

@mebjas
Ok I got it, but in your example you invoke first "cameras" then "devices", two different variables name :

Html5Qrcode.getCameras().then(cameras => {
  /**
   * devices would be an array of objects of type:
   * { id: "id", label: "label" }
   */
  if (devices && devices.length) {
    var cameraId = devices[0].id;
    // .. use this to start scanning.
  }

Well, for the detection issue, i past my code:

<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="qrcode/html5-qrcode.min.js"></script>
</head>
<body>
TEST
<button type="button" onclick="listcamera()">List cameras</button>
<div id="reader" width="600px"></div>
<script>
function listcamera() {
	Html5Qrcode.getCameras().then(cameras => {
		if (cameras && cameras.length) {
			cameraId = cameras[0].id;
			scan(cameraId);
		}
		
	}).catch(err => {
			// handle err 
				alert(err);
	});
}

function scan(cameraId) {
const html5Qr = new Html5Qrcode("reader");
html5Qr.start(
   cameraId, // retreived in the previous step.
   {
      fps: 10,    // sets the framerate to 10 frame per second 
      qrbox: 250  // sets only 250 X 250 region of viewfinder to
                  // scannable, rest shaded.
 },
 qrCodeMessage => {     // do something when code is read. For example:
     console.log(`QR Code detected: ${qrCodeMessage}`);
 },
 errorMessage => {     // parse error, ideally ignore it. For example:
     console.log(`QR Code no longer in front of camera.`);
 })
 .catch(err => {     // Start failed, handle it. For example, 
     console.log(`Unable to start scanning, error: ${err}`);
 });
}
</script>
</body>
</html>

--> The video works, but there is not detection nor JS error. I use Firefox 76.0.1, Win10.

BTW, thank you for your work ;)

[breizhim]

@mebjas Precision : I checked the javascript console. It stuck at "QR Code no longer in front of camera.".

[mebjas]

@breizhim

Ok I got it, but in your example you invoke first "cameras" then "devices", two different variables name :

fixed this example, thanks for pointing this out!

Your code example looks correct, one thing to try would be - once the code is running, open debugger, inspect element and go to <div> with id reader - you'll see a <canvas> which is hidden, mark it as not hidden from debugger and see if what you see in the canvas is same as what is shown inside the box in the video.

[anasiddiqui]

I have integrated your code in my website. its working fine.
I want to eliminate the option of selecting cameras and open back camera once camera permission is given by user. Is this possible?

[mebjas]

@nadjalla / @juanpablo64 Please file a feature request, I can add it as a configurable parameter.

[ki502]

ECI MODE NOT WORKING
I want to convert euc-kr

[jameshappykang]

@mebjas Hi！Why this link can't work below:

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

But this one can work well

<script src="https://cdn.bootcdn.net/ajax/libs/html5-qrcode/1.2.4/html5-qrcode.min.js"></script>

maybe you forgot to update it

[Akanbiabubakar]

Please I get this error when I try the script on a local machine
"unable to query supported devices."
mylink: http://151.236.6.116/qrcode/

Does anybody know what I am getting wrong? Thanks.

[HusnulM]

Hi I get this error
https://snipboard.io/BLbfKD.jpg

[Reza-kavian]

In your site demo, in addition to qrcode, I can also scan barcodes. But when I transfer the source code to my project, it only reads qrcode but does not read barcodes

[mebjas]

@Reza-kavian I was just working on that draft and had published it earlier in the demo website. Just published support for multiple types of barcode in version 2.0.0. Please take a look at latest version of code from Github release or npm

[mebjas]

@HusnulM & @Akanbiabubakar On what device / browser are you facing this issue?

@jameshappykang - where did you get the CDN url from? Also, please note latest version is at 2.0.0

[Reza-kavian]

Excellent, thank you very much for your practical and good project

[GuyInCorner]

Wonderful library. Easy to use and works Great. Having issues with the camera image though:

• The camera image doesn't fill the phone screen.
• There are only two guide lines on the left, none on the right and they're not centered.
• The shaded area appears somewhat random and makes no sense.

This link is on a phone using a config of {fps: 10, qrbox: 225 }
https://www.dropbox.com/s/hrtj9sv8danwmn4/html5-qrcode_shader.jpeg?dl=0

I tried removing the qrbox and then it wouldn't scan at all.
What can I do to get a better image?

[HusnulM]

I have done this issue when access html5 qr code scanning from web view on Android Studio by adding this code in onCreate section,

Thanks

[lanost]

getting this error on requesting camera access.
NotAllowedError : Permission denied
using ubuntu 20.04 chrome, no error logs.
in firefox it works just fine.
demo works fine in chrome too.

[mebjas]

@GuyInCorner Please file a new issue here - https://github.com/mebjas/html5-qrcode/issues/new/choose

@lanost is it possible Chrome on ubuntu is not having camera permission, does any other camera based service works?

[mebjas]

@ HusnulM Please describe what is the issue?

[waldemarDev]

hi dear Minhaz, i got a pwa app which uses you camera QR library. It rund basically smothly on all modern devices but with iPhone 6 ufortunatly i got an issue. When i click to launch the camera, i got a message "unable to query supported devises". That occurs not in Safari browser directly but rather when my app is downloaded and force its loading from app drawer. Could you pls somehow guide me here?

[waldemarDev]

And yet, on iPhone 6 Plus i cannot access webcam. The same problem. What could be a reason?
Here is a link to watch a video cast of the issue.
https://drive.google.com/file/d/1hn7U32ceMcWHvDASYeB2WkFpFNsoFLGD/view?usp=sharing

[shadeeka]

@mebjas
The above functionalities (I tried with exact same functions in my own app) are not working in 2.1.1 release it gives me an error when starting the video stream
Error: Uncaught (in promise): NotFoundException: No MultiFormat Readers were able to detect the code. NotFoundException: No MultiFormat Readers were able to detect the code.

Then I downgraded to 2.0.11 which is the most downloaded version, unfortunately it is also not working
Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'Html5Qrcode') TypeError: Cannot read properties of undefined (reading 'Html5Qrcode')
can someone please help, thank you

[id1945]

Error in /turbo_modules/html5-qrcode@2.1.2/html5-qrcode.min.js (4:60)
Cannot read properties of undefined (reading 'Html5QrcodeScanner')

[mebjas]

@shadeeka what code are you trying to scan?

@id1945

Error in /turbo_modules/html5-qrcode@2.1.2/html5-qrcode.min.js (4:60)

Cannot read properties of undefined (reading 'Html5QrcodeScanner')

What framework are you using?

[Bratosz]

Hi, im just testing your API and thanks for your job, it is just awesome. But i have problem with custom qrbox size. When i set config as below:

const config = {qrbox: 250};

and i will pass it to html5Qrcode.start() everything works fine, as long as i don't try set custom dimensions. Then it just dissapears (div with id="qr-shaded-region" does not even exist). Even if i set them to the same values as above. Im using chrome.

const config = {qrbox: {width: 250, height: 250}};

Where am i wrong?

[Praveen-Mudem]

@Bratosz, I also faced same problem in mobile and ipad with portrait mode. we fixed the issue with some CSS.

@mebjas: we have an issue "unable to query supported devices" with ipad (8. generation) and chrome latest version (96.0 version). demo also has same error. could you please let me know the fix?

[shadeeka]

Hi @mebjas .. thanks for replying..
what code are you trying to scan? => i am trying to read a QR code in an Ionic App.. which is working fine in your demo application
Is this library compatible with ionic framework?

[greggiewalker]

Any tips for getting QR code scanner to work on a Sony Bravia Professional Display (X1) with a USB camera.
Platform is Android10 with Chomium. Android System WebView Version100.0.4896.88
App looks OK, camera is functional but just won't scan a QR
Have wrapped in a APK wrapper with camera, video and storage permissions
Same works on an old Samsung Tablet

[CogworkGoblin]

Hi hopefully this is very basic...
it all seems to work well (with most of the sample qr/bar codes),
The scanbox gets a green border and I get feedback in the console... but nothing else?
is there a way to access the code scanned?
Code scanned = 123456
{decodedText: '123456', result: {…}}
decodedText
:
"123456"
result
:
format
:
e {format: 8, formatName: 'ITF'}
text
:
"123456"
[[Prototype]]
:
Object
constructor
:
ƒ Object()
hasOwnProperty
:
ƒ hasOwnProperty()
isPrototypeOf
:
ƒ isPrototypeOf()
propertyIsEnumerable
:
ƒ propertyIsEnumerable()
toLocaleString
:
ƒ toLocaleString()
toString
:
ƒ toString()
valueOf
:
ƒ valueOf()
defineGetter
:
ƒ defineGetter()
defineSetter
:
ƒ defineSetter()
lookupGetter
:
ƒ lookupGetter()
lookupSetter
:
ƒ lookupSetter()
proto
:
(...)
get proto
:
ƒ proto()
set proto
:
ƒ proto()
[[Prototype]]
:
Object
constructor
:
ƒ Object()
hasOwnProperty
:
ƒ hasOwnProperty()
isPrototypeOf
:
ƒ isPrototypeOf()
propertyIsEnumerable
:
ƒ propertyIsEnumerable()
toLocaleString
:
ƒ toLocaleString()
toString
:
ƒ toString()
valueOf
:
ƒ valueOf()
defineGetter
:
ƒ defineGetter()
defineSetter
:
ƒ defineSetter()
lookupGetter
:
ƒ lookupGetter()
lookupSetter
:
ƒ lookupSetter()
proto
:
(...)
get proto
:
ƒ proto()
set proto
:
ƒ proto()

[ryeong928]

thanks for great library.
how can i show only __scan_region?
i waana style the rest other than __scan_region.

[Ahmed-Fathy017]

I want to override the buttons and qr scanner wrapper styling to be consistent with my application style. Is this possible?

[Mbengparis]

How can i configure the scanner to scan white barcodes?.
I have tried scanning but nothing happens.

[gandhimonik]

After starting the scanner, how do we obtain the data embedded in the QR code?