barcodedetector 是 html5 实验性 api，仅 chromium 103+ 浏览器支持，需 https/localhost 环境，专用于从视频流或图像检测物理条码，不处理 html 文本；不支持 safari/ios，低分辨率摄像头识别率下降，fallback 推荐 html5-qrcode。
BarcodeDetector 是目前唯一能直接对接手持终端摄像头硬件、实现高效率条码识别的原生 HTML5 API，但它**不是“HTML解析函数”**，也不处理 HTML 文本内容——它专用于从视频流或图像中检测物理条码，底层调用的是设备级图像解码能力。
为什么不能用 DOM 解析类函数做条码识别
常见误解是把 document.querySelector、innerHTML 或正则匹配当成“扫码工具”。这些函数只能提取页面里已有的文本或结构，对摄像头画面、图像像素、二维码图案完全无感知。条码识别本质是计算机视觉任务，必须走图像采集 → 预处理 → 特征提取 → 解码流程。
BarcodeDetector 在手持终端上的真实表现
- 仅在 Chrome/Edge 103+（即基于 Chromium 的安卓手持终端浏览器）中可用；Safari/iOS WebKit 仍不支持，即使 iOS 17+ 也无
BarcodeDetector实现 - 需 HTTPS 或
localhost环境，内网手持终端若用http://192.168.x.x会直接抛SecurityError - 对低分辨率摄像头（如部分工业 PDA 的 2MP 模块）识别率明显下降，尤其 EAN-13 条形码需要至少 480p 清晰帧才能稳定捕获
- 返回结果含
boundingBox坐标，可直接叠加绘制到<canvas></canvas>上做实时框选反馈，这对手持扫描引导很关键
当 BarcodeDetector 不可用时，该用哪个 JS 库
手持终端若运行旧版安卓 WebView、UC 浏览器或 iOS Safari，必须降级使用纯 JS 解码库。此时不要选 zxing-js 原始包（体积大、无优化、单线程卡顿），而应直接集成 html5-qrcode：
- 它自动检测是否支持
BarcodeDetector，支持则优先启用，不支持则无缝 fallback 到 ZXing.js 加速版 - 内置帧率控制（
fps: 10）、ROI 区域裁剪（qrbox）、灰度预处理，比手写 ZXing 调用快 2–3 倍 - 对 Code 128、EAN-13 等一维码做了针对性优化，在扫码枪替代场景下误识率低于 0.7%
- 支持
facingMode: "environment"强制后置摄像头，避免手持终端默认打开前置导致识别失败
容易被忽略的硬件适配细节
手持终端不是手机，很多坑出在固件层：
- 某些国产安卓 PDA（如霍尼韦尔 CT40、得宝 DP810）禁用了
MediaStreamTrack.getCapabilities()，导致html5-qrcode无法读取焦距/曝光参数，需手动传入{ deviceId: "xxx" }固定摄像头 ID - 部分终端 WebView 版本锁定在 Chrome 71，不支持
BarcodeDetector且OffscreenCanvas不可用，此时必须关闭useWorker: true配置项，否则解码报ReferenceError: OffscreenCanvas is not defined - 闪光灯控制（
torch: true）在非标准 Android HAL 层上常失效，建议只在明确测试通过的机型（如 Zebra TC52、Datalogic Memor 10）中启用
innerHTML 里找答案，去检查 navigator.mediaDevices.enumerateDevices() 返回的设备列表，那才是手持终端的真实入口。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
