Avoiding Camera Permission and Keep Scanning

[alikemaltanriverdi]

Hey guys,

I am still pretty new in this library and trying to figure out a way to avoid asking permissions for camera every time.

I also would like to scan a barcode -> stop the scanning if an successful -> use the result -> go back to scanning without initial screen and stay in this loop until users chooses to stop using my custom action buttons.

I cannot really see what functions or attributes I can use to complete these operations. Can you provide more documentation or help?

Every help is appreciated!

[ROBERT-MCDOWELL]

• scan a barcode -> stop the scanning if an successful -> use the result -> go back to scanning without initial screen
  you can do it, up to you to code it as you wish. follow the samples here on the README

[alikemaltanriverdi]

Robert, thank you for your suggestion. I was able to figure out using .start() instead of .render(), but I am still having some troubles. If you don't mind, can you please see the issue below?

I am using the following code:

 html5QrCode.start({facingMode: "environment"},{fps: 5, qrbox: 250},function(decodedText,decodedResult){
                            html5QrCode.stop().then(()=>{
                               call something()
                            })

in that call something() function, I am calling the html5QrCode.start() again to run it back as follows:

 html5QrCode.start({facingMode: "environment"},{fps: 5, qrbox: 250},function(decodedText,decodedResult){
                            html5QrCode.stop().then(()=>{
                               call something()
                            })

after this second call I am getting the following console error:
and I am seeing two camera screens rendered instead of 1.

No matter what I tried ( I tried using clear() function before and after) I still keep getting the same error.

[ROBERT-MCDOWELL]

To stop using camera and thus stop scanning, call Html5Qrcode#stop() which returns a Promise for stopping the video feed and scanning.

html5QrCode.stop().then((ignore) => {
// QR Code scanning is stopped.
}).catch((err) => {
// Stop failed, handle it.
});

Note that the class is stateful and stop() should be called to properly tear down the video and camera objects safely after calling start() when the scan is over or the user intend to move on. stop() will stop the video feed on the viewfinder.

[ROBERT-MCDOWELL]

why not to try the html5QrCodeScanner class first?

[alikemaltanriverdi]

Okay, I'll give that a try. Thank you for your suggestions

[alikemaltanriverdi]

@ROBERT-MCDOWELL , first of all I'd like to thank you for your help, I was able to keep scanning and everything looks good. I just have one small problem with the scanning. When I point the camera to the barcode at the time it's being initialized, it's throwing an exception "Stop the camera before rescanning"(or something like this) in mobile browsers and then website stops responding. Is there a way for to put a hold on the scanner and start scanning 100 miliseconds after it's initialized?

[ROBERT-MCDOWELL]

as I did, you can create a boolean set to TRUE when the scan is correct and a timeout to X msec when set to FALSE for a new scan.
or after you managed the data.

[alikemaltanriverdi]

Yes, I did those for the repeating scans and it's working perfect, but this error even happens at the beginning, even without doing nothing with the data.
To Replicate this please try:

Use this code:
html5QrCode.start({facingMode: "environment"},{fps: 2, qrbox: 250, delay:1000},function(decodedText,decodedResult){ html5QrCode.stop().then(()=>{ do something})

1. In your phone browsers, open your link
2. Point the camera to a barcode while it's being initialized
3. Do some job in "do something" above. It won't matter even if you use a settimeout, and it will throw an error.

If there's a true scan while the camera is being initialized (not fully initialized and there's a barcode in front of the camera), then this throws an error.
What you are saying completely true for web browsers in computers and their cameras. Since phones are kind of faster and their cameras are built to focus so much faster, it causes errors. I just want to put some wait/ delay in start() function to let it wait for 100ms after the camera is initialized.

[alikemaltanriverdi]

FYI: I know that there is no "delay" option in start() function

[athuisman]

Can someone share the working code ?

[athuisman]

@ROBERT-MCDOWELL @alikemaltanriverdi ?

[mebjas]

Check #246 (comment) (this has been implemented).

[athuisman]

Check #246 (comment) (this has been implemented).

Thanks !

[mebjas]

Update

This feature has been implemented in version 2.0.12 - see changelog - https://github.com/mebjas/html5-qrcode/blob/master/changelog.md#version-2012

Use the config called rememberLastUsedCamera to enable this feautre

function onScanSuccess(decodedText, decodedResult) {
      // handle success.
  }
  let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader", 
    { 
        fps: 10,
        qrbox: {width: 250, height: 250},
        rememberLastUsedCamera: true
        // ^ set this to false to disable this.
    });
  html5QrcodeScanner.render(onScanSuccess);

Once the user grant permission for camera (which is required in all browsers once) - the library will remember this and automatically open last used camera next time user opens your web page - see the demo page: qrcode.minhazav.dev for instance.