iPhone 14 Pro网页端后置摄像头近距离拍摄模糊问题求助

我在进行Web开发时，发现iPhone 14 Pro的后置摄像头在网页端拍摄近距离画面时无法自动正常对焦。

以下是iPhone 14 Pro的测试截图：

作为对比，相同代码在iPhone 12上的测试结果：

目前我还没在网上找到相关解决方案，但看到有其他Web应用解决了这个问题，希望能找到修复方法。

用于测试的源代码如下：

<body>    
    <div id="contentainer">
      <div class="title">get divce camera and show video</div>
      <div class="video-button">
        <button id="start">start</button>
        <button id="stop">stop</button>
      </div>
      <video id="video" width="640" height="480" autoplay></video>
      <select class="midia-list-select"></select>
    </div>
    <script>
      const constraints = {
        video: true,
      };
      function inferFacingModeFromLabel(label) {
        if (label.toLowerCase().includes("back")) {
          return "environment";
        } else if (label.toLowerCase().includes("front")) {
          return "user";
        } else {
          return "environment";
        }
      }
      function inferFacingModeFromCapabilities(capabilities) {
        if ((capabilities?.facingMode?.indexOf("user") ?? -1) >= 0) {
          return "front";
        } else if (
          (capabilities?.facingMode?.indexOf("environment") ?? -1) >= 0
        ) {
          return "back";
        } else {
          return undefined;
        }
      }
      function midiaOnSelect() {
        const midiaList = document.querySelector(".midia-list-select");
        const midiaId = midiaList.value;
        navigator.mediaDevices
          .getUserMedia({
            video: {
              deviceId: {
                exact: midiaId,
              },
            },
          })
          .then((stream) => {
            console.log(stream);
            const video = document.getElementById("video");
            video.srcObject = stream;
          });
      }
      function getMidiaVideoList() {
        function createMidiaOption(device, facingMode) {
          const option = document.createElement("option");
          option.value = device.deviceId;
          option.text = `${facingMode.facingModeFromapabilities}|${facingMode.facingModeFromLabel}------${device.label}`;
          return option;
        }
        navigator.mediaDevices.enumerateDevices().then(async (devices) => {
          console.log("divices", devices);
          devices.forEach((device) => {
            console.log("divice", device);
            if (device.kind === "videoinput") {
              navigator.mediaDevices
                .getUserMedia({
                  video: {
                    deviceId: {
                      exact: device.deviceId,
                    },
                  },
                })
                .then((stream) => {
                  const track = stream.getVideoTracks()?.[0];
                  const capabilities = (
                    track?.getCapabilities ?? (() => undefined)
                  ).bind(track)();
                  console.log(capabilities);
                  const midiaList =
                    document.querySelector(".midia-list-select");
                  const facingModeFromLabel = inferFacingModeFromLabel(
                    device?.label
                  );
                  const facingModeFromapabilities =
                    inferFacingModeFromCapabilities(capabilities);
                  midiaList.appendChild(
                    createMidiaOption(device, {
                      facingModeFromapabilities,
                      facingModeFromLabel,
                    })
                  );
                });
            }
          });
        });
      }
      window.onload = async function () {
        const start = document.getElementById("start");
        const stop = document.getElementById("stop");
        const midiaList = document.querySelector(".midia-list-select");
        start.addEventListener("click", () => {
          midiaOnSelect();
          video.play();
        });
        stop.addEventListener("click", () => {
          video.pause();
        });
        midiaList.addEventListener("change", midiaOnSelect);
        const video = document.getElementById("video");
        const media = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        media.getTracks().forEach(function (track) {
          track.stop();
        });
        getMidiaVideoList();
      };
    </script> 
</body>

提前感谢各位的解答和建议！

内容的提问来源于stack exchange，提问作者wilson liu