BarcodeDetector 是 HTML5 实验性 API，支持在 Chromium 浏览器（Chrome/Edge 103+）中通过摄像头或图像识别多种条码（如 QR Code、EAN-13），需 HTTPS/localhost 环境，返回多条码结果数组，兼容性及格式支持有限，建议结合 ZXing 降级使用。
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>）作为输入源，持续调用 detect() 方法。该方法返回一个 Promise，解析结果为包含多个 BarcodeDetection 对象的数组 —— 每个对象对应一个被识别的条码，天然支持**同时出现的多条码**。
- 使用
requestAnimationFrame或定时器控制检测频率（如每 200ms 一次），避免过度消耗性能 -
detect()接收<video>、<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);
}
}
处理多条码结果与常见问题
同一帧中识别出多个条码是正常行为，detect() 的返回值就是数组，无需额外合并或去重逻辑。
立即学习“前端免费学习笔记（深入）”；
- 若结果为空数组
[]，说明当前画面未检测到任何匹配格式的条码 - 部分格式（如 UPC-A）可能因模糊/反光/角度过大而漏检，可尝试提升分辨率或调整曝光
- 不支持中文 QR Code 中的 GBK 编码（部分旧生成器产生），建议统一用 UTF-8 编码生成
- 暂不支持 PDF417、Data Matrix 等格式（Chrome 126 仍未加入，需查 chromestatus 确认）
替代方案与增强建议
若需更广格式支持、离线鲁棒性或兼容 Safari/Firefox，可结合成熟库（如 @zxing/library）做降级处理：
- 先尝试
BarcodeDetector，失败则 fallback 到 ZXing 的BrowserMultiFormatReader - 对
<video>帧进行 canvas 截图再送入 ZXing，实现“多码 + 多格式”覆盖 - 添加 UI 反馈：高亮识别区域、播放提示音、自动暂停检测（如成功读取后停 1.5 秒防重复触发）
