如何在移动浏览器中可靠设置视频录制的宽高比

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）并做好兜底逻辑。

通过约束组合 + 运行时校验 + 前端裁剪三层协同，即可在全平台稳定交付符合预期宽高比的视频录制体验。