Wrong aspectRatio displayed on mobile (Android & iOS)

Describe the bug

I want to create an fullscreen scanner, so I setted the aspectRatio = window.innerWidth / window.innerHeight (the result on iphone 8 is 0.6843065693430657). But the video was rendered with a wrong aspect ratio (landscape instead of portrait). Additionally, It worked great on MacOs’s Chrome and was not stable on MacOs’s Safari (sometime correct, sometime wrong).

To Reproduce

         this.html5QrCode = new Html5Qrcode('qr-reader')

          const camera = { facingMode: 'environment' }
          const qrBoxSize = 250
          const width = window.innerWidth
          const height = window.innerHeight
          const aspectRatio = width / height
          const config = {
            fps: 20, // frame per seconds for qr code scanning
            aspectRatio,
            qrbox: { width: qrBoxSize, height: qrBoxSize },
          }

          await this.html5QrCode.start(
            camera,
            config,
            (decodedText, decodedResult) => this.onScanSuccess(decodedText, decodedResult),
            (error) => this.onScanFailure(error),
          )

Expected behavior

The camera’s video should be display with correct aspect ratio (fullscreen)

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: safari + chrome on iPhone, safari on macOS.
• Version: 96

Smartphone (please complete the following information):

• Device: iphone 6, Xiaomi Redmi
• OS: iOS 15.1
• Browser: safari, chrome
• Version: latest

Additional context Add any other context about the problem here.

[bahung1221]

You can try the hack below, which worked perfectly for me.

          const width = window.innerWidth
          const height = window.innerHeight
          const aspectRatio = width / height
          const reverseAspectRatio = height / width

          const mobileAspectRatio = reverseAspectRatio > 1.5
            ? reverseAspectRatio + (reverseAspectRatio * 12 / 100)
            : reverseAspectRatio

          const config = {
            fps: 20, // frame per seconds for qr code scanning
            qrbox: { width: qrBoxSize, height: qrBoxSize },
            videoConstraints: {
              facingMode: 'environment',
              aspectRatio: width < 600
                ? mobileAspectRatio
                : aspectRatio,
            },
          }

[kunambi]

@bahung1221

qrBoxSize

Where is this variable set?