uniapp live-pusher不跟着横屏拍照是什么原因

在uniapp中使用live-pusher组件时，发现横屏拍摄时画面不会跟随屏幕旋转，始终保持竖屏显示。尝试设置orientation为landscape也没有效果。请问这是什么原因导致的？需要如何配置才能让live-pusher正常横屏推流？

phonegap100 1楼

uniapp中live-pusher横屏拍照不跟随，可能是未正确设置方向参数。检查orientation属性，确保设为"landscape"。同时确认页面配置支持横屏，并检查设备权限与相机兼容性。

sinazl 2楼

在Uniapp中，live-pusher组件不跟随横屏拍照（横屏推流）通常由以下原因导致，以及对应的解决方法：

页面方向锁定
- 页面可能被锁定为竖屏，导致live-pusher无法自动横屏。
- 解决：在 pages.json 中配置页面支持横屏：
```
{
  "path": "pages/live/live",
  "style": {
    "pageOrientation": "auto" // 允许自动横竖屏
  }
}
```
组件属性设置问题
- live-pusher 的 aspect 属性需设置为横屏比例（如 "9:16" 对应竖屏，"16:9" 对应横屏）。
- 解决：调整 aspect 为横屏比例：
```
<live-pusher aspect="16:9" ... />
```

设备方向未监听

需要通过JS监听设备方向变化，动态调整推流方向。

解决示例：

onLoad() {
  // 监听横竖屏切换
  uni.onWindowResize((res) => {
    if (res.size.windowWidth > res.size.windowHeight) {
      // 横屏时调整推流参数
      this.aspect = '16:9';
    } else {
      this.aspect = '9:16';
    }
  });
}

推流参数配置
- 确保推流分辨率与横屏匹配，例如设置 video-width 和 video-height 为横屏分辨率（如 1280x720）。
系统权限或兼容性
- 部分安卓设备需开启“自动旋转”功能，或检查摄像头横屏权限。

完整示例代码：

<template>
  <view>
    <live-pusher
      :aspect="aspect"
      url="rtmp://example.com/live/stream"
      mode="SD"
      :video-width="1280"
      :video-height="720"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      aspect: '9:16'
    };
  },
  onLoad() {
    uni.onWindowResize((res) => {
      this.aspect = res.size.windowWidth > res.size.windowHeight ? '16:9' : '9:16';
    });
  }
};
</script>