uniapp使用live-pusher时画面很小是怎么回事？

我在uniapp中使用live-pusher组件进行直播推流时，发现画面显示非常小，无法正常展示。请问这是什么原因导致的？该怎么调整才能让画面正常显示？

2 回复

可能是容器尺寸设置问题。检查live-pusher组件的宽高样式，确保设置足够大，如width: 100vw; height: 100vh。也可能是层级覆盖，检查z-index。


在UniApp中使用live-pusher组件时画面很小，通常由以下原因导致：

  1. 组件尺寸设置问题
    live-pusher默认宽高较小，需通过CSS或内联样式明确设置宽高，例如：

    <live-pusher style="width: 100vw; height: 100vh;"></live-pusher>

  2. 推流画面比例与组件不匹配
    若推流分辨率（如16:9）与组件比例不一致，可能导致画面拉伸或留黑边。建议：

    • 通过aspect属性调整比例（如3:4或9:16）。
    • 设置min-bitrate和max-bitrate优化清晰度。

  3. 设备兼容性问题
    部分安卓设备需动态设置分辨率，可在onReady事件中调整参数：

    onReady() {
  this.context = uni.createLivePusherContext();
  this.context.setOptions({
    videoWidth: 720,  // 根据需求调整
    videoHeight: 1280
  });
}

  4. 层级覆盖问题
    检查是否被其他元素（如弹窗、广告）遮挡，通过调整z-index解决。

解决方案步骤：

  1. 检查组件样式，确保宽高占满屏幕。
  2. 根据设备屏幕比例设置aspect属性。
  3. 在真机测试（部分问题模拟器无法复现）。

若仍无效，可尝试重启应用或更新HBuilderX版本。

回到顶部