uni-app 使用live-pusher或摄像头时横屏显示问题，ios手机上画面多旋转90度与屏幕方向不一致

在使用 uni-app 开发时，如果你在 iOS 设备上使用 live-pusher 或摄像头时遇到横屏显示问题，导致画面旋转了 90 度与屏幕方向不一致，这通常是由于 iOS 设备的屏幕方向处理机制与 Android 设备不同导致的。以下是一些可能的解决方案：

1. 检查屏幕方向设置

确保你的应用支持横屏模式，并且在 pages.json 中正确配置了屏幕方向。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "pageOrientation": "auto" // 或者 "landscape" 强制横屏
      }
    }
  ]
}

2. 使用 orientation 事件监听屏幕方向

你可以通过监听屏幕方向变化来动态调整 live-pusher 的方向。例如：

onLoad() {
  uni.onWindowResize((res) => {
    const orientation = res.size.windowWidth > res.size.windowHeight ? 'landscape' : 'portrait';
    this.adjustLivePusherOrientation(orientation);
  });
},

methods: {
  adjustLivePusherOrientation(orientation) {
    if (orientation === 'landscape') {
      // 横屏时调整 live-pusher 的方向
      this.livePusherContext.setOrientation({
        mode: 'fixedLandscape'
      });
    } else {
      // 竖屏时调整 live-pusher 的方向
      this.livePusherContext.setOrientation({
        mode: 'fixedPortrait'
      });
    }
  }
}

3. 使用 live-pusher 的 orientation 属性

live-pusher 组件提供了 orientation 属性，可以手动设置推流方向。你可以根据屏幕方向动态设置该属性：

<live-pusher :orientation="orientation"></live-pusher>

data() {
  return {
    orientation: 'vertical'
  };
},

methods: {
  updateOrientation() {
    const width = uni.getSystemInfoSync().windowWidth;
    const height = uni.getSystemInfoSync().windowHeight;
    this.orientation = width > height ? 'horizontal' : 'vertical';
  }
}

4. 使用 CSS 旋转画面

如果以上方法无法解决问题，你可以尝试使用 CSS 旋转画面来手动调整方向。例如：

.live-pusher-container {
  transform: rotate(90deg);
  transform-origin: center center;
}