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

Question

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 300x300. How to fix this?

mobile camera

desktop camera

Answer 1

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 }
  }}
/>

Answer 2

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.