uni-app live-pusher横屏推流,画面出现异常

uni-app live-pusher横屏推流,画面出现异常

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.16
手机系统 Android
手机系统版本号 Android 8.0
手机厂商 华为
手机机型 所有
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="pushUrl" :muted="false" :auto-focus="true"  
aspect="aspect" :enable-camera="true" :style="{'height':h+'px','width':w+'px'}" :orientation="orientation"
zoom="false" :beauty="beautyNum" :mode="FHD" :enable-agc='true' :enable-ans='true' :whiteness="whitenessNum"
        @statechange="LiveStateChange">
    </live-pusher>

操作步骤:

  • 手机横屏推流

预期结果:

  • 画面正常

实际结果:

  • 横屏成功,但是屏幕未铺满

bug描述:

  • live-pusher横屏推流,画面16:9,自定义界面覆盖,下方出现一块灰色,画面无法覆盖屏幕

image


更多关于uni-app live-pusher横屏推流,画面出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

画面比例调一下看看是不是有用,

更多关于uni-app live-pusher横屏推流,画面出现异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已解决,上个预览页面没有销毁!重叠造成的,但是出现新的问题,横屏时画面垂直了

回复 1***@qq.com: 解决了吗

针对您描述的live-pusher横屏推流画面未铺满问题,这通常与样式设置和推流参数有关。结合您的代码和场景,核心原因在于aspect属性与容器尺寸的匹配。

直接原因分析:

  1. aspect属性设置:您代码中:aspect="aspect"绑定的变量值很可能是关键。该属性决定了推流画面的宽高比(如’3:4’或’9:16’)。横屏时,若此值仍设置为竖屏比例(如’9:16’),会导致画面比例与屏幕横屏比例不匹配,从而无法铺满,出现灰色区域。
  2. 容器尺寸计算:您通过:style动态设置的宽高(wh)可能未正确适配横屏后的屏幕尺寸。在横屏时,需要交换或重新计算宽高值,确保容器与屏幕横屏比例一致。

解决方案:

  1. 调整aspect:横屏推流时,应将aspect设置为横屏比例,例如'16:9''4:3'(根据您的推流需求)。您需要在横屏事件中动态更新该变量。
  2. 重新计算容器尺寸:监听设备横竖屏切换(如使用uni.onWindowResize),在横屏时重新计算并设置wh的值,确保容器宽高与横屏屏幕匹配。通常横屏下w应大于h
  3. 检查orientation属性:您已设置:orientation="orientation",请确认该变量在横屏时正确设置为'horizontal'。这会影响推流数据的方向,但容器样式仍需独立处理。
  4. 样式覆盖:确保live-pusher的父容器没有额外的内边距(padding)或外边距(margin),且未设置overflow: hidden以外的限制性样式。

代码调整示例:

// 在横屏切换事件中
onScreenChange() {
    // 横屏时调整aspect为16:9
    this.aspect = '16:9';
    // 重新计算宽高,示例为横屏全屏
    const systemInfo = uni.getSystemInfoSync();
    this.w = systemInfo.windowWidth; // 横屏后宽度值较大
    this.h = systemInfo.windowHeight; // 高度值较小
    // 确保orientation变量同步
    this.orientation = 'horizontal';
}
回到顶部