iOS端getUserMedia调用后置摄像头无法获取竖屏视频怎么办？

问题描述 #

使用navigator.mediaDevices.getUserMedia获取后置摄像头视频流时，桌面端可正常获取竖屏视频并保存竖屏图片，但iOS设备上视频及保存的图片始终为横屏模式。当前使用的约束配置如下：

const constraints = {
  video: {
    facingMode: "environment",
    aspectRatio: 0.463,
    width: {
      ideal: 333.33
    },
    height: {
      ideal: 720
    }
  },
};

调整方案 #

• 强制指定竖屏方向约束：在视频配置中添加orientation: "portrait"，iOS对该属性的支持更直接，能优先匹配竖屏捕获模式；同时用标准的9/16竖屏比例替代硬编码的0.463，提升可读性和兼容性：

  const constraints = {
    video: {
      facingMode: "environment",
      orientation: "portrait",
      aspectRatio: 9/16,
      width: { ideal: 360 },
      height: { ideal: 640 }
    }
  };
  

• 手动适配视频元素显示方向：iOS摄像头捕获的视频可能携带方向元数据，但部分浏览器不会自动应用旋转，需读取轨道设置并调整视频元素的样式：

  navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
      const video = document.getElementById('your-video-element');
      video.srcObject = stream;
      
      const track = stream.getVideoTracks()[0];
      const settings = track.getSettings();
      // 根据捕获方向旋转视频元素，适配竖屏显示
      if (settings.orientation === 'landscape') {
        video.style.transform = 'rotate(90deg)';
        video.style.width = '100vh';
        video.style.height = '100vw';
      }
    });
  

• 保存图片时修正方向：通过Canvas绘制图片时，需根据摄像头的方向元数据调整绘制角度，确保输出的图片为竖屏：

  function capturePortraitImage() {
    const video = document.getElementById('your-video-element');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const track = video.srcObject.getVideoTracks()[0];
    const settings = track.getSettings();
  
    // 适配方向设置Canvas尺寸
    if (settings.orientation === 'landscape') {
      canvas.width = video.videoHeight;
      canvas.height = video.videoWidth;
      // 旋转画布并绘制视频帧
      ctx.rotate(Math.PI / 2);
      ctx.drawImage(video, 0, -canvas.height);
    } else {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      ctx.drawImage(video, 0, 0);
    }
  
    // 下载图片
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/jpeg');
    link.download = 'portrait-capture.jpg';
    link.click();
  }
  

内容的提问来源于stack exchange，提问作者Remo Bajwa