uni-app LivePusher IOS机器中无法全屏

开发环境	版本号	项目创建方式
HBuilderX	3.99	云端

产品分类：HTML5+

手机系统：iOS

手机系统版本号：iOS 17

手机厂商：苹果

手机机型：全部

打包方式：云端

### 示例代码：

```javascript
mui.plusReady(function () {
    plus.navigator.setStatusBarStyle('light')
    pusher = new plus.video.LivePusher('pusher', {
        mode: 'FHD',
        muted: true,
        'auto-focus': localStorage.autoFocus == 'false'? false : true,
        aspect: aspect < 0.5 ? '' : '9:16'
    })
    setTimeout(() => {
        pusher.preview()
    },1000)  
})

pusher.addEventListener('error', function(e) {  
    console.log(JSON.stringify(e.detail))  
}, false)  

ws = plus.webview.currentWebview()  
var sceneId = ws.sceneId,  
    status = ws.status  

var subpage = plus.webview.create('livetool.html', 'livetool.html', {  
    top: 0,  
    bottom: 0,  
    background: 'transparent'  
}, {  
    sceneId,  
    status  
})  
ws.append(subpage)

操作步骤：

进入页面就能看到

预期结果：

底部没有白条

实际结果：

底部有白条

bug描述：

LivePusher在ios机器中全部底部会留白条

zlyuanteng 1楼•8 天前

在 Uni-App 中使用 LivePusher 组件时，如果在 iOS 设备上无法全屏显示，可能是由于以下几个原因导致的。以下是一些可能的解决方案：

1. 检查 `LivePusher` 组件的样式

确保 LivePusher 组件的样式设置正确，特别是 width 和 height 属性。你可以尝试将 width 和 height 设置为 100%，以确保组件能够占满整个屏幕。

<live-pusher
  id="livePusher"
  mode="RTC"
  url="your_rtmp_url"
  style="width: 100%; height: 100%;"
></live-pusher>

2. 使用 `cover-view` 和 `cover-image`

在 LivePusher 组件中，某些元素（如按钮、文本等）可能无法正常显示或覆盖 LivePusher。你可以使用 cover-view 和 cover-image 组件来确保这些元素能够正确显示。

<live-pusher
  id="livePusher"
  mode="RTC"
  url="your_rtmp_url"
  style="width: 100%; height: 100%;"
>
  <cover-view style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    <!-- 在这里添加你的覆盖元素 -->
  </cover-view>
</live-pusher>

3. 检查页面布局

确保 LivePusher 组件的父容器没有设置 overflow: hidden 或其他可能影响布局的样式。你可以尝试将父容器的样式设置为 position: relative 或 position: absolute，以确保 LivePusher 能够正确显示。

<view style="position: relative; width: 100%; height: 100%;">
  <live-pusher
    id="livePusher"
    mode="RTC"
    url="your_rtmp_url"
    style="width: 100%; height: 100%;"
  ></live-pusher>
</view>

4. 使用 `uni.getSystemInfoSync` 获取屏幕尺寸

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

const systemInfo = uni.getSystemInfoSync();
const screenWidth = systemInfo.windowWidth;
const screenHeight = systemInfo.windowHeight;

this.setData({
  pusherWidth: screenWidth,
  pusherHeight: screenHeight
});

然后在 LivePusher 组件中使用动态绑定的宽高：

<live-pusher
  id="livePusher"
  mode="RTC"
  url="your_rtmp_url"
  :style="`width: ${pusherWidth}px; height: ${pusherHeight}px;`"
></live-pusher>

5. 检查 iOS 版本和 Uni-App 版本

确保你使用的 Uni-App 版本支持最新的 iOS 版本。有时，某些问题可能是由于 Uni-App 或 iOS 的兼容性问题导致的。你可以尝试更新 Uni-App 到最新版本，或者检查是否有相关的 bug 修复。

6. 使用 `uni.createLivePusherContext` 控制 `LivePusher`

如果上述方法都无法解决问题，你可以尝试使用 uni.createLivePusherContext 来手动控制 LivePusher 的显示和布局。

const livePusherContext = uni.createLivePusherContext('livePusher');
livePusherContext.start();

7. 检查 `LivePusher` 的 `mode` 属性

确保 LivePusher 的 mode 属性设置正确。不同的模式可能会影响 LivePusher 的显示效果。你可以尝试切换 mode 为 RTC 或 live，看看是否能解决问题。

<live-pusher
  id="livePusher"
  mode="RTC"
  url="your_rtmp_url"
  style="width: 100%; height: 100%;"
></live-pusher>