在移动端浏览器中，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 变化，并动态调整约束。

  

  Article To Html

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

  下载

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

• 必须校验实际流尺寸：调用 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 裁剪与填充
  当硬件无法提供理想比例时，可在 <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 裁剪/缩放）。

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