HTML5 QR Code Scanner Demo | Minhaz’s Blog

[utterances-bot]

HTML5 QR Code Scanner Demo | Minhaz’s Blog

Demo of a cross platform HTML5 QR Code scanner

https://blog.minhazav.dev/research/html5-qrcode

[kkmmss12345]

Hello i have some questions I try to modify

with qrbox becomes document.body.clientWidth-100 As a result, Android can scan normally, but IOS cannot scan Want to understand what might have gone wrong?

[bvnhan]

i can't scan qr-code micro.

[acbruno]

Hi. Minhaz... First of all I want to thank you for sharing the project for QRcode with html5 (and your knowledge too). I have a question for a difficulty that I have to identify which camera is reading. For example: I have 2 cameras, I show the qrcode in one, and I need to save in a string which camera is reading. I tried to get it via html5-qrcode.min.js -> var (d), but the script shows me a random id. Ex.

dB5lBw / GqLa2s7cYTkKpWFmAf9oa6cwFBpTaSpwi2OA = DKHSUr1mod0pECnWtScivDRQAcxpECBRjPA4g6Opb0g = cA7HpvAhQYjhagJ8ZaAuyTJzyujoyNX NmtFnDhVdyA =

Can you help me with this question? Can you even see the value of the chosen camera? For example: camera 1, 2, 3,?

Sorry, my english is very bad.

Regards, Bruno.

[sameeraman21]

it is not working in localChrome. its saying uncaught CameraIdorConfig

[gsohler]

Very nice, i like it! Which are the terms to integrate it into an PHP Application ? Is it possible to remember the "use camera"permission and choose which one to use ?

[Balamurugan1903]

How to directly link start scanning without click request camera permissions

[ricotritanto]

html5 is not supported, except using https....

[satyapratap-dev]

It's not reading the some of the QR images. Can you please advise? For ex: Wikipedia website QR Code https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/1024px-QR_code_for_mobile_English_Wikipedia.svg.png

[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

[Reza-kavian]

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

[sibelle-labs]

Hi! Great work! Can you maybe post an example with the integration in an HTML form? Where, for example, have the choice of a field, input by hand or from a QR code? Many Thanks

[tengty]

Huawei or Samsung phone with multiple camera at rear couldn't pickup the right camera. Setting "environment" nothing show for Huawei, and Samsung pickup telphoto lens couldn't scan due focus super blur.

[bmkun]

hi ! Great work! can this qrcode get the camera permission without click the button first ? or auto request to make our web user easily using it ?

[dubalumesh]

How to scan qrcode instead using QRcode scanner instead of camera

[mebjas]

@dubalumesh You can scan using a image file selected from device or using the mobile device's camera application.

@bmkun

can this qrcode get the camera permission without click the button first ? or auto request to make our web user easily using it ?

Not right now, please file a feature request for this.

[GumballLab]

Hi.

Great job, thank you.

When a code is detected is it possible to know the type of code? This would be very useful if you what to just read QR codes, for example.

Thank you very much.

[Jalil-Irfan]

Just tried to add in the minified JS from "https://github.com/mebjas/html5-qrcode/releases" but on running the app after following the steps its scanning only the QR Barcodes are not getting scanned please help

[bmkun]

i using laragon for my local server, there is https setting for our local web, but wen i try to access from my phone like this ( https://howchoo.com/g/mte2zgrhmjf/how-to-access-a-website-running-on-localhost-from-a-mobile-phone ) i can't get https acces, my question is, can we access this "HTML5 QR Code scanner" from phone browser so i can see it work or not and how abou the interface from phone browser, thaks minhaz :)

[mebjas]

@GumballLab feature request filed, working on this - https://github.com/mebjas/html5-qrcode/issues/224

@Jalil-Irfan - can you share the code you are using? And more about the OS / browser?

@bmkun - you should be able to do this using remote debugging in chrome - https://developer.chrome.com/docs/devtools/remote-debugging/

[equinoxe-rehm]

Is there a way to translate the buttons and to hide the header with the link to github and the "Idle" etc. message?

[derryberni]

it's possible to disable upload images with any config?

[mebjas]

@derryberni

it's possible to disable upload images with any config?

Not yet implemented (please file a feature request) - Can I ask the reasons to remove it?

@equinoxe-rehm

Is there a way to translate the buttons and to hide the header with the link to github and the "Idle" etc. message?

I am removing some redundant items from the status bar soon (including the prominent link). For the translation - Not yet, but I am soon planning to add internalisation support, but I am not proficient in many languages - would you be interested in contributing to transalation?

[leedickson-my]

how can I add support for Samsung Internet browser or other Chromium based browser?

[sibelle-labs]

@mebias it's possible to disable upload images with any config? And set environment device as default?

For translation to Spain or German, i can help ! Thanks a lot

[ahadziahmetovic]

Hello, I wonder if it is possible to better scan a smaller 2d image like 10mm x 10mm. Scanning sometimes takes a long time, and sometimes it is not possible. I’m trying to increase the fps to 50 or 100, but I haven’t seen better results. Do you have any suggestions?

[BijeshEvento]

@mebjas it's possible to open default camera directly with any config.

[stefanoerrani]

Very good work! Its' possibile hidden Code Scanner link and Scan and Image file link from the interface? I'm afraid that those who have to use it will get confused.

Best regards and good weork.

Stefano Errani

[stefanoerrani]

Its' also possible to translate the language: I need italian.

Best regards.

Stefano Errani

[BijeshEvento]

Very good work! Its' possibile hidden Code Scanner link and Scan and Image file link from the interface? I'm afraid that those who have to use it will get confused.

Best regards and good weork.

Stefano Errani

a#qr-reader__dashboard_section_swaplink {

display: none !important;

}

[maittaml]

Very interesting code thank you so much, I tried it in my localhost but it didn't work for me. Can you help me please, I clone the repository code and tried examples but didn't work. Thanks in advance.

[yahyaefendy]

@Balamurugan1903 I have same question, How to directly link start scanning without click request camera permissions?

[matthewhudgins]

I'm having the same issue where on this demo site it scans qr codes and barcodes but when I copy the code used on this page it only scans qr codes.

[FredmanW]

Any possibility of including Micro QR code useful on small area surfaces?

[Jonnas123]

I've tried this example but after scan no result shows up.

<html>
<head>
    <title>Html-Qrcode Demo</title>
<body>
    <div id="qr-reader" style="width:500px"></div>
    <div id="qr-reader-results"></div>
</body>
<script src="/html5-qrcode.min.js"></script>
<script>
    function docReady(fn) {
        // see if DOM is already available
        if (document.readyState === "complete"
            || document.readyState === "interactive") {
            // call on next available tick
            setTimeout(fn, 1);
        } else {
            document.addEventListener("DOMContentLoaded", fn);
        }
    }

    docReady(function () {
        var resultContainer = document.getElementById('qr-reader-results');
        var lastResult, countResults = 0;
        function onScanSuccess(decodedText, decodedResult) {
            if (decodedText !== lastResult) {
                ++countResults;
                lastResult = decodedText;
                // Handle on success condition with the decoded message.
                console.log(`Scan result ${decodedText}`, decodedResult);
            }
        }

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

[smartputtur]

How to stop camera for a while after each scan result or how to give Pause ?

[mebjas]

@stefanoerran

Very good work! Its' possibile hidden Code Scanner link and Scan and Image file link from the interface? I'm afraid that those who have to use it will get confused.

I have a work in progress that will hide it. Will release soon.

Its' also possible to translate the language: I need italian.

Not today, but have some plans - would you be interested in contributing to translation? Also, would you want to use it in pure Italian or based on user's language choice?

[mebjas]

@maittaml

Very interesting code thank you so much, I tried it in my localhost but it didn't work for me. Can you help me please, I clone the repository code and tried examples but didn't work. Thanks in advance.

What is the error?

[mebjas]

@Balamurugan1903 @yahyaefendy

How to directly link start scanning without click request camera permissions?

And for all similar questions - it's not possible in Chrome or other browsers to access camera without permission. It's in-fact not ethical either (camera can be very sensitive input for users).

That said, I am working on a feature that will check if user has granted permissions in the past and open camera if the permission was already granted.

[mebjas]

@matthewhudgins

I'm having the same issue where on this demo site it scans qr codes and barcodes but when I copy the code used on this page it only scans qr codes.

Is your local example not scanning any types of bar code?

[mebjas]

@smartputtur

How to stop camera for a while after each scan result or how to give Pause ?

What do you mean by stop camera for a while - Html5QrcodeScanner#clear() can be used to clean the entire layout, is that not useful?

[leewesley123]

Hello! :) I have come across an issue where when I click on "request camera permissions" and then click "allow", it seems not able to get the camera ID of my laptop. The dropdown box beside "select camera" is empty. I can see that my laptop's webcam turns on for a second and then automatically turn off right after when I click "Allow".

Then when I click on "Start scanning", an error Uncaught cameraIdOrConfig is required is thrown. May I have some advice on this? Thanks! :)

[mohsin-incep]

Hi :) It is posible to hide code scanner and box of code scanner untill camera open. and also directly open mobile's rear camera when user click on request camera permision

[equinoxe-rehm]

Sehr geehrte Damen und Herren,
Aktuell bin ich im Urlaub und deshalb zwischen dem 13. bis zum
  27. September nicht zu erreichen. Ihre Mail wird nicht
  weitergeleitet.
Sie können sich gerne mit Ihrem Anliegen an Markus Disch wenden:
  ***@***.***
Sobald ich wieder im Büro bin, werde ich alle eingegangenen Mails
  bearbeiten und komme dabei schnellstmöglich auf Sie zurück.

-- 
  Mit freundlichen Grüßen

  Michael Rehm
  Webdesign - Webseiten-Entwicklung

  Equinoxe GmbH
  Bismarckallee 9 | 79098 Freiburg | Deutschland
  T +49 761 3839 31 | F +49 761 38 39 499
  ***@***.***
  | www.equinoxe.com

  Geschäftsführer: Wolfgang Schuler
  HRB 5351 - Amtsgericht Freiburg
  USt-ID Nr. DE187235063

[mebjas]

@mohsin-incep

and also directly open mobile's rear camera when user click on request camera permision

This sounds good, please file a feature request here - I'll try to pick it up asap.

It is posible to hide code scanner and box of code scanner untill camera open.

I cannot reproduce this, can you maybe share a video.

[mebjas]

@leewesley123 Can you verify if any other web application can access camera on your device?

[JethroPogi]

Hello! :) I have come across an issue where when I click on "request camera permissions" and then click "allow", it seems not able to get the camera ID of my laptop. The dropdown box beside "select camera" is empty. I can see that my laptop's webcam turns on for a second and then automatically turn off right after when I click "Allow".

Then when I click on "Start scanning", an error Uncaught cameraIdOrConfig is required is thrown. May I have some advice on this? Thanks! :)

Hello, I had the same issue and tried running the app on XAMPP and it worked just fine, i think it has something to do with opening the camera without HTTPS

[Kelta-King]

@smartputtur, you can stop the code execution by making a sleep function. Like...

function stop_while(miliseconds) {
    const currentTime = new Date().getTime();
    while (currentTime + miliseconds >= new Date().getTime()) {
    }
}

Now call this function after getting the decode text in onScanSuccess() function. Like...

function onScanSuccess(decodedText, decodedResult) {
    // Handle on success condition with the decoded text or result.
    console.log(`Scan result: ${decodedText}`, decodedResult);

    // It is used to stop the loop for some time.
    stop_while(4000);
    console.log("After");
}

[rodneystover]

I am using the Html5Qrcode class in PRO Mode successfully but I have been unable to config the code for turning on / off the flashlight. Do you have any documentation that would better explain how to do this? I have used your sample scanner at the top of this page on both iphone and android but neither gives a button to turn off/on the flashlight. I have tried using the below code after initializing the camera but it doesn't so anything.

    /** load scanner using back camera **/
    html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);

html5QrCode.hasFlash().then((hasFlash) => {
  if (hasFlash) {
    // Flash light is supported, turn it on
    html5QrCode.setFlash(true);
  }
});

[qwertz1958]

Hi there,

i am looking close to a simple example. I would like to see an optical message after successfully scanning a barcode. I am working with html5QrCode = new Html5Qrcode ("reader");

Kind regards

Stephan

[rodneystover]

@qwertz1958,

In your HTML place the following line in the position you would like to see your message after successfully scanning a barcode:

<div id="scanMessage"></div>

Then inside the below javascript code (for a successful scan):

const qrCodeSuccessCallback = (decodedText, decodedResult) => { --------> insert line from below here };

You can insert this line: if using jquery use: $( "#scanMessage" ).html('Successful Message to Display Here'); or if using regular javascript use : document.getElementById("scanMessage").innerHTML="Successful Message to Display Here";