如何利用HTML5中BarcodeDetector实现多条码同时扫描并解析返回结果-H5教程-PHP中文网

barcodedetector 是 html5 实验性 api，支持在 chromium 浏览器（chrome/edge 103+）中通过摄像头或图像识别多种条码（如 qr code、ean-13），需 https/localhost 环境，返回多条码结果数组，兼容性及格式支持有限，建议结合 zxing 降级使用。

如何利用html5中barcodedetector实现多条码同时扫描并解析返回结果

BarcodeDetector 是 HTML5 提供的实验性 API，用于在浏览器中直接通过摄像头或图像识别条码（如 QR Code、EAN-13、Code 128 等），无需依赖第三方库或后端服务。它支持**单次检测多条码**，但需注意：目前仅在 Chrome（103+）、Edge（103+）等基于 Chromium 的浏览器中可用，且需在 HTTPS 或 localhost 环境下运行。

启用并初始化 BarcodeDetector

需显式声明支持的格式，并检查浏览器兼容性：

⚠️ 注意：必须在安全上下文（HTTPS 或 localhost）中调用，否则会抛出 SecurityError

创建实例时传入 { formats: [...] } 指定要识别的条码类型（如 "qr_code"、"ean_13"、"code_128"）
建议提前检测 API 是否可用，避免运行时报错
示例代码：

if ('BarcodeDetector' in window) {
  const detector = new BarcodeDetector({
    formats: ['qr_code', 'ean_13', 'code_128', 'upc_a']
  });
} else {
  console.warn('BarcodeDetector not supported');
}

从视频流实时扫描多条码

将摄像头画面（<video></video>）作为输入源，持续调用 detect() 方法。该方法返回一个 Promise，解析结果为包含多个 BarcodeDetection 对象的数组 —— 每个对象对应一个被识别的条码，天然支持**同时出现的多条码**。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

使用 requestAnimationFrame 或定时器控制检测频率（如每 200ms 一次），避免过度消耗性能
detect() 接收 <video></video>、<canvas></canvas> 或 ImageBitmap，推荐直接传 video 元素
每个结果含 rawValue（解码内容）、format（类型）、boundingBox（坐标）等字段

async function scanFromVideo(videoEl) {
  try {
    const detections = await detector.detect(videoEl);
    detections.forEach(barcode => {
      console.log(`Found ${barcode.format}: ${barcode.rawValue}`);
      // 可叠加绘制 boundingBox 到 canvas 实现视觉反馈
    });
  } catch (err) {
    console.error('Detection failed:', err);
  }
}