调用navigator.mediaDevices.getUserMedia时相机无法聚焦的问题求助

使用navigator.mediaDevices.getUserMedia调用相机进行二维码扫描时，遇到以下问题：当二维码尺寸较小且拍摄距离过近时，相机无法聚焦得到清晰画面，设置focusMode参数也没有效果。尝试过html5-qrcode、qr-scanner、vue-qrcode-reader等第三方JavaScript插件，以及原生API，均无法识别实物上的小型二维码。

以下是我的实现代码：

<!DOCTYPE html>
<html>

<head>
    <title>HTML5 QR Code Scanner</title>
    <meta charset="utf-8">
    <script src="/assets/js/jsQR.min.js"></script>
</head>

<body>
    <div style="width: 100vw;height: 1200;display: flex;align-items: center;justify-content: center;">
        <video id="video" width="1200" height="1200" autoplay></video>
        <canvas id="canvas" width="1200" height="1200" style="display:none;"></canvas>
    </div>
    <p id="result"></p>
    <script>
        var video = document.getElementById("video");
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var result = document.getElementById("result");
        let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
        console.log('supported', supportedConstraints)
        const constraints = {
            width: { min: 640, ideal: 1280 },
            height: { min: 480, ideal: 720 },
            advanced: [{ width: 1920, height: 1280 }, { aspectRatio: 1.333 }, { focusMode: "continuous" }]
        }

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({
                video: {
                    width: 900, height: 900, 
                    facingMode: { exact: 'environment' },
                    advanced: [{ focusMode: "continuous" }],
                    frameRate: { ideal: 10, max: 15 }
                }
            }).then(function (stream) {
                const track = stream.getVideoTracks()[0];
                track.applyConstraints(constraints).then((e) => {

                }).catch((e => { alert('error') }))
                let constraintsData = track.getConstraints();
                console.log('constraintsData', constraintsData)

                video.srcObject = stream;
                video.play();
                setInterval(function () {
                    context.drawImage(video, 0, 0, 300, 300);
                    var imageData = context.getImageData(0, 0, 300, 300);
                    var code = jsQR(imageData.data, imageData.width, imageData.height);
                    if (code) {
                        alert(code.data)
                    } else {
                        result.textContent = "waitting";
                    }

                }, 500);
            }).catch(function (err) {
                result.textContent = "err:" + err;
            });
        } else {
            result.textContent = "sorry";
        }
    </script>
</body>

</html>

内容的提问来源于stack exchange，提问作者tao ran