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/

[JMLucas96]

Fantastic! Is there a way to "save" requested permissions and don't request anymore? Or select back camera by default? Thank you @mebjas for that awesome work!

[sensationpanda]

Hi, how can I redirect to web page if I scan a web link QRcode

[JMLucas96]

Hi, how can I redirect to web page if I scan a web link QRcode

Hi @sensationpanda , you can use onScanSuccess function and there redirect users where you want :)

Reference

[sensationpanda]

hi, anyone knows how to solving "unable to query supported devices", I tried in iPhone Google Chrome, safari, Android Google Chrome,Are all this error codes

[sensationpanda]

hi, anyone knows how to solving "unable to query supported devices",Works perfectly locally, but not on AWS EC2, I tried in iPhone Google Chrome, safari, Android Google Chrome,Are all this error codes

[matiazar]

Hi i have made some changes to the code so I used the not minified version... but now it doesnt work on ios... becasuse it does not support javascript classes... how can i do to compile it ?? thanks !!

[mebjas]

@matiazar You can run npm run-script build to build the changes and then use the minified library from minifed/ directory. Some instructions at: https://github.com/mebjas/html5-qrcode#how-to-modify-and-build

@JMLucas96

Fantastic! Is there a way to "save" requested permissions and don't request anymore? Or select back camera by default?

I have a feature request to remember last settings - but the plan is to use this in Html5QrcodeScanner and not Html5Qrcode - which one are you using?

@sensationpanda

hi, anyone knows how to solving "unable to query supported devices",Works perfectly locally, but not on AWS EC2, I tried in iPhone Google Chrome, safari, Android Google Chrome,Are all this error codes

Is your web-page running on https? (https://github.com/mebjas/html5-qrcode#for-using-inline-qr-code-scanning-with-webcam-or-smartphone-camera) - camera permissions are only available for https in web browsers (except for localhost). I need to add an explicit error message to make it more clear.

[JMLucas96]

@JMLucas96

Fantastic! Is there a way to "save" requested permissions and don't request anymore? Or select back camera by default?

I have a feature request to remember last settings - but the plan is to use this in Html5QrcodeScanner and not Html5Qrcode - which one are you using?

Hi @mebjas , I solved it using Html5Qrcode.getCameras() promise.

        /**
         * devices would be an array of objects of type:
         * { id: "id", label: "label" }
         */
        var cameraId = devices[0].id;;
        if (devices && devices.length > 1) {
            devices.splice(0,1);
            cameraId = devices[0].id;
            // .. use this to start scanning.
        }
        hideLoading();
        html5QrCode.start(
            cameraId,     // retreived in the previous step.
            {
                fps: 10,    // sets the framerate to 10 frame per second
                qrbox: 200  // sets only 250 X 250 region of viewfinder to
                            // scannable, rest shaded.
            },
            qrCodeMessage => {
                // do something when code is read. For example:
                onScanSuccess(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}`);
            });
    }).catch(err => {
        // handle err
        hideLoading();
    });

With these code on smartphone always return back camera.

[matiazar]

@matiazar You can run npm run-script build to build the changes and then use the minified library from minifed/ directory. Some instructions at: https://github.com/mebjas/html5-qrcode#how-to-modify-and-build

thank you. I didnt read the last lines...

but now i have an error running that. can you help me? im not familiary with npm

./scripts/prebuild.sh

'.' is not recognized as an internal or external command, operable program or batch file. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! html5-qrcode@1.2.1 prebuild: ./scripts/prebuild.sh npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the html5-qrcode@1.2.1 prebuild script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

i have downloaded the source zip. uncompressed it. npm install and then npm run-script build

and give me that error running on windows machine

thanks

[sensationpanda]

Hi, how can I redirect to web page if I scan a web link QRcode

Hi @sensationpanda , you can use onScanSuccess function and there redirect users where you want :)

Reference

Thank you, but still can't redirect to the link by using this function

[JMLucas96]

Hi, how can I select Back camera by default? I think that on different OS devices labels are different. On getUserMedia docs there are an attribute named as facingmode and when you send value environment system selects Back camera by default.

I did that code but not working always... Sometimes return Front Camera instead Back.

var cameraId = devices[0].id;
        if (devices && devices.length > 1) {
            devices.forEach(function (item, index) {
                if(item.label.indexOf('Back') !== -1){
                    cameraId = item.id;
                }
            });
            // .. use this to start scanning.
        }

Can you help me? Thank you! :)

[sensationpanda]

Hi, If the QR code is so small, Camera cannot focus automatically, How to make Camera focus automatically

[sensationpanda]

Hi, If I use some Android phone , these phones have too many cameras, cannot even start scanning

[mebjas]

@JMLucas96 the latest version of library supports consuming facing mode instead of cameraId as well.

const html5QrCode = new Html5Qrcode("#reader");
const qrCodeSuccessCallback = message => { /* handle success */ }
const config = { fps: 10, qrbox: 250 };

// If you want to prefer front camera
html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

// If you want to prefer back camera
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

// Select front camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "user"} }, config, qrCodeSuccessCallback);

// Select back camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

Detailed read up: https://github.com/mebjas/html5-qrcode/blob/master/README.md#scanning-without-cameraid Demo: https://blog.minhazav.dev/research/h5q-direct

cc: @sensationpanda This might help your question as well (replied on the issue as well).

[mebjas]

Hi, If the QR code is so small, Camera cannot focus automatically, How to make Camera focus automatically

@sensationpanda Thanks for filing an issues, I have added some questions. Let's work there to see if this is something library can help with.

[JMLucas96]

@JMLucas96 the latest version of library supports consuming facing mode instead of cameraId as well.

const html5QrCode = new Html5Qrcode("#reader");
const qrCodeSuccessCallback = message => { /* handle success */ }
const config = { fps: 10, qrbox: 250 };

// If you want to prefer front camera
html5QrCode.start({ facingMode: "user" }, config, qrCodeSuccessCallback);

// If you want to prefer back camera
html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

// Select front camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "user"} }, config, qrCodeSuccessCallback);

// Select back camera or fail with `OverconstrainedError`.
html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

Detailed read up: https://github.com/mebjas/html5-qrcode/blob/master/README.md#scanning-without-cameraid Demo: https://blog.minhazav.dev/research/h5q-direct

cc: @sensationpanda This might help your question as well (replied on the issue as well).

I updated the package and implemented this solution but doesn't works... I get the following error Unable to start scanning, error: Error getting userMedia, error = [object OverconstrainedError]

I have the following code

const html5QrCode = new Html5Qrcode("reader", /*verbose*/true);
function onScanSuccess(qrCodeMessage) {}
var config = {
        fps: 10,    // sets the framerate to 10 frame per second
        qrbox: 200  // sets only 250 X 250 region of viewfinder to
                    // scannable, rest shaded.
    };
    html5QrCode.start({ facingMode: "environment" }, config, onScanSuccess).catch(err => {
        // handle err
        console.log(err);
    });

What I'm wrong? :(

[mebjas]

@JMLucas96 your code looks about right, let's file a Github issue for this and I'll try to see if this code doesn't work for some environment. For you is it not working anywhere on just on some browser/OS pair?

[cweix]

@mebjas by using environment facing mode, some phone is triggering telephoto lens instead of regular lens. any way to default regular len?

Demo: https://blog.minhazav.dev/research/h5q-direct ( i tested the phone with your demo link as well by selecting environment and telephoto lens is loaded to scan the QR code)

[emkowale]

I love is code. I used another qrcode package, but it crashed on the new ios 14 update. I like this one, but I need to style the viewport a bit. I'd like it to stretch to the width of the phone and stay fixed at the top under my toolbar. I can do all of this with css, but the

doesn't seem to respond to css. Also, on the old control I used the html

[emkowale]

Ok solved it!

I'm writing this into a Worpdress plugin so I had to detect whether the script was loaded so it didn't bomb the rest of the site.

if (typeof Html5Qrcode === 'undefined') { console.log("Html5Qrcode script IS NOT loaded."); } else { jQuery("#colophon").hide(); startScanning(); console.log("Html5Qrcode script IS loaded."); }

This allows me to use the camera on my laptop so I can now manipulate the css however I want based on the chrome inspector.

I hope this helps someone else.

[sensationpanda]

Is any way to Zoom in and zoom out camera？

[mebjas]

@emkowale Thanks for adding the explanation to the problem!! Glad it's resolved.

[mebjas]

@sensationpanda

Is any way to Zoom in and zoom out camera？

Not right now, please feel free to file a feature request at https://github.com/mebjas/html5-qrcode/issues

We can take if from there if it's possible per HTML APIs.

[AutomataVM]

Hello! I am using the scanner and I have to say, it's amazing! One question, is it possible to change the language to spanish? I wanted to change the text like idle, or camera permissions to another language. Is that possible?

[mebjas]

@juanpablo64 at the moment that support is not there. I am planning to add internationalization so more people can contribute and make it functional.

[nadjalla]

Hi @mebjas, Great job for the qr code reader. I would like to know if there is any option available to not display the "Scan an image file" on the Html5QrcodeScanner. Thanks

[AutomataVM]

I second nadjalla on his question

[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:

But this one can work well

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?