Html5-QRCode是省事、兼容性好、识别率够用的方案；jsQR仅解码，需额外处理视频流、权限、降级等数十行胶水代码，移动端易黑屏卡死且无文件上传fallback。
直接用 html5-qrcode 库是最省事、兼容性最好、识别率也够用的方案，不用自己折腾 getUserMedia + canvas + jsQR 这套组合。
为什么不能直接用 jsQR 自己写？
因为 jsQR 只负责解码，不处理视频流获取、帧率控制、摄像头切换、权限请求、错误降级这些实际运行中必然遇到的问题。你得额外写几十行胶水代码来协调 video、canvas、requestAnimationFrame，而且移动端容易黑屏、卡死、报 NotAllowedError。
-
jsQR输入必须是Uint8ClampedArray图像数据，不是直接喂个video元素就能跑 - 每帧手动
ctx.drawImage(video, ...)+ctx.getImageData()，性能差、易丢帧 - 没有自动 fallback 到文件上传模式，用户没摄像头时就彻底不可用
Html5QrcodeScanner 初始化失败的三个高频原因
报错常见于 Failed to execute 'getUserMedia' on 'MediaDevices' 或页面空白无提示，本质是浏览器拦截了未授权/非安全上下文的调用。
- 开发阶段没走
https://或localhost：Chrome、Edge 等现代浏览器强制要求安全上下文才能启用摄像头，http://127.0.0.1:8080可以，但http://192.168.x.x:8080不行 - 初始化时机太早：在
DOMContentLoaded之前就执行render()，此时 DOM 容器还没挂载，会静默失败 - 容器元素
id写错或重复：比如 HTML 里是<div id="qr-reader"></div>，但 JS 里传了"reader"，html5-qrcode不报错也不提示，直接不渲染
qrbox 参数到底怎么设才有效？
qrbox 控制的是扫描框大小，但它不是 CSS 宽高，而是影响实际参与解码的图像区域尺寸，值过小会漏扫，过大则拖慢识别速度。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 设为数字（如
qrbox: 250）表示正方形扫描框，宽高都是 250px，适用于大多数手机竖屏场景 - 设为对象（如
qrbox: {width: 300, height: 200}）可自定义长宽比，适合横屏扫码或固定设备摆放 - 如果容器 div 的 CSS 尺寸（如
style="width: 500px; height: 400px"）小于qrbox值，扫描框会被裁剪，但解码区域仍按设定值截取——可能导致画面外区域被强行拉伸采样，识别率下降
扫码成功后如何防止重复触发？
onScanSuccess 回调默认每帧都可能触发，同一个二维码在画面里停留几秒，就会连续调用多次，业务逻辑（比如跳转、提交表单）很容易出错。
- 最简方案：用一个变量缓存上一次结果，只在
decodedText !== lastResult时执行后续动作 - 更稳妥做法：扫码成功后立刻调用
html5QrcodeScanner.clear()主动停止扫描，再弹窗或跳转；需要再次扫码时重新render() - 注意不要在回调里直接调
clear()后立刻render()，否则会形成“扫一下、停一下、再扫一下”的抖动行为
真正难的不是让二维码动起来，而是处理那些“看起来正常但就是扫不出”的边缘情况：低对比度贴纸、反光屏幕、远距离模糊、安卓 WebView 权限白名单缺失……这些没法靠改一两个参数解决，得结合日志、真机测试和用户反馈反复调。
