Compatibility - [IOS] [Safari] - The visible QR box region and canvas are not aligned

[mebjas]

Describe the bug
The region visible under the qrbox (region other than the shaded region) is not exactly aligned with the what is printed on canvas leading to bad UX during scanning.

Describe the browser:

• OS: IOS
• Browser Safari
• Version Latest

Additional context

• To reproduce make the canvas visible and see the output.
• Validate this for other android browsers as well.

[mebjas]

The canvas drawn is purely based on some predetermined width and height, while the video feed has it's own dimension.

Use

stream.getTracks()[0].getCapabilities()

To get information on this. Ideally the viewfinder should show only this and the shaded region should be constrained within this.

Add a configurable property to begin with

[mebjas]

The bug is high priority for mobile devices as the region shown on viewfinder is not same as the one being sensed by the Qr code scanner.

[mebjas]

Validate on web, the regions are not same.

[mebjas]

Marking as fixed