live-pusher 组件的时候在uni-app中设置css长宽以后画面无法充满屏幕并且画面会向左侧偏移

live-pusher 组件的时候在uni-app中设置css长宽以后画面无法充满屏幕并且画面会向左侧偏移

操作步骤：

id="livePusher"  
ref="livePusher"  
class="live-pusher"  
style="background: #007aff!important;"  
aspect="3:2"  
mode="FHD"  
orientation="horizontal"  
min-bitrate="1000"  
auto-focus="true"  
:muted="false"  
:enable-camera="true"  
:zoom="false"  
@statechange="liveStatechange"  
@netstatus="liveNetstatus"  
@error="liveError"

预期结果：

摄像头区域能正常充满区域

实际结果：

摄像头区域能无法正常充满区域

bug描述：

使用 live-pusher 组件的时候,设置css长宽以后画面无法充满屏幕，并且画面会向左侧便宜

图片

image image image

项目信息

项目信息 描述
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win11
HBuilderX 正式
HBuilderX版本 4.56
手机系统 iOS
手机系统版本 iOS 18
手机厂商 苹果
手机机型 iphone14 pro
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于live-pusher 组件的时候在uni-app中设置css长宽以后画面无法充满屏幕并且画面会向左侧偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于live-pusher 组件的时候在uni-app中设置css长宽以后画面无法充满屏幕并且画面会向左侧偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的 live-pusher 组件适配问题。主要原因是设置的 aspect 比例与容器尺寸不匹配，导致画面裁剪和偏移。

解决方案：

  1. 移除 aspect 属性：aspect=“3:2” 固定了宽高比，与你的容器尺寸不匹配会导致画面裁剪。建议移除或调整为与容器一致的比例。

  2. 使用动态样式：通过计算容器宽高来设置 live-pusher 的尺寸：

.live-pusher {
  width: 100vw;
  height: 75vw; /* 或其他适配比例 */
  object-fit: cover;
}

  1. 检查父容器约束：确保父容器没有额外的 padding、margin 或定位样式影响布局。

  2. 使用 mode 属性调整：mode=“FHD” 可能不适用于所有设备，可以尝试改为 mode=“RTC” 或移除该属性。

  3. 添加 transform 修正偏移：

.live-pusher {
  transform: translateX(0);
}
回到顶部