Image view size cannot be controlled

[ygoe]

Describe the bug The camera live image view is of any size but nothing usable. I'm designing a mobile app like view in the browser. It should use the upper half for the video and the bottom half for results and actions. Whatever I try, as soon as the video starts, that area resizes to something very unexpected. Too wide, too tall, not aligned, and the focus rectangle in the middle is unaligned, too. The unshaded area in the middle is taller than the actual white corners around it. Something in the geometry calculations is severely broken.

Then, stopping the video makes the element shrink very much. It's not possible to design a predictable UI layout with this.

I'm using the samples that let me create a custom UI, not the simple default UI.

To Reproduce Try to get the video on a fixed size you specify, not just a volatile default like in the samples.

Expected behavior If I set the size of the container element, I expect it to keep that size and not extend anywhere. Also, the camera image should be centered in that container, covering its area completely. (This may lead to cropped parts but since QR code reading isn't about video-making, and only the middle region is of interest anyway, aspect ratios of the camera are irrelevant.)

Desktop:

• OS: Windows (probably all)
• Browser: Firefox (probably all)
• Version: 88 (probably all)

Smartphone:

• Device: Samsung S10 (probably all)
• OS: Android (probably all)
• Browser: Brave (probably all)

Additional context If I'm supposed to hack the design with additional CSS rules, please tell me which rules I should use to not break the JavaScript code more than necessary.

Debugging this is complicated because I'd need to install several build tools before I can actually modify the library code and try things.

[thk-root]

I used to fix this using object-fit and width, height 100% on video element, however since an (unknown) update, this no longer works.. Such a shame, I wasted a couple hours now, trying to figure it out.

[josh-gaby]

I've fixed this in my project using the extra config option aspectRatio: 1.0, this prevents the camera opening at its default aspect ratio on desktop and iOS and instead opens it as a square. With the fixed ratio I was then able to style a container around the scanner that behaved as you would expect.

[bahung1221]

Does anyone found a workaround for this issue? I tried aspectRatio but it only works on desktop, not on mobile devices.

I created a related issue here: #387 .