input标签打开相机录像时无法自动对焦

Question

使用 `<input type="file" />` 调用手机相机录像时，部分 Android 设备（尤其是中低端机型）存在无法自动对焦的问题。表现为预览画面模糊且不触发对焦动作，导致录制视频清晰度差。该问题源于系统相机应用未正确启用连续对焦（Continuous Auto-Focus）模式，或浏览器对媒体捕获接口的兼容性不足。目前尚无统一 Web API 可通过 input 标签直接控制对焦行为，限制了在移动端的拍摄质量控制能力。

Answer 1

一、问题背景与现象分析

在移动端Web开发中，使用 <input type="file" accept="video/*" capture="environment"> 调用系统相机进行录像是一种常见做法。然而，在部分Android设备（尤其是中低端机型）上，用户反馈录制视频时画面模糊，且预览阶段无法触发自动对焦（Auto-Focus, AF），导致成片清晰度差。

该问题的核心表现为：

• 打开相机后，画面长时间处于失焦状态；
• 轻触屏幕无法触发局部对焦（Tap-to-Focus）；
• 即使环境光线充足，系统相机应用也未启用连续对焦（Continuous Auto-Focus, CAF）模式；
• 不同品牌或型号的Android设备表现不一致，说明存在兼容性差异。

二、技术根源剖析

通过对多个厂商设备（如小米、OPPO、三星、华为低端机）的实际测试和日志分析，发现以下几类根本原因：

原因分类	具体描述	影响范围
系统相机实现差异	部分OEM厂商定制的相机应用未默认开启CAF模式	中低端Android 8–11设备
浏览器媒体接口兼容性	WebView或Chrome版本较低时，getUserMedia() 配置无法传递对焦相关约束	Android 4.4–7.x 及旧版PWA环境
<input> 标签能力限制	HTML标准未定义如何通过该标签控制摄像头参数（如focusMode）	所有基于此方式调起相机的场景
权限与硬件支持缺失	某些设备摄像头驱动不支持软件触发对焦	极低端芯片平台（如展锐SC9832E）

三、深入技术栈层级分析

从调用链路来看，<input type="file" capture> 实际是通过Intent间接启动系统相机App，而非直接访问Camera HAL层。因此其行为完全依赖于目标设备的默认相机实现。

// 示例：通过 input 触发相机的典型HTML代码
<input 
  type="file" 
  accept="video/*" 
  capture="environment"
  id="videoInput" />

document.getElementById('videoInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    const videoURL = URL.createObjectURL(file);
    // 播放录制的视频
  }
});
    

相比之下，使用 navigator.mediaDevices.getUserMedia() 可以更精细地控制视频流参数：

navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: 'environment',
    focusMode: 'continuous'  // 尝试启用连续对焦
  }
})
.then(stream => {
  document.querySelector('video').srcObject = stream;
})
.catch(err => console.error('Error:', err));
    

四、解决方案演进路径

针对上述问题，业界逐步发展出多层次应对策略：

1. 规避方案：引导用户使用原生App或专用扫码工具替代H5页面；
2. 降级提示：检测到低版本Android时提示“建议使用后置摄像头并手动清洁镜头”；
3. 特性探测：利用 MediaTrackSupportedConstraints 判断是否支持 focusMode；
4. 强制接管采集流程：放弃 <input>，改用 getUserMedia + 自定义录制界面；
5. Service Worker缓存优化：预加载WebRTC组件提升初始化速度；
6. 结合TensorFlow.js做后期清晰度增强：适用于必须接受模糊输入的场景；
7. 上报设备指纹至后台：建立“问题设备黑名单”用于动态调整UI逻辑；
8. 封装Hybrid桥接调用：通过JSBridge调用原生Camera API实现精准控制；
9. 推动W3C标准扩展：参与MediaStream Image Capture规范讨论；
10. 构建跨设备测试矩阵：集成BrowserStack或SauceLabs进行自动化验证。

五、架构级改进示意图

为实现稳定可靠的移动端视频采集，推荐采用如下架构设计：

graph TD
            A[用户点击拍摄按钮] --> B{是否支持 getUserMedia?}
            B -- 是 --> C[调用 navigator.mediaDevices.getUserMedia]
            B -- 否 --> D[降级使用 <input type=file>]
            C --> E[设置 focusMode=continuous]
            E --> F[渲染至 <video> 元素]
            F --> G[使用 MediaRecorder 录制]
            G --> H[输出 Blob 并上传]
            D --> I[监听 change 事件获取文件]
            I --> H
            H --> J[AI清晰度评估模块]
            J --> K{清晰度达标？}
            K -- 否 --> L[提示重新拍摄或启用增强]
            K -- 是 --> M[提交至服务端]

六、未来展望与标准化趋势

随着Web Camera API的不断演进，W3C正在推进更多底层控制能力开放。例如：

• MediaSettingsRange 支持调节焦距范围；
• applyConstraints() 动态修改对焦模式；
• focusDistance 手动设定对焦距离；
• Region Of Interest (ROI) 指定对焦区域。

尽管目前仍受限于设备碎片化和浏览器支持度，但通过组合使用现代API与容错机制，已可在大多数高端及主流中端机型上实现接近原生体验的视频采集质量。