H5调用手机摄像头预览模糊，如何提升清晰度？

Question

H5调用手机摄像头预览模糊，是移动端Web开发中的典型问题。根本原因在于：`

Answer 1

```html

一、现象层：H5摄像头预览模糊的典型表现

• 安卓微信X5内核中视频流长期卡在640×480，即使设备支持4K也无响应；
• iOS Safari预览画面边缘软化、文字边缘发虚，动态扫码时频繁失焦；
• 中低端安卓机（如Redmi Note系列）开启后置摄像头瞬间出现1–3秒拖影；
• CSS transform: scale(1.2) 后，二维码识别率下降超40%（实测数据）；
• 用户旋转手机横屏时，<video> 容器宽高比未同步重设，触发浏览器双线性插值拉伸。

二、约束层：MediaStream Constraints 的兼容性断层

不同平台对 getUserMedia() 约束的支持存在显著差异：

约束项	Chrome for Android	微信X5内核（v8.0.52）	iOS Safari 17+
width: {ideal: 1920}	✅ 支持	⚠️ 忽略，回退至默认	✅ 支持（需配合aspectRatio）
facingMode: "environment"	✅ 稳定	❌ 随机切换前后摄	✅ 仅限user/environment两级
advanced: [{focusMode: "continuous"}]	✅	❌ 报NotSupportedError	❌ 不支持advanced数组

三、渲染层：video 元素生命周期与CSS渲染管线的错位

关键事件时序错误是首帧模糊的隐性推手：

const stream = await navigator.mediaDevices.getUserMedia({ video: constraints });
const video = document.getElementById('preview');
video.srcObject = stream;

// ❌ 错误：未等待可播放状态即调用play()
video.play(); // → 可能触发黑屏/模糊首帧

// ✅ 正确链式监听
video.addEventListener('loadeddata', () => {
  console.log('原始帧已加载，此时video.videoWidth=', video.videoWidth);
});
video.addEventListener('canplay', () => {
  video.play().catch(e => console.warn('Autoplay blocked:', e));
});

四、适配层：跨平台分辨率自适应策略

我们采用“探测→协商→降级”三级适配模型：

1. 调用 navigator.mediaDevices.getSupportedConstraints() 判断基础能力；
2. 枚举设备支持的 videoCapabilities（需 Chrome 94+ / Safari 16.4+）；
3. 按优先级尝试约束组合：{ width: {ideal: 1280}, height: {ideal: 720}, aspectRatio: {ideal: 16/9} } → { width: {max: 1920} } → 最终 fallback 至 { facingMode: "environment" }；
4. 对X5内核强制注入 webkit-playsinline + playsinline 属性规避全屏劫持导致的尺寸重排。

五、视觉层：CSS与Canvas协同保真方案

当纯<video>无法满足清晰度要求时，启用离屏Canvas采样增强：

graph LR
  A[video.readyState === 'canplay'] --> B[requestAnimationFrame捕获video帧]
  B --> C[drawImage到固定尺寸canvas]
  C --> D[应用CSS image-rendering: -webkit-optimize-contrast]
  D --> E[输出为2x DPR高清预览容器]

六、实战验证：模糊根因定位Checklist

• ✅ 检查 video.videoWidth 是否等于预期分辨率（非CSS width）；
• ✅ 在 loadedmetadata 中打印 stream.getVideoTracks()[0].getSettings()；
• ✅ 使用 Chrome DevTools → Rendering → “FPS Meter” + “Paint Flashing” 观察重绘区域；
• ✅ 对iOS设备禁用 transform: scale()，改用 width/height + object-fit: cover；
• ✅ 微信环境注入 X5 内核 UA 检测：/MQQBrowser\/([0-9.]+)/.test(navigator.userAgent)。

```