Question 277554 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React-QR-reader. The height and width of the video does not match the height and width video on the device

The height and width of the video does not match the height and width video on the device.
Have styles component:

<QrReader
scanDelay={500}
onResult={handleScan}
ViewFinder={scanOverlay}
containerStyle={{ width: 300, height: 300, }}
videoStyle={{width: 300, height: 300, border: 'solid', borderWidth: '4px', borderColor: qrData.length === 0 ? 'red' : 'green', }}
constraints={{facingMode: 'environment'}}
/>

But video sizes are not 300×300. How to fix this?

mobile camera

desktop camera

Tags:

2

Answers


  1. 0

    npm install react-qr-reader

    Check if you are using the correct version of the react-qr-reader library and that the library is up to date. Older versions of libraries may have issues that have been fixed in newer releases.

    Login or Signup to reply.
  2. 0

    I believe this is related to the default aspectRatio so consider setting the aspect ratio constraints as follow:

    constraints={{
  facingMode: 'environment',
  aspectRatio: { ideal: 1 },
}}

    Full component code:

    <QrReader
  scanDelay={500}
  onResult={handleScan}
  ViewFinder={scanOverlay}
  containerStyle={{ width: 300, height: 300 }}
  videoStyle={{ width: '100%', height: '100%', border: 'solid', borderWidth: '4px', borderColor: qrData.length === 0 ? 'red' : 'green' }}
  constraints={{
    facingMode: 'environment',
    aspectRatio: { ideal: 1 }
  }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search