HTML视频录制：移动端宽高比设置技巧

在移动端实现HTML视频录制的精准宽高比（如9:16竖屏）远非设置`aspectRatio`那么简单——该属性在Chrome、Safari等主流浏览器中仅为软性建议，常被忽略；真正可靠的做法是摒弃依赖，转而通过精细设定`width`/`height`范围约束引导硬件选择理想分辨率，结合设备方向动态适配、调用后实时校验`getSettings()`结果，并在不匹配时用Canvas进行裁剪或填充兜底；唯有将声明式约束、运行时检测与客户端视觉补偿三者协同，才能跨越安卓与iOS碎片化生态，稳定交付符合预期的视频比例体验。

在移动端浏览器中，MediaTrackConstraints.aspectRatio 常被忽略或不生效，因其仅为建议性约束；实际需结合 width/height 范围限定、设备方向适配及结果校验，才能可靠实现目标宽高比（如 9:16 竖屏）。

在移动端浏览器中，MediaTrackConstraints.aspectRatio 常被忽略或不生效，因其仅为建议性约束；实际需结合 width/height 范围限定、设备方向适配及结果校验，才能可靠实现目标宽高比（如 9:16 竖屏）。

Web 应用中通过 navigator.mediaDevices.getUserMedia() 设置视频录制宽高比时，开发者常期望使用 aspectRatio: 9 / 16 直接锁定竖屏比例。然而，该属性在绝大多数主流移动浏览器（Chrome for Android、Safari iOS、Samsung Internet）中均不被强制执行——它仅作为底层摄像头硬件的“建议值”，而移动设备普遍受限于固有传感器分辨率、驱动层裁剪逻辑及系统媒体栈优化策略，无法动态缩放或重采样输出帧以满足任意宽高比。

✅ 正确做法：用 width 和 height 范围替代 aspectRatio

由于 aspectRatio 在移动端不可靠，推荐改用显式的分辨率范围约束，同时确保其隐含目标比例：

const videoConstraints = {
  width:  { min: 360, ideal: 720, max: 1440 },
  height: { min: 640, ideal: 1280, max: 1920 },
  facingMode: 'user'
};

上述配置明确要求高度 ≥ 640px、宽度 ≤ 1440px，并优先匹配 720×1280（即 9:16），大幅提高获取理想分辨率的概率。注意：ideal 并非保证命中，但现代 Android 设备通常会优先选择最接近该值的原生支持分辨率（如 720p、1080p 或 1280×720 的旋转变体）。

⚠️ 关键注意事项

• 设备方向影响可用约束：竖屏（portrait）下 facingMode: 'user' 通常对应 height > width 的原生流；若用户横屏拍摄，部分设备可能自动切换为 width > height 输出，导致比例“翻转”。建议监听 window.orientation 或 screen.orientation 变化，并动态调整约束。

• 必须校验实际流尺寸：调用 getUserMedia() 后，应通过 videoTrack.getSettings() 获取真实生效的分辨率，验证是否符合预期：

  const stream = await navigator.mediaDevices.getUserMedia({ video: videoConstraints });
  const videoTrack = stream.getVideoTracks()[0];
  const settings = videoTrack.getSettings();
  console.log('Actual resolution:', settings.width, '×', settings.height);
  // 若 settings.width/settings.height !== 9/16，需触发降级处理（如 Canvas 裁剪）

• 兜底方案：前端 Canvas 裁剪与填充
  当硬件无法提供理想比例时，可在 中对原始视频帧进行中心裁剪（crop）或信封填充（letterbox），再编码或上传。例如强制输出 9:16 区域：

  function cropToPortrait(ctx, video, outputWidth = 720, outputHeight = 1280) {
    const scale = Math.min(outputWidth / video.videoWidth, outputHeight / video.videoHeight);
    const cropW = video.videoWidth * scale;
    const cropH = video.videoHeight * scale;
    const x = (outputWidth - cropW) / 2;
    const y = (outputHeight - cropH) / 2;
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
                  x, y, cropW, cropH);
  }

✅ 总结

aspectRatio 在移动端是“尽力而为”的提示，而非契约。可靠实现特定宽高比的核心策略是：

1. 使用 width/height 范围约束 + ideal 值引导硬件选择；
2. 主动检测并适配设备方向；
3. 调用后校验 getSettings() 结果；
4. 对不匹配情况实施前端视觉补偿（Canvas 裁剪/缩放）。

只有将约束声明、运行时校验与客户端处理三者结合，才能在跨平台环境中稳定交付一致的视频比例体验。

到这里，我们也就讲完了《HTML视频录制：移动端宽高比设置技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！