MediaTrackConstraints的aspectRatio属性在移动浏览器失效问题咨询

这是移动浏览器的常见硬件限制，并非你的代码实现问题。

移动设备的前置/后置摄像头硬件通常只支持固定的几种宽高比（比如4:3、16:9），aspectRatio约束本质是请求摄像头输出对应比例的视频，但如果硬件本身不支持该比例，浏览器会直接忽略这个约束，返回摄像头支持的默认比例。桌面端Chrome能生效，是因为桌面摄像头的硬件支持更灵活，或者浏览器在后台做了实时比例转换。

替代方案 #

1. 选择摄像头支持的最接近目标比例的分辨率

通过API获取摄像头支持的所有分辨率，筛选出与目标宽高比最匹配的参数，用width和height约束替代aspectRatio，确保硬件输出的视频比例尽可能贴合需求：

async function getBestVideoConstraints(targetAspectRatio) {
  // 获取摄像头设备
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevice = devices.find(dev => dev.kind === 'videoinput');
  if (!videoDevice) throw new Error('未检测到摄像头');

  // 临时获取流，拿到摄像头的能力参数
  const tempStream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: 'user' }
  });
  const videoTrack = tempStream.getVideoTracks()[0];
  const capabilities = videoTrack.getCapabilities();
  const widthOptions = capabilities.width.values;
  const heightOptions = capabilities.height.values;

  // 筛选最接近目标比例的分辨率
  let bestMatch = null;
  let smallestRatioDiff = Infinity;

  for (const width of widthOptions) {
    const idealHeight = Math.round(width / targetAspectRatio);
    // 找最接近idealHeight的支持高度
    const matchedHeight = heightOptions.reduce((prev, curr) => {
      return Math.abs(curr - idealHeight) < Math.abs(prev - idealHeight) ? curr : prev;
    });
    const actualRatio = width / matchedHeight;
    const ratioDiff = Math.abs(actualRatio - targetAspectRatio);

    if (ratioDiff < smallestRatioDiff) {
      smallestRatioDiff = ratioDiff;
      bestMatch = { width, height: matchedHeight };
    }
  }

  videoTrack.stop();
  return { ...bestMatch, facingMode: 'user' };
}

// 使用示例
const targetRatio = 9 / 16;
const videoConstraints = await getBestVideoConstraints(targetRatio);
const stream = await navigator.mediaDevices.getUserMedia({ video: videoConstraints });

2. 用CSS强制视频元素的显示比例

如果不需要录制的视频文件严格符合比例，只是前端展示时要保持视觉比例，可以通过CSS容器配合object-fit实现，让视频在容器内适配目标比例，多余部分裁剪或显示黑边：

/* 9:16竖屏比例的容器 */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 177.78%; /* 16/9 * 100% = 177.78%，对应宽9高16的比例 */
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪多余区域，保持比例填充容器 */
  /* object-fit: contain; 显示完整视频，容器空余部分留黑边 */
}

方案选择 #

• 若需要录制的视频文件本身接近目标比例，优先选方案1；
• 若只需要前端展示符合比例，不在意录制文件的原始比例，方案2更简单直接。

内容的提问来源于stack exchange，提问作者Or Bachar