当我在 Chrome 浏览器中打开我的项目时，相机无法工作，但在 Firefox 中工作正常

Question

当我在 Chrome 浏览器中打开我的项目时，相机无法工作，但在 Firefox 浏览器中工作正常。我怎么解决这个问题？也就是说，在我的项目中，我需要通过摄像头扫描二维码，并且它应该在任何浏览器中都可以工作。

它是镀铬的👆👆👆

在火狐浏览器中

这是我的JS代码

const input = document.querySelector("input");
      const modal = document.querySelector(".modal");
      const modal_open_btn = document.querySelector("#open-scan-btn");
      const modal_close_btn = document.querySelector(".btn-close");
      // Instascan library to handle QR code scanning
      const scanner = new Instascan.Scanner({
        video: document.getElementById("qr-video"),
      });

      // Callback function when QR code is scanned
      scanner.addListener("scan", function (content) {
        // alert("QR Code content: " + content);
        
        // Do something with the scanned content (e.g., send it to the server)
        input.value = content;

        scanner.stop();
        modal_close_btn.click();
      });

      modal_open_btn.addEventListener("click", () => {
        // Open the camera and start scanning when the page is loaded
        Instascan.Camera.getCameras()
          .then((cameras) => {
            if (cameras.length > 0) {
              scanner.start(cameras[0]);
            } else {
              console.error("No cameras found.");
            }
          })
          .catch((err) => console.error(err));
      });

      modal_close_btn.addEventListener("click", () => {
        // Stop scanning and close the camera when the close button is clicked
        scanner.stop();
      });

<script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    ></script>

Answer 1

HTTP Permissions-Policy 标头提供了一种允许和拒绝在文档中或文档中的任何 iframe 元素内使用浏览器功能的机制。

相机 控制当前文档是否允许使用视频输入设备。禁用此策略时， getUserMedia() 返回的 Promise 将拒绝并返回 NotAllowedError DOMException。

另请检查此我从这里得到答案

Answer 2

Instascan.js 不支持所有浏览器，请尝试 HTML5-QR-CODE。