React WebbApp QR scanner not reading dense QR codes

I need help with below query. I will pay for correct advice if you know how to solve. I have some rather small and dense QR codes that I'm having trouble reading in my React Webapp. I'm having no trouble reading them in the Android native camera and I've written a flutter mobile app that uses the "qrscan" ([login to view URL]) dart library to do the same in app extremely well, but every node library I've found is having no luck. The problem looks to be that the browser is using a much lower quality camera stream. I'd like to use "react-qr-reader" ([login to view URL]) as it's well maintained and easy to integrate, but I've also tried the ever popular ZXing library with no better luck. An example component would be: <QrReader className="scanner__camera-frame" onResult={(result, error) => [login to view URL](result)} constraints={{ facingMode: 'environment' }} /> and I've tried using various constraints, such as: constraints={{ facingMode: 'environment', focusMode: "continuous", zoom: 4.0 }} The camera in the browser app always appears to be grainy or out of focus. Im trying to understand if this is a limitation of the browser's access to a phone's camera feed, or with the web based decoding libraries, or with some setting that I can tweak? To make testing easier, here's an example React app: import React from 'react'; import ReactDOM from 'react-dom'; import { QrReader } from 'react-qr-reader' [login to view URL]( <[login to view URL]> <QrReader className="scanner__camera-frame" onResult={(result, error) => [login to view URL](result)} constraints={{ facingMode: 'environment', focusMode: "continuous", zoom: 4.0 }} /> </[login to view URL]>, [login to view URL]('root') ); This is a simple task for someone with the right knowledge of this issue. We have ongoing work if this can be solved.