applyConstraints未生效主因是设备不支持所设约束，需先用getCapabilities()查能力、getSettings()看当前值，并await捕获OverconstrainedError；iOS Safari等平台对分辨率约束支持极弱，应优先在getUserMedia阶段设置。

applyConstraints 调用后没生效？先确认 track 是否支持约束

直接调用 applyConstraints 却发现分辨率没变，大概率是摄像头根本不支持你传的 { width: { ideal: 1280 }, height: { ideal: 720 } }。浏览器不会报错，但会静默忽略不支持的约束。

正确做法是：先用 getCapabilities() 查设备真实能力，再用 getSettings() 看当前实际生效值：

const videoTrack = stream.getVideoTracks()[0];
console.log('capabilities:', videoTrack.getCapabilities());
console.log('current settings:', videoTrack.getSettings());

• 如果 getCapabilities().width 是空对象或 undefined，说明该设备不报告分辨率能力（常见于部分 macOS Safari 或老旧 USB 摄像头）
• ideal 不保证生效，exact 才强制，但失败会抛 OverconstrainedError
• 某些 Android WebView 或 Electron 旧版 Chromium 中，applyConstraints 对已激活 track 的分辨率调整可能完全被忽略

动态切换分辨率时必须 await applyConstraints() 并捕获错误

很多人写成 track.applyConstraints({...}) 就以为完事了，其实它返回 Promise，且失败不会 throw，而是 reject —— 不 await + catch 就等于“调了但不知道成没成功”。

典型错误写法：track.applyConstraints({ width: 640 }); // 忘记 await，后续立刻 getSettings() 还是旧值

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• 必须 await track.applyConstraints(constraints)，否则后续读取 getSettings() 拿到的仍是旧配置
• 捕获 OverconstrainedError：说明约束冲突或硬件不支持，比如同时设 width: { exact: 2560 } 和 frameRate: { max: 15 }，但设备只支持 30fps@2560
• 某些浏览器（如 Chrome 115+）在后台标签页中会降级分辨率，即使约束 applied 成功，实际输出也可能被自动缩放

移动端 iOS Safari 的硬限制：无法通过 applyConstraints 设置高于 1280×720 的分辨率

iOS Safari（包括 WKWebView）对 MediaStreamTrack 的约束支持极弱。即使 getCapabilities() 返回了 { width: { max: 1920 } }，applyConstraints({ width: 1920 }) 也大概率静默失败或回落到 1280×720。

• 实测 iOS 17.5 中，所有前置/后置摄像头通过 getUserMedia 获取的 track，applyConstraints 仅对 frameRate 和 focusMode 有效，分辨率类约束基本无效
• 想获得更高清画面，唯一可靠方式是在 getUserMedia 阶段就传入分辨率约束：{ video: { width: 1920, height: 1080 } }
• 注意：iOS 上 getUserMedia 的约束同样受制于页面是否在前台、是否触发了用户手势（如 click）、以及是否启用了「相机高清模式」系统设置

别忽略 track.readyState 和 ended 状态导致的 applyConstraints 失败

一个常被忽视的坑：track 可能已 ended（比如用户手动关闭摄像头、系统休眠唤醒后设备断连），此时调用 applyConstraints 会立即 reject 并报错 InvalidStateError。

• 每次调用前检查：if (track.readyState !== 'live' || track.ended) return;
• 监听 track.onended 做清理，避免在已结束 track 上反复尝试约束
• Chrome 120+ 中，若 track 因权限被拒或设备被其他进程占用而处于 readyState === 'ended'，applyConstraints 会直接失败，不给重试机会

实际生效的分辨率最终取决于硬件能力、系统策略、浏览器实现和页面生命周期状态——不是所有约束都能被兑现，也不是所有平台都给你同样的控制权。