HTML表单无法原生扫码，需用JS获取视频流→截图→解码→填入字段；html5-qrcode是轻量纯前端方案，须HTTPS/localhost运行，注意DOM事件同步与移动端适配。
HTML 表单里没法直接调用摄像头扫二维码
浏览器原生的 <input type="file"> 不支持“扫码即填”，它只能选图片或调用相机拍照，但拍完还得手动上传、再用 JS 解码——这中间没有“对准就填”的自动链路。
真正能扫码输入的方案，本质是：用 JS 拿到视频流 → 实时帧截图 → 交给解码库识别 → 把结果塞进表单字段。不是 HTML 自带能力，而是组合前端技术栈实现的。
- 常见错误现象：
TypeError: navigator.mediaDevices.getUserMedia is not defined（老版 Safari 或禁用 HTTPS 的页面会报） - 必须在 HTTPS 环境或
localhost下运行，否则getUserMedia()直接拒绝 -
<input type="file" accept="image/*">只能触发相册/拍照，不能实时识别，别指望它“一扫就填”
用 html5-qrcode 快速接入扫码功能
这是目前最轻量、兼容性较好（支持 Chrome/Firefox/Edge/Safari 14.5+）、不依赖后端的纯前端方案。它封装了媒体流 + 解码逻辑，你只管挂载和回调。
- 引入方式：
<script src="https://unpkg.com/html5-qrcode@2.3.8/minified/html5-qrcode.min.js"></script> - 页面上放一个容器（不能是
<input>，得是<div id="reader"></div>），再写几行 JS 绑定到表单字段 - 关键参数：
fps: 10（帧率太高耗电卡顿，10足够）、qrbox: { width: 250, height: 250 }（限定扫描框大小，避免误扫背景） - 扫码成功后，别直接
form.submit()，先校验内容格式（比如是否为手机号、订单号），再填入document.getElementById("myInput").value = decodedText
扫码填入表单时的 DOM 同步陷阱
用户扫完码，光设 input.value 不够——很多 UI 库（如 React、Vue、Ant Design）或自定义验证逻辑依赖 input 的事件触发，单纯赋值不会触发 change 或 input 事件。
立即学习“前端免费学习笔记（深入）”；
- React 场景下，直接改
ref.current.value不会更新 state，得用setValue(...)或触发模拟事件 - 原生 JS 中，要补一手：
input.dispatchEvent(new Event('input', { bubbles: true })); - 如果表单用了
required属性，仅设 value 不会清除浏览器原生校验红框，得同时调用input.reportValidity() - 移动端键盘弹出状态扫完码，记得
input.blur()避免遮挡扫码框
扫码失败或体验差的三个硬限制
不是所有“扫不出来”都是代码问题，有些是物理或策略层面绕不开的：
- 二维码太小（建议 ≥ 120×120px 打印尺寸）、反光、过曝、倾斜 > 30°，
html5-qrcode就容易漏识别 - Safari iOS 对后台标签页的摄像头权限极严，切到其他 App 再切回来，流常中断，需监听
html5QrCode.clear()+ 重初始化 - 连续扫码场景下，不调用
html5QrCode.stop()就跳转页面，会导致下次进入黑屏或报NotAllowedError
扫码不是点按钮，它依赖光线、距离、设备性能和用户配合。把“扫不上”当成正常分支来处理，比强行优化识别率更实际。
