如何在HTML5中通过BarcodeDetector实现摄像头扫描二维码并获取内容-H5教程-PHP中文网

BarcodeDetector 是 HTML5 实验性 API，用于在 Chromium 浏览器（Chrome/Edge 89+）中通过摄像头实时解码条形码和二维码，需 HTTPS/localhost 安全上下文，依赖 getUserMedia 获取视频流，并手动调用 detect() 逐帧扫描。

如何在html5中通过barcodedetector实现摄像头扫描二维码并获取内容

BarcodeDetector 是 HTML5 提供的实验性 API，用于在浏览器中直接解码摄像头画面中的条形码和二维码（如 QR Code），无需依赖第三方库或后端解析。但需注意：它目前仅在 Chromium 内核浏览器（Chrome 89+、Edge 89+）中受支持，且必须在安全上下文（HTTPS 或 localhost）中运行。

1. 检查浏览器是否支持 BarcodeDetector

使用前务必检测兼容性，避免报错：

if ('BarcodeDetector' in window) {
  console.log('BarcodeDetector 可用');
} else {
  console.warn('当前浏览器不支持 BarcodeDetector');
  // 可降级使用 jsQR、QuaggaJS 等方案
}

2. 获取摄像头视频流并绑定到

这是扫描的前提——让 BarcodeDetector 能持续分析帧数据：

调用 navigator.mediaDevices.getUserMedia({ video: true }) 获取媒体流
将流赋给
设置 autoplay 和 playsinline（iOS 必需）

示例 HTML：

<video id="video" autoplay playsinline width="100%" height="400"></video>

对应 JS：

const video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => { video.srcObject = stream; })
  .catch(err => console.error('访问摄像头失败:', err));

3. 创建 BarcodeDetector 并逐帧扫描

BarcodeDetector 本身不自动监听视频帧，需手动用 requestAnimationFrame 或 video.requestVideoFrameCallback（推荐，更精准）触发扫描：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

初始化 detector，可指定要识别的格式（如 'qr_code'、'ean_13'）
在每一帧回调中，用 detector.detect(video) 分析当前画面
结果是 Promise，解析后得到 BarcodeDetection[] 数组

完整扫描逻辑示例：

let detector;
if ('BarcodeDetector' in window) {
  detector = new BarcodeDetector({ formats: ['qr_code'] });
}

function scanFrame() {
  if (!detector || !video.readyState) return;

  detector.detect(video)
    .then(barcodes => {
      if (barcodes.length > 0) {
        const result = barcodes[0].rawValue;
        console.log('扫码成功:', result);
        // ✅ 这里可触发提示、跳转、提交等操作
        // 建议扫码成功后暂停扫描，避免重复触发
        // clearTimeout(scanTimer);
      }
    })
    .catch(err => console.warn('扫码失败:', err));
  
  // 使用 requestVideoFrameCallback（Chrome 94+）更高效
  if (video.requestVideoFrameCallback) {
    video.requestVideoFrameCallback(scanFrame);
  } else {
    requestAnimationFrame(scanFrame);
  }
}

// 开始扫描（确保 video 已加载）
video.addEventListener('loadeddata', () => {
  if (detector) scanFrame();
});