Poor Performance in Small `<div>` Containers

[maksimstojkovic]

Describe the bug Scanning performance seems to be heavily dependent on the size of the <div> containing the video feed. This leads to poor performance when the barcode reader is rendered in a small <div> with a constrained width and/or height.

Is there any way to circumvent this issue, maintaining the performance of the large scanner in a smaller container?

Steps To Reproduce

1. Print a 1D barcode on paper in multiple sizes (Reference Sheet: barcode_testing.pdf).
2. Go to Testing CodePen.
3. Attempt to scan each barcode at various angles.
4. Check difference in scanning performance by looking at whether qrbox border changes colour.

Expected behavior Both readers should change colour simultaneously (or very close to simultaneously, this can be tested by changing the width of the #reader-1 container to match the container of #reader-2), indicating both have successfully read the barcode at the same time.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Firefox
• Version: 107.0

Additional context

• Camera: Logitech C920

[maksimstojkovic]

As a fix, I've created the following workaround which effectively upscales the video feed before it is processed, improving performance.

Upscaling CodePen

Given this workaround, are there any better solutions available?

Note: The qrbox border has to be removed in order to maintain the correct qrbox positioning after scaling.

[mebjas]

@maksimstojkovic

Thanks for the pointer! Will implement this technique into the library directly!

[maksimstojkovic]

@mebjas Sounds good!

Ideally the implemented solution handles this "upscaling" process programmatically in JS, rather than CSS, to ensure it works consistently across browsers (Firefox renders the transformed reader differently due to how margin CSS is handled).

Based on testing, this may be a contributing factor to poor performance on some mobile phones with smaller displays, as well as websites with responsive containers.

[mebjas]

Ideally the implemented solution handles this "upscaling" process programmatically in JS, rather than CSS, to ensure it works consistently across browsers (Firefox renders the transformed reader differently due to how margin CSS is handled).

Yes this is the plan. I could make it a user configuration (like scandit)

[pawanjenu]

@maksimstojkovic , are you facing detecting Barcodes in IOS devices?

[maksimstojkovic]

@pawanjenu I tried using the scanner above in Safari on an iPhone 8 (iOS 16.1.2).

Referencing the discussion in #618, I tested the solution above using https://barcode.tec-it.com/en/Code39?data=1111031709.

Reader 2 (which uses the "upscaling" solution from above) seems to detect the barcode more frequently when aimed at the barcode (on a screen) at various angles.

Additionally, I tried scanning the code in the following image using the upscaled implementation (with --scanner-upscale: 10).

While Reader 2 could only detect the barcode (on a screen) at a very specific angle which corrects for skew in the image, Reader 1 could not detect the barcode at all.

[pawanjenu]

@maksimstojkovic ,

unable to find CSS/upscaling solution at https://codepen.io/maksimstojkovic/pen/vYravXz, can you please share the solution? I would like to give it a try.

[maksimstojkovic]

As a fix, I've created the following workaround which effectively upscales the video feed before it is processed, improving performance.

Upscaling CodePen

Given this workaround, are there any better solutions available?

Note: The qrbox border has to be removed in order to maintain the correct qrbox positioning after scaling.

Please use the link in this comment from above:

Upscaling CodePen

[pawanjenu]

@maksimstojkovic , would it be posible for you to share stackblitz link for the same (render 2 only- the one you told works better for IOS) I tried your solution, doesn't seem to be working. wanted to confirm once from your end too.

Thanks

[paulharris]

Did this get folded in?