uni-app App端直播组件切换摄像头画面变形

uni-app App端直播组件切换摄像头画面变形

示例代码：

onLoad(options) {  
    // #ifdef APP-PLUS  
    plus.navigator.setFullscreen(true); //全屏  
    let currentWebview = this.$scope.$getAppWebview();  
    const pusher = new plus.video.LivePusher("pusher", {  
        top: '0',  
        left: '0',  
        width: '100%',  
        height: '100%',  
        muted: true  
    });  
    currentWebview.append(pusher);  
    const right = new plus.nativeObj.View('', {  
        dock: 'right',  
        height: '100%',  
        width: '15%',  
        position: 'dock',  
        backgroundColor: "#000000"  
    });  
    currentWebview.append(right);  
    right.interceptTouchEvent(true);  
    right.addEventListener("click", (e) => {  
        pusher.switchCamera();  
    }, false)  
    // #endif  
}

操作步骤：

  • 横屏切换画面

预期结果：

  • 屏幕正常显示

实际结果：

  • 屏幕发生变化

bug描述：

app在pages.json锁定为横屏
在页面使用 new plus.video.LivePusher 创建直播组件
点击 switchCamera 切换摄像头画面变形

设备均为横向拍摄
图1 为前摄正常，显示画面为横向
图2 切换到后摄，显示画面为竖向
图3 切换到前摄，显示画面为竖向

Image 1 Image 2 Image 3


更多关于uni-app App端直播组件切换摄像头画面变形的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app App端直播组件切换摄像头画面变形的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的摄像头切换时画面方向问题。问题根源在于不同摄像头的默认方向不同，而LivePusher组件没有自动适应。

解决方案是在切换摄像头后重新设置推流参数，强制指定画面方向：

pusher.addEventListener("statechange", (e) => {
    if (e.detail.code === 1005) { // 摄像头切换完成
        pusher.setStyles({
            aspect: '9:16' // 根据实际需求调整宽高比
        });
    }
});

或者在切换摄像头后重新初始化推流参数：

right.addEventListener("click", (e) => {
    pusher.switchCamera();
    // 延迟重置推流参数
    setTimeout(() => {
        pusher.setStyles({
            width: '100%',
            height: '100%',
            aspect: '9:16'
        });
    }, 100);
}, false)

另外，建议在创建LivePusher时显式指定方向参数：

const pusher = new plus.video.LivePusher("pusher", {
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    muted: true,
    orientation: 'horizontal' // 明确指定横屏方向
});
回到顶部