Chrome浏览器中项目摄像头无法工作，Firefox正常，求解决方案

Chrome浏览器中打开项目时摄像头无法工作，但Firefox中可正常运行。项目需要通过摄像头扫描QR码，要求能在所有浏览器中正常使用。

运行截图 #

• Chrome截图：
• Firefox截图：

代码实现 #

JavaScript代码 #

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库处理QR码扫描
const scanner = new Instascan.Scanner({
  video: document.getElementById("qr-video"),
});

// 扫描到QR码后的回调
scanner.addListener("scan", function (content) {
  // alert("QR Code content: " + content);
  
  // 处理扫描内容（例：填入输入框）
  input.value = content;

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

modal_open_btn.addEventListener("click", () => {
  // 点击按钮后打开摄像头并开始扫描
  Instascan.Camera.getCameras()
    .then((cameras) => {
      if (cameras.length > 0) {
        scanner.start(cameras[0]);
      } else {
        console.error("未找到可用摄像头。");
      }
    })
    .catch((err) => console.error(err));
});

modal_close_btn.addEventListener("click", () => {
  // 关闭弹窗时停止扫描并关闭摄像头
  scanner.stop();
});

HTML引入脚本 #

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

针对Chrome摄像头无法工作的问题，从几个核心方向排查解决：

1. 修复HTTPS权限限制 #

Chrome从v47开始，要求摄像头/麦克风权限必须在HTTPS环境下才能正常获取（localhost调试除外）。如果你的项目是HTTP部署，Chrome会直接拒绝权限请求。

• 解决方法：
  • 正式环境部署到HTTPS服务器；
  • 调试阶段可临时解除限制：在Chrome地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure，开启选项并添加你的项目HTTP地址，重启Chrome即可。

2. 解决Instascan兼容性问题 #

Instascan基于旧版MediaDevices API实现，对新版Chrome的兼容性有所下降。可以通过两种方式处理：

方式一：替换为现代扫描库 #

改用qr-scanner这类基于原生API的库，兼容性更好，示例代码：

<script src="https://unpkg.com/qr-scanner@1.4.2/qr-scanner.umd.min.js"></script>

const video = document.getElementById("qr-video");
const scanner = new QrScanner(video, result => {
  input.value = result.data;
  scanner.stop();
  modal_close_btn.click();
});

modal_open_btn.addEventListener("click", () => {
  scanner.start();
});
modal_close_btn.addEventListener("click", () => {
  scanner.stop();
});

方式二：修复现有代码权限逻辑 #

在调用Instascan前主动请求摄像头权限，确保权限已获取：

modal_open_btn.addEventListener("click", async () => {
  try {
    // 主动请求摄像头权限
    await navigator.mediaDevices.getUserMedia({ video: true });
    // 再获取摄像头列表启动扫描
    const cameras = await Instascan.Camera.getCameras();
    const targetCamera = cameras.find(cam => cam.name.includes('back')) || cameras[0];
    if (targetCamera) {
      scanner.start(targetCamera);
    } else {
      console.error("未找到可用摄像头");
    }
  } catch (err) {
    console.error("摄像头权限获取失败:", err);
  }
});

3. 更换稳定的Instascan CDN源 #

你当前使用的rawgit服务已停止维护，可能导致脚本加载不稳定或不兼容新版Chrome。替换为jsDelivr的稳定源：

<script src="https://cdn.jsdelivr.net/npm/instascan@1.0.0/dist/instascan.min.js"></script>

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