scan delay and rectangle box

[rubiyz]

Hello,

First thank you for this wonderfull library. Greatly appreciated.

I needed two distinct small features which I implemented on the base of the current version.

One is the possibility to insert a delay between successive scans. My customers need to scan many barcodes one after the other, but I haven't found a way to disable the scan for two seconds, the time needed to position the smartphone on the next product.

The second is the possibility to specify a width and a height for the qrbox. My need is to scan 1d barcodes and it look better to have a rectangle to select 1d barcode rather than a square.

So I implemented these two small features in html5-qrcode.ts and I was wondering if you might be interested to merge these into your library ?

Best regards,
Yves

[mebjas]

One is the possibility to insert a delay between successive scans. My customers need to scan many barcodes one after the other, but I haven't found a way to disable the scan for two seconds, the time needed to position the smartphone on the next product.

What exactly is expected from the library for this case?

Update (09/30/2021)

Support for rectangular scan area is now implemented in latest version of library - Changelog

[kuhlaid]

Most stand-alone barcode scanners have a delay after they acquire a read on a code so it doesn't accidentally pick up something you do not want scanned as you move the scanner (or the object you are scanning). For example if you had a piece of paper filled with sets of barcodes, you want to scan ONE and then reposition the scanner to pickup another. However you DO NOT want to pickup other codes as you are moving the scanner across or off the page. Thus the delay. Ideally you could set the scanner to 'continuous read with delay' or 'read once until you press a button or something to start scanning again'.

[mebjas]

I see, I think this part can be better handled on the consumer side. You can always explicitly decide to not consume the other code.

[ROBERT-MCDOWELL]

@kuhlaid
this is your own coding to do what you wish, for example you can use a boolean to false until the scan is successful so you set on true until you finished to manage your data and go back to false for a new scan.

[rubiyz]

@kuhlaid
this is your own coding to do what you wish, for example you can use a boolean to false until the scan is successful so you set on true until you finished to manage your data and go back to false for a new scan.

Absolutely. It's a possibility to do it. I was just wondering if it might be a useful feature for others and if so, if it could be included directly in the library.

[ROBERT-MCDOWELL]

You can open a new isseu tagged as "new feature", maybe something like have a new setting called "scanDelay" to allow the user to control the new scan interval?

[Braggo]

The second is the possibility to specify a width and a height for the qrbox. My need is to scan 1d barcodes and it look better to have a rectangle to select 1d barcode rather than a square.

So I implemented these two small features in html5-qrcode.ts and I was wondering if you might be interested to merge these into your library ?

Best regards,
Yves

can u share ure implemented code for rectangle box?

thx :)

[benaloui]

@rubiyz can you please share with us you new implemented function (rezise rectangle for 1D barcodes) ? I'm trying to do that but I failed.
This is my e-mail if you wan to write me something : [email protected]
Thank a lot dude.

[benaloui]

Hello,

First thank you for this wonderfull library. Greatly appreciated.

I needed two distinct small features which I implemented on the base of the current version.

One is the possibility to insert a delay between successive scans. My customers need to scan many barcodes one after the other, but I haven't found a way to disable the scan for two seconds, the time needed to position the smartphone on the next product.

The second is the possibility to specify a width and a height for the qrbox. My need is to scan 1d barcodes and it look better to have a rectangle to select 1d barcode rather than a square.

So I implemented these two small features in html5-qrcode.ts and I was wondering if you might be interested to merge these into your library ?

Best regards,
Yves

Hi @rubiyz, can you please share with us yours update code ?
BR

[rubiyz]

Hello,

I'm not too familiar with the best way to share the code. Anyway, I put the two files I modified here: https://github.com/rubiyz/html5-qrcode. Let me know if it helps or how I can do it otherwise.
Best regards,
Yves

[benaloui]

Thank you for your rapid answer. can you just remember me how to compile again these update file to generate a new html5-qrcode.min. King regards. Le mar. 28 sept. 2021 à 15:09, rubiyz ***@***.***> a écrit :

…

Hello, I'm not too familiar with the best way to share the code. Anyway, I put the two files I modified here: https://github.com/rubiyz/html5-qrcode. Let me know if it helps or how I can do it otherwise. Best regards, Yves — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#250 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARFSMLHH6RYGQULEIC6AK7DUEG5AHANCNFSM476RCEEQ> . 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>.

[rubiyz]

basically you can convert the .ts to .js with the tsc command (https://www.typescriptlang.org/docs/handbook/compiler-options.html). Then I'm using uglifyjs to convert from .js to .min.js (https://www.npmjs.com/package/uglify-js). But again, I'm a beginner with javascript and typescript. There are probably other ways...

[benaloui]

Thank you very much. I'll try your method. I'm also beginner with typescript. Le mar. 28 sept. 2021 à 15:37, rubiyz ***@***.***> a écrit :

…

basically you can convert the .ts to .js with the tsc command ( https://www.typescriptlang.org/docs/handbook/compiler-options.html). Then I'm using uglifyjs to convert from .js to .min.js ( https://www.npmjs.com/package/uglify-js). But again, I'm a beginner with javascript and typescript. There are probably other ways... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#250 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARFSMLBVXL66SXZMPKIU6P3UEHAJVANCNFSM476RCEEQ> . 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>.

[benaloui]

When I run my code after compilation a have this error : [image: image.png] Do you see an error in my source code here attached. Can you send my your html5-qrcode.min.js to compare it with mine generated ? Thanks Le mar. 28 sept. 2021 à 15:37, rubiyz ***@***.***> a écrit :

…

basically you can convert the .ts to .js with the tsc command ( https://www.typescriptlang.org/docs/handbook/compiler-options.html). Then I'm using uglifyjs to convert from .js to .min.js ( https://www.npmjs.com/package/uglify-js). But again, I'm a beginner with javascript and typescript. There are probably other ways... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#250 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARFSMLBVXL66SXZMPKIU6P3UEHAJVANCNFSM476RCEEQ> . 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>.

[rubiyz]

I was not able to see the image in your message. Have a look on the javascript files here: https://github.com/rubiyz/html5-qrcode/tree/main/output

[benaloui]

Hi @rubiyz do you have an example of script that works fine with yours update html5-qrcode.min.js ? Perhpas this could help me.

[benaloui]

Can you send me a screen shot of your result rectangle scanner ? Do you have an example of you code in with your update works ? Thank you. Envoyé de mon iPhone

…

Le 28 sept. 2021 à 20:38, rubiyz ***@***.***> a écrit :  I was not able to see the image in your message. Have a look on the javascript files here: https://github.com/rubiyz/html5-qrcode/tree/main/output — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[rubiyz]

basically it's a replacement for the original version and it should work without issue. To use the added fonctionnalities, the config should be changed to something like

const config = {
      fps: 10,
      qrboxWidth: 240,
      qrboxHeight: 160,
      aspectRatio: 0.75,
      idleTimeout: 1500,
    };

[benaloui]

I'm using this constructor :
var html5qrcode = new Html5Qrcode("qr-reader", false);

Do you use the same or this :

var html5QrcodeScanner = new Html5QrcodeScanner(
"reader", { fps: 10, qrbox: 250 });

Because I think it's not the same thing.

[rubiyz]

Here is my code, but there are other stuff that you would not need for sure. This code is meant to be used with Phoenix LiveView, but you should get the idea... The pushEvent can be completely discarded for example. They are linked to LiveView. import { Html5Qrcode } from "./html5-qrcode/html5-qrcode.js"; export const html5QRcode = { mounted() { var lastBarcode = ""; this.handleEvent("stop", () => alert("stop")); var cameraId = null; // This method will trigger user permissions Html5Qrcode.getCameras() .then((devices) => { /** * devices would be an array of objects of type: * { id: "id", label: "label" } */ if (devices && devices.length) { cameraId = devices[0].id; var element = document.getElementById("no.camera.placeholder"); element.classList.add("hidden"); this.pushEvent("camera_found", { devices }); html5QrCode.start( { facingMode: { exact: "environment" } }, config, qrCodeSuccessCallback ); } }) .catch((err) => { console.log("No camera found"); }); const html5QrCode = new Html5Qrcode("reader"); const qrCodeSuccessCallback = (barcode) => { if (barcode != lastBarcode) { lastBarcode = barcode; setTimeout(function () { lastBarcode = ""; }, 5000); this.pushEvent("barcode_scanned", { barcode }); } }; const config = { fps: 10, qrboxWidth: 240, qrboxHeight: 160, aspectRatio: 0.75, idleTimeout: 1500, }; this.pushEvent("camera_selected", { cameraId }); }, };

…

------ Original Message ------ From: "benaloui" ***@***.***> To: "mebjas/html5-qrcode" ***@***.***> Cc: "rubiyz" ***@***.***>; "Mention" ***@***.***> Sent: 30 Sep 2021 11:32:15 Subject: Re: [mebjas/html5-qrcode] scan delay and rectangle box (Discussion #250)

I'm using this constructor : var html5qrcode = new Html5Qrcode("qr-reader", false); Do you use the same or this : var html5QrcodeScanner = new Html5QrcodeScanner( "reader", { fps: 10, qrbox: 250 }); Because I think it's not the same thing. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#250 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADDYOOMRNQXVWJCBXB6JVPLUEQVB7ANCNFSM476RCEEQ>. 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>.

[ROBERT-MCDOWELL]

why not to create a boolean with true when barcode is scanned until the next scann show a different barcode?

[rubiyz]

I guess that should do the job too. One edge case I can see is when the user want to scan twice in a row the same barcode, like in a shop to add the same product twice. The way I went with the delay doesn't have this issue, but might have other disadventages...

[mebjas]

PR for rectangular QR box - #300

[mebjas]

Published with version 2.0.13 - https://github.com/mebjas/html5-qrcode/releases/tag/v2.0.13

(on Github as well as npm)