uni-app LivePusher 不能在ios下全屏底部会留白条

在使用 uni-app 开发时，如果在 iOS 设备上使用 LivePusher 组件进行全屏推流时，底部出现留白条的问题，可能是由于以下几个原因导致的。你可以尝试以下方法来解决这个问题：

1. 检查样式

确保 LivePusher 组件的样式设置正确，特别是 width 和 height 属性。你可以尝试将 LivePusher 的宽度和高度设置为 100%，并且确保其父容器也设置了正确的尺寸。

<template>
  <view class="container">
    <live-pusher
      id="livePusher"
      class="live-pusher"
      url="your_rtmp_url"
      mode="SD"
      autopush
      enable-camera
      enable-mic
      @statechange="onStateChange"
    ></live-pusher>
  </view>
</template>

<style>
.container {
  width: 100%;
  height: 100%;
}

.live-pusher {
  width: 100%;
  height: 100%;
}
</style>

2. 使用 cover-view 和 cover-image

在某些情况下，iOS 设备的全屏模式下，LivePusher 组件可能会被系统默认的控件遮挡。你可以尝试使用 cover-view 和 cover-image 来解决这个问题。

<template>
  <view class="container">
    <live-pusher
      id="livePusher"
      class="live-pusher"
      url="your_rtmp_url"
      mode="SD"
      autopush
      enable-camera
      enable-mic
      @statechange="onStateChange"
    >
      <cover-view class="cover-view">Text on top of LivePusher</cover-view>
      <cover-image class="cover-image" src="/path/to/image.png"></cover-image>
    </live-pusher>
  </view>
</template>

<style>
.container {
  width: 100%;
  height: 100%;
}

.live-pusher {
  width: 100%;
  height: 100%;
}

.cover-view {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
}

.cover-image {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
}
</style>

3. 检查 LivePusher 的 mode 属性

LivePusher 组件的 mode 属性决定了推流的宽高比。你可以尝试调整 mode 属性，例如设置为 SD、HD 或 FHD，看看是否能解决留白问题。

<live-pusher
  id="livePusher"
  class="live-pusher"
  url="your_rtmp_url"
  mode="HD" <!-- 尝试调整 mode -->
  autopush
  enable-camera
  enable-mic
  @statechange="onStateChange"
></live-pusher>

4. 检查设备的安全区域

iOS 设备的安全区域（Safe Area）可能会导致底部留白。你可以使用 CSS 的 env(safe-area-inset-bottom) 来适配安全区域。

.live-pusher {
  width: 100%;
  height: calc(100% - env(safe-area-inset-bottom));
}

5. 检查 uni-app 版本

确保你使用的是最新版本的 uni-app，因为旧版本可能存在一些已知的 bug 或兼容性问题。

6. 使用 uni.getSystemInfoSync 获取设备信息

你可以使用 uni.getSystemInfoSync 获取设备的屏幕尺寸，然后动态调整 LivePusher 的尺寸。

onLoad() {
  const systemInfo = uni.getSystemInfoSync();
  this.screenWidth = systemInfo.screenWidth;
  this.screenHeight = systemInfo.screenHeight;
}

然后在模板中使用这些值：

<live-pusher
  :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }"
  url="your_rtmp_url"
  mode="SD"
  autopush
  enable-camera
  enable-mic
  @statechange="onStateChange"
></live-pusher>

7. 检查 LivePusher 的 aspect 属性

LivePusher 组件的 aspect 属性可以调整视频的宽高比。你可以尝试调整 aspect 属性，例如设置为 3:4 或 9:16，看看是否能解决留白问题。

<live-pusher
  id="livePusher"
  class="live-pusher"
  url="your_rtmp_url"
  mode="SD"
  aspect="9:16" <!-- 尝试调整 aspect -->
  autopush
  enable-camera
  enable-mic
  @statechange="onStateChange"
></live-pusher>

8. 使用 uni.createLivePusherContext 控制 LivePusher

你可以使用 uni.createLivePusherContext 创建 LivePusher 的上下文，并通过编程方式控制 LivePusher 的尺寸和位置。

const livePusherContext = uni.createLivePusherContext('livePusher');
livePusherContext.setStyle({
  width: '100%',
  height: '100%'
});