iPadOS 26添加到主屏幕后网站摄像头视频方向异常，求Workaround

问题背景 #

以下HTML5视频元素和JavaScript代码在主流现代浏览器（包括iPadOS 26的Safari浏览器）中可正常调用摄像头并显示视频：

HTML代码 #

<video id='video' autoplay muted playsinline></video>

JavaScript代码 #

(async () => {
  const stream = await navigator.mediaDevices.getUserMedia({video: true});
  const video = document.getElementById('video');
  video.srcObject = stream;
})();

但将网站通过Safari「添加到主屏幕」功能保存为独立Web App后，视频会莫名旋转90度，该问题仅出现在iPadOS 26及后续版本中，此前版本无此异常。

可行临时解决方案 #

方案1：通过CSS修正旋转 #

先检测当前是否处于主屏幕Web App环境，若为真则对视频元素应用反向旋转：

// 检测是否是主屏幕Web App
function isStandalone() {
  return window.matchMedia('(display-mode: standalone)').matches || 
         (window.navigator.standalone && window.navigator.standalone === true);
}

(async () => {
  const stream = await navigator.mediaDevices.getUserMedia({video: true});
  const video = document.getElementById('video');
  video.srcObject = stream;

  // 针对iPadOS 26主屏幕Web App修正旋转
  if (isStandalone() && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
    const osVersion = navigator.userAgent.match(/OS (\d+)_/);
    if (osVersion && parseInt(osVersion[1], 10) >= 26) {
      video.style.transform = 'rotate(-90deg)';
      // 避免变形：根据视频宽高调整元素尺寸
      video.style.width = '100vh';
      video.style.height = '100vw';
      video.style.objectFit = 'cover';
    }
  }
})();

方案2：通过媒体轨道约束调整方向 #

尝试在getUserMedia中指定视频方向约束，强制锁定正确角度，若约束不生效则 fallback 到CSS修正：

(async () => {
  const constraints = {
    video: {
      facingMode: 'user',
      orientation: 'natural'
    }
  };

  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    const video = document.getElementById('video');
    video.srcObject = stream;

    const track = stream.getVideoTracks()[0];
    const settings = track.getSettings();
    
    // 检测轨道实际方向，异常则应用CSS修正
    if (isStandalone() && settings.orientation !== 'natural') {
      video.style.transform = 'rotate(-90deg)';
      video.style.width = '100vh';
      video.style.height = '100vw';
      video.style.objectFit = 'cover';
    }
  } catch (err) {
    console.error('获取媒体流失败:', err);
    // 回退到基础方案
    const stream = await navigator.mediaDevices.getUserMedia({video: true});
    const video = document.getElementById('video');
    video.srcObject = stream;
  }
})();

说明 #

上述方案均为临时修复，建议同时向Apple官方反馈该Bug，待系统更新后即可移除相关兼容代码。

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