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,自定义界面覆盖,下方出现一块灰色,画面无法覆盖屏幕

更多关于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属性与容器尺寸的匹配。
直接原因分析:
aspect属性设置:您代码中:aspect="aspect"绑定的变量值很可能是关键。该属性决定了推流画面的宽高比(如’3:4’或’9:16’)。横屏时,若此值仍设置为竖屏比例(如’9:16’),会导致画面比例与屏幕横屏比例不匹配,从而无法铺满,出现灰色区域。- 容器尺寸计算:您通过
:style动态设置的宽高(w和h)可能未正确适配横屏后的屏幕尺寸。在横屏时,需要交换或重新计算宽高值,确保容器与屏幕横屏比例一致。
解决方案:
- 调整
aspect值:横屏推流时,应将aspect设置为横屏比例,例如'16:9'或'4:3'(根据您的推流需求)。您需要在横屏事件中动态更新该变量。 - 重新计算容器尺寸:监听设备横竖屏切换(如使用
uni.onWindowResize),在横屏时重新计算并设置w和h的值,确保容器宽高与横屏屏幕匹配。通常横屏下w应大于h。 - 检查
orientation属性:您已设置:orientation="orientation",请确认该变量在横屏时正确设置为'horizontal'。这会影响推流数据的方向,但容器样式仍需独立处理。 - 样式覆盖:确保
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';
}

