scan delay and rectangle box #250

rubiyz · 2021-07-07T12:10:58Z

rubiyz
Jul 7, 2021

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 · 2021-08-01T07:05:23Z

mebjas
Aug 1, 2021
Maintainer

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

2 replies

kuhlaid Aug 1, 2021

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 Sep 30, 2021
Maintainer

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 · 2021-08-01T22:46:51Z

ROBERT-MCDOWELL
Aug 1, 2021

@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.

2 replies

rubiyz Aug 2, 2021
Author

@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 Aug 2, 2021

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 · 2021-08-20T12:04:31Z

Braggo
Aug 20, 2021

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

1 reply

benaloui Sep 28, 2021

@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 : benaloui@gmail.com
Thank a lot dude.

benaloui · 2021-09-28T09:00:03Z

benaloui
Sep 28, 2021

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

0 replies

rubiyz · 2021-09-28T13:09:12Z

rubiyz
Sep 28, 2021
Author

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

0 replies

benaloui · 2021-09-28T13:32:05Z

benaloui
Sep 28, 2021

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>.

1 reply

rubiyz Sep 28, 2021
Author

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 · 2021-09-28T13:48:46Z

benaloui
Sep 28, 2021

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>.

0 replies

benaloui · 2021-09-28T15:23:54Z

benaloui
Sep 28, 2021

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>.

2 replies

rubiyz Sep 28, 2021
Author

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 Sep 30, 2021

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 · 2021-09-28T18:50:04Z

benaloui
Sep 28, 2021

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.

2 replies

rubiyz Sep 30, 2021
Author

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 Sep 30, 2021

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 · 2021-09-30T09:40:30Z

rubiyz
Sep 30, 2021
Author

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>.

0 replies

ROBERT-MCDOWELL · 2021-09-30T11:21:06Z

ROBERT-MCDOWELL
Sep 30, 2021

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

1 reply

rubiyz Sep 30, 2021
Author

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 · 2021-09-30T14:30:39Z

mebjas
Sep 30, 2021
Maintainer

PR for rectangular QR box - #300

1 reply

mebjas Sep 30, 2021
Maintainer

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

(on Github as well as npm)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

scan delay and rectangle box #250

{{title}}

Replies: 12 comments 12 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

scan delay and rectangle box #250

Replies: 12 comments · 12 replies

mebjas Aug 1, 2021 Maintainer

Update (09/30/2021)

mebjas Sep 30, 2021 Maintainer

rubiyz Aug 2, 2021 Author

rubiyz Sep 28, 2021 Author

rubiyz Sep 28, 2021 Author

rubiyz Sep 28, 2021 Author

rubiyz Sep 30, 2021 Author

rubiyz Sep 30, 2021 Author

rubiyz Sep 30, 2021 Author

mebjas Sep 30, 2021 Maintainer

mebjas Sep 30, 2021 Maintainer

Replies: 12 comments 12 replies

mebjas
Aug 1, 2021
Maintainer

mebjas Sep 30, 2021
Maintainer

rubiyz Aug 2, 2021
Author

rubiyz
Sep 28, 2021
Author

rubiyz Sep 28, 2021
Author

rubiyz Sep 28, 2021
Author

rubiyz Sep 30, 2021
Author

rubiyz
Sep 30, 2021
Author

rubiyz Sep 30, 2021
Author

mebjas
Sep 30, 2021
Maintainer

mebjas Sep 30, 2021
Maintainer