Poor Performance in Small `<div>` Containers

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

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

[mebjas]

@maksimstojkovic

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