React-QR-Reader 中 videoStyle 设置的宽高常无法真实约束视频流尺寸，导致扫码区域与实际摄像头输出比例失配，尤其在移动端易出现拉伸、裁剪或黑边；根本原因在于浏览器对 <video> 元素的固有行为及媒体流分辨率优先级高于 CSS 样式。
react-qr-reader 中 `videostyle` 设置的宽高常无法真实约束视频流尺寸，导致扫码区域与实际摄像头输出比例失配，尤其在移动端易出现拉伸、裁剪或黑边；根本原因在于浏览器对 `
在使用 react-qr-reader（注意：当前主流维护版本为 @blackbox-vision/react-qr-reader 或社区推荐替代方案 react-webcam + jsQR）时，直接通过 videoStyle={{ width: 300, height: 300 }} 强制设置 <video> 尺寸无法改变原始媒体流的宽高比，仅会拉伸/压缩画面，破坏 QR 码识别精度，甚至导致扫描失败。
✅ 正确做法是 “容器约束 + object-fit 控制缩放” + “constraints 指定理想分辨率”：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
<QrReader
scanDelay={500}
onResult={handleScan}
ViewFinder={scanOverlay}
containerStyle={{
width: 300,
height: 300,
position: 'relative',
overflow: 'hidden',
}}
videoStyle={{
width: '100%',
height: '100%',
objectFit: 'cover', // 关键！保持宽高比并填满容器
border: '4px solid',
borderColor: qrData.length === 0 ? 'red' : 'green',
}}
constraints={{
facingMode: 'environment',
width: { ideal: 1280 }, // 显式指定分辨率偏好（可选）
height: { ideal: 720 },
}}
/>? 关键要点说明：
- objectFit: 'cover' 是核心：确保视频流按原始宽高比缩放并覆盖整个容器，避免变形；
- 容器（containerStyle）应设为明确宽高+overflow: hidden，防止溢出；
- videoStyle.width/height 改用 '100%'，交由 CSS 布局控制，而非固定像素值；
- constraints 中添加 width/height 理想值，可提升获取合适分辨率的概率（但不强制，取决于设备支持）；
- ⚠️ 注意：旧版 react-qr-reader@2.x 已停止维护，存在兼容性问题；建议升级至现代替代方案，例如：
npm uninstall react-qr-reader npm install @blackbox-vision/react-qr-reader # 或更轻量可控的组合： npm install react-webcam jsqr
最后，务必在真机（尤其 iOS Safari）测试——部分浏览器对 facingMode: 'environment' 和 object-fit 的支持存在差异，必要时可增加 transform: scaleX(-1) 修复镜像翻转问题。稳定识别的前提，永远是清晰、无畸变、比例正确的视频输入。
