How can I improve the camera feed in web based QR code reader?

Question

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" (https://pub.dev/packages/qrscan) 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" (https://github.com/react-qr-reader/react-qr-reader) 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) => console.log(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.

Does anyone know 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'

ReactDOM.render(
  <React.StrictMode>
    <QrReader
        className="scanner__camera-frame"
        onResult={(result, error) => console.log(result)}
        constraints={{ facingMode: 'environment', focusMode: "continuous", zoom: 4.0 }}
    />
  </React.StrictMode>,
  document.getElementById('root')
);