html mediastream api 的 aspectratio 约束在移动端浏览器（尤其是 ios safari 和部分 android 浏览器）中普遍不被支持或仅作参考，实际采集分辨率由硬件决定；需通过组合 width/height 约束、后处理裁剪与 css 适配等多层策略实现视觉与录制层面的一致宽高比。
在 Web 视频录制场景中，开发者常期望通过 MediaTrackConstraints 直接强制设备输出指定宽高比（如竖屏常用的 9:16），代码看似简洁：
const videoConstraints = {
aspectRatio: 9 / 16,
facingMode: 'user'
};但该写法在桌面 Chrome 中可能生效，而在绝大多数移动浏览器（包括 Safari、Chrome for iOS、Samsung Internet）中会被忽略——因为 aspectRatio 是一个非强制性建议约束（ideal/suggested only），而移动设备的摄像头固件通常只支持有限的原生分辨率档位（如 720×1280、1080×1920），无法动态缩放或裁剪以满足任意比例。
✅ 可靠替代方案：三重保障策略
1. 使用 width/height 范围约束（推荐首选）
明确指定目标分辨率区间，提高匹配概率。例如对 9:16 竖屏，优先尝试 360×640、720×1280、1080×1920 等常见比例：
const videoConstraints = {
width: { min: 360, ideal: 720, max: 1080 },
height: { min: 640, ideal: 1280, max: 1920 },
facingMode: 'user'
};⚠️ 注意：ideal 并非保证值，但现代 Android 设备（Chrome ≥ 90）对此响应较好；iOS Safari 则更倾向忽略 ideal，但仍会从 min–max 范围内选择最接近的原生分辨率。
2. 主动校验并降级处理
调用 getUserMedia() 后，检查实际返回流的轨道尺寸，动态调整 UI 或触发二次约束：
navigator.mediaDevices.getUserMedia({ video: videoConstraints })
.then(stream => {
const track = stream.getVideoTracks()[0];
const settings = track.getSettings();
console.log('Actual resolution:', settings.width, '×', settings.height);
// 若非预期比例（如 4:3 或 16:9），可提示用户或启用 Canvas 裁剪录制
if (settings.width && settings.height) {
const actualRatio = settings.width / settings.height;
if (Math.abs(actualRatio - 9/16) > 0.05) {
console.warn('Fallback: Actual aspect ratio differs — consider canvas cropping');
}
}
});3. 前端视觉层统一适配（CSS + Canvas）
即使采集分辨率不精确，也可通过 CSS object-fit: cover 保持画面填充与比例一致，并用
// 将 video 帧绘制到 canvas 并裁剪为严格 9:16
function drawCroppedFrame(video, canvas) {
const ctx = canvas.getContext('2d');
const targetRatio = 9 / 16;
const videoRatio = video.videoWidth / video.videoHeight;
let sx = 0, sy = 0, sWidth = video.videoWidth, sHeight = video.videoHeight;
if (videoRatio > targetRatio) {
// 视频太宽 → 水平裁剪（居中取 9:16）
sWidth = video.videoHeight * targetRatio;
sx = (video.videoWidth - sWidth) / 2;
} else {
// 视频太高 → 垂直裁剪
sHeight = video.videoWidth / targetRatio;
sy = (video.videoHeight - sHeight) / 2;
}
canvas.width = 720; // 输出宽度（按需设定）
canvas.height = 1280; // 输出高度（720×1280 = 9:16）
ctx.drawImage(video, sx, sy, sWidth, sHeight, 0, 0, 720, 1280);
}? 总结与最佳实践
- ❌ 不要依赖 aspectRatio 在移动端生效；它不是跨平台可靠约束。
- ✅ 优先使用 width/height 范围约束，并覆盖主流移动分辨率（如 360×640、720×1280、1080×1920）。
- ✅ 始终检查 track.getSettings() 获取真实采集参数，用于日志、降级或 UI 提示。
- ✅ 结合 CSS（object-fit: cover + 容器固定宽高比）与 Canvas 裁剪，确保最终呈现与录制内容符合设计比例。
- ? 特别注意：iOS Safari 对 facingMode: 'user' + 分辨率约束的兼容性较差，建议添加 deviceId 显式绑定（需先 enumerateDevices）并做好兜底逻辑。
通过约束组合 + 运行时校验 + 前端裁剪三层协同，即可在全平台稳定交付符合预期宽高比的视频录制体验。
