HTML无法直接扫码，需用JavaScript调用摄像头：通过navigator.mediaDevices.getUserMedia获取视频流，用jsQR等库逐帧解码二维码；须控制帧率、适配分辨率、及时关闭媒体轨道，并确保HTTPS环境与权限处理。
HTML里没法直接扫码，得靠JavaScript调用摄像头
浏览器本身不提供原生二维码扫描API，navigator.mediaDevices.getUserMedia 是唯一能拿到实时视频流的入口。所有“HTML扫码”方案本质都是：用JS打开摄像头 → 把视频帧送进解码库 → 找到并解析二维码。别被标题误导，纯HTML标签（比如 <input type="file">）只能选图片，不能扫动态画面。
推荐用 jsQR + getUserMedia 组合，轻量且兼容性好
jsQR 是目前最稳的纯前端二维码识别库，不依赖后端、无网络请求、支持 DataMatrix 和 QR Code。它只处理图像数据，所以必须自己抓帧。常见坑是没控制采样频率，导致CPU飙升或识别延迟高。
- 用
requestAnimationFrame控制帧率，别用setInterval，否则容易卡死 - 把
<video>的width/height设为 320×240 或 480×360，太大（如 1280×720）会让jsQR解码变慢甚至失败 - 每次只传一帧的
Uint8ClampedArray给jsQR，别传整个canvas对象 - 识别成功后记得调用
stream.getTracks().forEach(t => t.stop())关闭摄像头，否则用户会发现摄像头灯一直亮着
QuaggaJS 已停止维护，新项目别踩这个坑
网上很多教程还在推 QuaggaJS，但它从 2019 年起就不再更新，对现代 Chrome（v90+）和 Safari（iOS 15+）存在兼容问题：比如 Quagga.init 报 InvalidStateError，或扫码区域错位。更麻烦的是它默认启用条形码识别，但二维码识别准确率反而比 jsQR 低 30% 以上，尤其在弱光或角度倾斜时。
如果你已在线上用了 QuaggaJS，迁移成本其实不高：jsQR 的核心逻辑只有 3 步——获取帧、转灰度、调用 jsQR(data, width, height)，替换掉 Quagga 的 onDetected 回调即可。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
真机调试时注意 HTTPS 和权限弹窗顺序
Chrome 和 Safari 强制要求 getUserMedia 必须在 HTTPS（或 localhost）下运行，HTTP 页面直接静默失败，控制台只报 NotAllowedError，不会提示“请换 HTTPS”。iOS 上还有个隐藏陷阱：第一次调用 getUserMedia 时，系统权限弹窗如果被用户点“拒绝”，后续再调就不会再弹窗，必须去「设置 → Safari → 相机」手动开启。建议加一层兜底提示：
if (!navigator.mediaDevices?.getUserMedia) {
alert('当前浏览器不支持摄像头，请换 Chrome 或 Safari');
}
二维码识别不是“加个库就能跑”，关键在视频流控制、帧处理节奏和权限生命周期管理。最容易被忽略的是：没限制帧率导致手机发热降频，或者忘了关 track 导致后台持续占用摄像头。
