BarcodeDetector 是 HTML5 实验性 API，用于在 Chromium 浏览器（Chrome/Edge 89+）中通过摄像头实时解码条形码和二维码，需 HTTPS/localhost 安全上下文，依赖 getUserMedia 获取视频流，并手动调用 detect() 逐帧扫描。
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：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
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（推荐，更精准）触发扫描：
- 初始化 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();
});
4. 注意事项与常见问题
⚠️ 安全限制：页面必须通过 HTTPS 或运行在 localhost，否则 getUserMedia 和 BarcodeDetector 均会被拒绝。
⚠️ 权限与用户交互：getUserMedia 需要用户主动触发（如点击按钮），不能在页面加载时自动调用。
⚠️ 性能优化：频繁调用 detect() 开销较大，建议控制频率（如每 500ms 最多一次），或扫码成功后暂停。
⚠️ 格式支持：并非所有格式都默认可用，可通过 BarcodeDetector.getSupportedFormats() 查询当前浏览器支持的类型。
