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

[emman-m]

Can I programmatically set scanner to start and stop scanning?

[lennoneo]

hello every body,

i want to disabe the scan file feature, what should i do ??

thank you

[benaloui]

I'm trying to read this bare codes with demo but it does not work

https://www.pointee.fr/img/barcode39_standard.gif

Can you help me why ?

[ddi98]

hi friends, how can I set the rear camera as the default camera? ps: is it possible to open the "request Camera Permissions" popup when opening the page if you have to click on the button?

[rodneystover]

@ddi98 You can set the rear camera as default by using this line when calling the function: html5QrCode.start({ facingMode: { exact: "environment"} });

[Sarath-IT]

can we run this project in localhost

[mebjas]

@Sarath-IT yes

[onuh]

Thanks a bunch.

I used your plugin for my app here: https://smartchurchattendance.com.ng/smartChurch/downloads/Smart_Church_Mobile_1_2.0.apk

[KaustubhChudji]

Its very helpful for scanner barcode from web application. In my case Its working for edge browser , but when i am trying for Firefox its not working.

[ikangurame3]

it is not working in localChrome. its saying uncaught CameraIdorConfig

thanks its problem solved

[mebjas]

@KaustubhChudji What error are you seeing on firefox?

[KaustubhChudji]

please see above screenshot, after clicking on request camera permission i am getting this error. More over i am facing issue on Firefox version. 76.0 (64-bit) & 78.7.0esr, i have not tried with other version.

[Gaudi111]

Hi @mebjas, I would like to thank you for this great tool. I am currently using it as an alternative to manual input for a form field. The issue I am facing is that the camera stream starts automatically (provided the permissions were already granted).

I would like to initialize the scanner, but start it as stopped to unclutter the screen.

So far I have seen no option to render/initialize the class without actually open the camera stream.

Can this be done? Any suggestions?

Thank you in advance!

[say-my-name-user]

is it free to use?

[rodneystover]

Yes.

On Wed, Feb 2, 2022 at 8:52 AM Say my name @.***> wrote:

is it free to use?

— Reply to this email directly, view it on GitHub https://github.com/mebjas/mebjas.github.io/issues/11#issuecomment-1028019274, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVZQNSSKSGZNIAETMTL2I7TUZFALJANCNFSM4SQBQSRA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: <mebjas/mebjas. @.***>

[khemrajmaurya]

Can I use this script for scanning QR code in Web APP using external QR scanner device ?

[pablohastings]

I have the same question as khemrajmaurya. I am going to need to can using a bluetooth scanner and am just now starting to look at libraries. Has anyone had luck with and external scanner?

[GearsERP]

hi. I have implemented all code as per the demo on a web based solution. For the EAN13 version it behaves (perhaps a little slowly) with the camera initialising and registering on both laptop and tablets. for some reason however it will not register the UPC_A format. I have tested with multiple barcodes. Any immediate ideas?? Thanks

[yashpalsingh6840]

Hi @mebjas thanks for great explanation here and this cool simple to use library.

We have implemented this library in our angular application and it works fine in Android devices when we try to read the barcodes from chrome browser.

However its not working when we try to read the barcodes from iOS/Apple Devices like iPhones/Tabs. Can you please let me know if we need to add any additional lines in the code to make it capable of reading the barcodes from iPhones/Tabs? Following are the code snippet that starts the scanning

startScanning() {
    this.scanMessage = '';
    this.isScanPaused = false;
    const onScanSuccess = (decodedText, decodedResult) => {
      if (decodedText) {
        this.specimenId = decodedText;
        this.getPatientInfo(this.specimenId, false);
        this.html5QrcodeScanner.pause();
      }
    };

    const onScanFailure = (error) => {
      // this.toastrService.warning('Unable to recognize it, trying again');
    };

    this.html5QrcodeScanner = new Html5QrcodeScanner(
      'reader',
      {
        fps: 20,
        qrbox: { width: 200, height: 110 },
        disableFlip: false,
        videoConstraints: {
          width: 300,
          height: 300,
          facingMode: 'environment',
        },
      },
      false
    );
    this.html5QrcodeScanner.render(onScanSuccess, onScanFailure);
  }

Thanks in advance.

[nhatnd2206]

Help me! I can not open camera in the first time, page is loaded. When I refresh page, the camera is opened. What problem?

[crewplandk]

This library is absolutely fantastic. In just a few hours I've created a self-checkin system for volunteers, allowing them to show a QR code on their device and using html5-qrcode a tablet will let them checkin easy(peasy) Thanks for this awesome work!!

[vanydiah]

Is it possible to set the back camera as default without select first? perhaps can add defaultCamera={} with string value 'back' & 'front'

<Html5QrcodePlugin 
  defaultCamera={'back'}
/>

[rodneystover]

When loading the scanner use this line to set back camera as default:

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

On Mon, May 23, 2022 at 1:53 AM Vany Diah P @.***> wrote:

Is it possible to set the back camera as default?

— Reply to this email directly, view it on GitHub https://github.com/mebjas/mebjas.github.io/issues/11#issuecomment-1134254006, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVZQNSUOTIZIJLOZBKNHECLVLMTNXANCNFSM4SQBQSRA . You are receiving this because you commented.Message ID: <mebjas/mebjas. @.***>

[SatishMVC]

Thanks Minhaz .. its working with various features ..

[joannecs]

Thanks for this great library! We are using ipad camera to scan qr code, I found that every time I use it to scan it needs to press "Request Camera Permission" even I have the code "rememberLastUsedCamera: true" on the page. But seems like it can remember permission setting in PC page but not mobile phone or ipad. any ideas?

thanks a lot.

[Kin930]

Hello everyone. Tell me please, how i can change the focus Mode when i use html5qr scan not Html5QrcodeScanner. If i put my qrcode so clother to smartphone camera is blurred image and not readed. Thanks a lot by youre answers.

[joshps23]

Thanks for such a brilliant app! I was wondering how can I set a cooldown period to prevent the same QR code from being scanned in an interval of 60 seconds, would appreciate any form of inputs. thanks!

[rendyjaya]

Hi..how to see the action or the code when user click the Request Camera Permissions? i am looking for that action to implement in my project. thanks in advance.

[Toyin5]

Hi minhaz, Is there a way to send data from the scanner to the qr code's backend server?

[alvarorgaz]

Anybody using class Html5Qrcode instead of easy way Html5Qrcodescanner? I want it to have my own Html UI but I don’t manage to make it work

[greggiewalker]

Doesn't work on Android TV when wrapped as a APK (webintoapp) with Webcam and no reason\feedback. Some diagnostic with sample would be three thumbs sup.

[khurrammhd]

I have "Not allowed Error: Permission denied". How can I fix it?

[khurrammhd]

Also "No MultiFormat Readers were able to detect the code." on selecting file to read.

[rjvelarde]

Getting message "No MultiFormat Readers were able to detect the code." see screenshot when trying on your site/demo. https://www.screencast.com/t/vrlAqOMSOSc

[lemoon2]

Html5qrcode doesn't work. There isn't html5qrcode.js file anywhere. If somebody did it, give demo please.

[P-Austin]

Thank you for this robust tool! I have been testing having the reader tied to a form. There are two issues I am trying to overcome:

1. How to auto submit on form input.
2. Maintain camera permission and reactivate scanner on page reload.

let outputContainer = document.getElementById('myform'); var html5QrcodeScanner = new Html5QrcodeScanner( "qr-reader", { fps: 10, qrbox: 250 });

function onScanSuccess(decodedText, decodedResult) {
console.log(`Code scanned = ${decodedText}`, decodedResult);
 outputContainer.value = decodedText;

// I've attempted placing submit functions here. } html5QrcodeScanner.render(onScanSuccess);

[rodneystover]

This is what I am doing if you are using continuous scanning mode: Define this javascript code:

/ create delay to prevent repeat scanning of same barcode / var sleep = function (ms) { let now = Date.now(), end = now + ms; while (now < end) { now = Date.now(); } };

Place this form element on the page to keep track of scanned codes:

I have the below javascript code inside my qrCodeSuccessCallback

newScan = document.getElementById("scanResult").value; var arr = newScan.split(","); if (arr.indexOf(decodedText) !== -1) { // duplicate scan document.getElementById('scanMessage').innerHTML="Code Already Scanned"; sleep(2000); // 2 second delay } else { // not duplicate scan $( "#scanMessage" ).html('Code Scan Successful'); / Store scan result / if (!newScan) { // first scan newScanValue = decodedText; } else { // > than first scan so add comma delimiter newScanValue = newScan+','+decodedText; } $( "#scanResult" ).val(newScanValue); sleep(1000); // 1 second delay }

You can change the sleep routine to a 60 second delay

On Sat, Jul 2, 2022 at 6:18 PM joshps23 @.***> wrote:

Thanks for such a brilliant app! I was wondering how can I set a cooldown period to prevent the same QR code from being scanned in an interval of 60 seconds, would appreciate any form of inputs. thanks!

— Reply to this email directly, view it on GitHub https://github.com/mebjas/mebjas.github.io/issues/11#issuecomment-1172977115, or unsubscribe https://github.com/notifications/unsubscribe-auth/AVZQNSSII5AWPTLONCBKWYTVSDE5PANCNFSM4SQBQSRA . You are receiving this because you commented.Message ID: <mebjas/mebjas. @.***>

[CaldoNic7]

Loved building my own UI around this scanner. Really great work! I'm having an issue with smaller qr codes. I've seen it asked a few times in this thread but haven't seen any response. I've played with various configurations for the scanner size and fps to no avail. I've also played with all sorts of other libraries and scanners. It seems that no browser based scanners are able to scan small qr codes (think of a qr code in the top right corner of a 50ml bottle label), even though the mobile device camera and other native qr scanner applications have no issue picking them up. Any insight would be very appreciated.

[MichaMeyer]

Hi! I also need a German version of this scanner! is it possible to translate it on my own? or have you already included this function?

[Harinandhu]

i need upload pdf barcode reader plzz help to me.......................

[macrado]

Some other people have commented this as well, but I'm having trouble getting this to read 1D barcodes. I'm using the Code-39 format. If the barcode text is 6 characters or less, I can usually scan it, but once I try to scan a longer barcode, it doesn't seem to be detected. I am able to scan these longer barcodes using a different application, but when I switch to this library, I have this problem.

This happens both in my own web app, and on the demo provided here. I am able to scan these barcodes if I generate them as QR codes, it seems to only fail on 1D codes that are beyond about 6 characters in length.

Is this a known issue? Is there perhaps a workaround (besides using QR codes)? If anyone has any suggestions, I would love to hear it. This tool is otherwise exactly what I'm looking for.

Thanks!

[osomanden]

Greetings. Been trying to utilize library - but the .clear() fails. Mostly because it does not recognize the object html5QRcodescanner.

$(document).on('click', '.scanQRCode', function() { console.log("Initiate Scanner4"); $("#mreader").show(); target = $(this).data("qrr-target"); let scanner4 = new Html5QrcodeScanner("mreader", { fps:2, qrbox:250 }); scanner4.render(onScan4Success); }); function onScan4Success(code, decodedResult) { if (code) { $(target).val(code); console.log(target +" :: "+ code); $('#mreader').hide(); } scanner4.clear(); }

error given: Uncaught ReferenceError: scanner1 is not defined

Any ideas out there?

[kcbob2000]

I have several devices that are no longer able to scan barcodes, and I think it is due to the camera looking blurry now but it didn't before. I tried messing with the fps but nothing is working and I have no idea what it could be. Does anyone have an idea of what I can try?

[rifadul]

@mebjas I am really grateful to you for creating this amazing package. I am using this package in React TypeScript. I am facing some issues with this package. I need some help from you.

I run the project and give the camera permission to scan the QR or Bar code after that stop the scanning and that time if I reload this page or go to another page and come back to this page the camera is open. It's it possible to customize the camera permission? If I reload the page or come back to another page the camera without permission or without starting it's not open.

How to customize the button text and style?

Is it possible to customize more?

can you please help with this?

[marcusparsons]

osomanden, at least one problem within your code is that scanner4 is initialized within an event listener and is not available outside of its scope. Initialize scanner4 outside of the scope of the function and instead, overwrite it within the function:

let scanner4;

$(document).on('click', '.scanQRCode', function() {
console.log("Initiate Scanner4");
$("#mreader").show();
target = $(this).data("qrr-target");
scanner4 = new Html5QrcodeScanner("mreader", { fps:2, qrbox:250 });
scanner4.render(onScan4Success);
});
function onScan4Success(code, decodedResult) {
if (code) {
$(target).val(code);
console.log(target +" :: "+ code);
$('#mreader').hide();
}
scanner4.clear();
}

[justinteractive]

Hello all - is it just me and my team or has the scanner just stopped scanning? Even testing on scanapp.org and there appears to be 0 fps - just isn't scanning?

[mebjas]

There was a bug, it has been fixed in version 2.3.7

[iceStorm]

How can i turn off the camera when HTML5QRCode instance is disposing, like in React.useEffect return method ?!

[iceStorm]

I mean turn off the device's camera when disposing HTML5QRCode 😊

[Niterox]

How do you handle iPhone 14 multicamera? We designed it without the ability to choose the camera. It chooses the camera by default. Unfortunately the default camera cant focus in close to mid range.

Any suggestions?