HTML5 MediaStreamTrack.applyConstraints()无法直接控制物理焦距，但可通过focusMode和focusDistance等约束间接实现对焦；需先用getCapabilities()检测支持性，再设focusMode为"manual"并设置合法focusDistance值，注意兼容性与降级处理。
HTML5 中的 MediaStreamTrack.applyConstraints() 无法直接控制摄像头“焦距”（focal length），因为浏览器媒体 API 并不暴露物理焦距参数。但你可以通过调整 focusMode、focusDistance（部分设备支持）或利用 torch、exposureCompensation 等辅助属性间接影响画面清晰度与景深表现，从而模拟“调焦”效果。
确认设备是否支持对焦约束
不是所有摄像头都支持对焦控制，尤其是网页端受限于操作系统、驱动和浏览器权限。需先检查轨道能力：
- 调用
track.getCapabilities()查看返回对象中是否有focusMode、focusDistance、focusRange等字段 - 常见支持 focusMode 的值包括：
"manual"、"auto"、"continuous"（注意：Chrome 仅在部分 Android 设备上支持"continuous"） - 若
getCapabilities()不含这些字段，说明当前设备/浏览器不支持软件对焦
设置 focusMode 实现基础对焦控制
将对焦模式设为 "manual" 后，才能进一步用 focusDistance 指定焦点位置（单位：米）：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
const track = stream.getVideoTracks()[0];
const capabilities = track.getCapabilities();
if (capabilities.focusMode && capabilities.focusDistance) {
const constraints = {
focusMode: 'manual',
focusDistance: 0.5 // 对焦在约 50cm 处
};
try {
await track.applyConstraints(constraints);
} catch (err) {
console.warn('应用对焦约束失败:', err);
}
}
动态调整 focusDistance 的注意事项
focusDistance 是一个浮点数，范围通常为 0.1（10cm）到 10.0（10m），但实际可用区间取决于硬件能力：
- 务必先读取
capabilities.focusDistance获取min/max值，避免越界导致OverconstrainedError - 某些设备仅支持离散值（如
[0.2, 0.5, 1.0, 2.0]），需用getSettings().focusDistance验证生效值 - 频繁调用
applyConstraints可能触发延迟或失败，建议加防抖或等待前一次 Promise 完成
兼容性与降级方案
目前仅 Chromium 内核（Chrome、Edge）在 Android 和部分桌面 Linux 设备上较稳定支持对焦约束；iOS Safari 完全不支持 focusMode 和 focusDistance：
- 始终用
try/catch包裹applyConstraints，捕获NotSupportedError或OverconstrainedError - 可结合
track.getSettings()判断当前是否已启用手动对焦，并提供 UI 提示（如“此设备不支持手动调焦”） - 作为视觉替代，可使用 CSS
filter: blur()模拟虚焦，或通过 Canvas 分析边缘锐度 + 提示用户手动靠近/远离
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
