本文将介绍如何调整桌面端实时音视频(TRTC)视频画面方向。
功能介绍
在实时音视频(TRTC)场景中,视频画面旋转方向的处理直接影响用户体验。与手机直播千篇一律的竖屏体验不同,TRTC 需要兼顾横屏和竖屏两种场景,同时还要应对摄像头角度、设备旋转、StatusBar 位置等多种复杂因素。
本文详细介绍 TRTC SDK 提供的视频旋转方向控制功能,包括:
如何实现竖屏模式,例如:微信的视频通话就是一个典型的竖屏体验模式。
如何实现横屏模式,例如:多人音视频房间 App(类似小鱼易连)往往都是采用横屏模式。
平台支持
iOS | Android | Mac | Windows | Electron | HarmonyOS | 微信小程序 | Web 端 |
✓ | ✓ | ✓ | ✓ | ✓ | ✓ | × | × |
前提条件
视频旋转模式
实时音视频(TRTC)提供了多种视频旋转模式,以适应不同的业务场景需求。这些模式主要处理采集端和播放端的视频方向适配问题。桌面端通常使用横屏分辨率。
横屏模式
在使用
TRTCCloud 的 setVideoEncoderParam 接口设置视频编码参数时,将 resMode 指定为 TRTCVideoResolutionModeLandscape 即可。示例代码如下:
字段名 | 类型 | 说明 |
字段含义:视频分辨率。 特别说明:如需使用竖屏分辨率,请指定 resMode 为 Portrait,例如: 640 × 360 + Portrait = 360 × 640 。推荐取值: 手机视频通话:建议选择 360 × 640 及以下分辨率, resMode 选择 Portrait,即竖屏分辨率。 手机在线直播:建议选择 540 × 960,resMode 选择 Portrait,即竖屏分辨率。 桌面平台(Win + Mac):建议选择 640 × 360 及以上分辨率, resMode 选择 Landscape,即横屏分辨率。 | ||
int | 字段含义:目标视频码率,SDK 会按照目标码率进行编码,只有在弱网络环境下才会主动降低视频码率。 推荐取值:请参见本 TRTCVideoResolution 在各档位注释的最佳码率,也可以在此基础上适当调高。例如:TRTCVideoResolution_1280_720 对应 1200kbps 的目标码率,您也可以设置为 1500kbps 用来获得更好的观感清晰度。特别说明:您可以通过同时设置 videoBitrate 和 minVideoBitrate 两个参数,用于约束 SDK 对视频码率的调整范围:1.1 如果您追求“弱网络下允许卡顿但要保持清晰”的效果,可以设置 minVideoBitrate 为 videoBitrate 的 60%。1.2 如果您追求“弱网络下允许模糊但要保持流畅”的效果,可以设置 minVideoBitrate 为一个较低的数值(例如 100kbps)。1.3 如果您将 videoBitrate 和 minVideoBitrate 设置为同一个值,等价于关闭 SDK 对视频码率的自适应调节能力。 | |
int | 字段含义:视频采集帧率。 推荐取值:15 fps 或 20 fps。5 fps 以下,卡顿感明显。10 fps 以下,会有轻微卡顿感。20 fps 以上,会浪费带宽(电影的帧率为24fps)。 特别说明:部分 Android 手机的前置摄像头并不支持 15 fps 以上的采集帧率,部分主打美颜功能的 Android 手机的前置摄像头的采集帧率可能低于10fps。 | |
字段含义:分辨率模式(横屏分辨率 or 竖屏分辨率)。 推荐取值:手机平台(iOS、Android)建议选择 Portrait,桌面平台(Windows、Mac)建议选择 Landscape。 特别说明:如需使用竖屏分辨率,请指定 resMode 为 Portrait,例如: 640 × 360 + Portrait = 360 × 640 。 |
liteav::TRTCVideoEncParam enc_param;// 设置视频分辨率enc_param.videoResolution = liteav::TRTCVideoResolution_960_540;// 配置视频码率enc_param.videoBitrate = 850;// 设置视频帧率enc_param.videoFps = 15;// 配置分辨率模式为横屏模式enc_param.resMode = liteav::TRTCVideoResolutionModeLandscape;// 应用编码参数配置mCloud->setVideoEncoderParam(enc_param);
TRTCVideoEncParam* encParam = [TRTCVideoEncParam new];// 设置视频分辨率encParam.videoResolution = TRTCVideoResolution_960_540;// 配置视频码率encParam.videoBitrate = 850;// 设置视频帧率encParam.videoFps = 15;//设置分辨率模式为横屏模式encParam.resMode = TRTCVideoResolutionModeLandscape;[trtc setVideoEncoderParam: encParam];
竖屏模式
如果希望 App 是竖屏体验,那么您需要做的工作跟横屏模式类似,只是将 TRTCVideoEncParam 中的 resMode 值:
在 Windows 平台中应该指定为 liteav::TRTCVideoResolutionModePortrait。
在 Mac 平台中应该指定为 TRTCVideoResolutionModePortrait。
自定义控制
实时音视频(TRTC)本身提供了大量的接口函数可以操控本地和远程画面的旋转方向和填充模式:
接口函数 | 参数 | 字段名 | 描述 |
fillMode | 字段含义:画面填充模式。 推荐取值:填充(画面可能会被拉伸裁剪)或适应(画面可能会有黑边),默认值:TRTCVideoFillMode_Fill。 | ||
| | mirrorType | 字段含义:画面镜像模式。 推荐取值:默认值:TRTCVideoMirrorType_Auto。 |
| | rotation | 字段含义:图像的顺时针旋转角度。 推荐取值:支持 90、180 以及 270 旋转角度。默认值:TRTCVideoRotation0。 |
fillMode | 字段含义:画面填充模式。 推荐取值:填充(画面可能会被拉伸裁剪)或适应(画面可能会有黑边),默认值:TRTCVideoFillMode_Fill。 | ||
| | mirrorType | 字段含义:画面镜像模式。 推荐取值:默认值:TRTCVideoMirrorType_Auto。 |
| | rotation | 字段含义:图像的顺时针旋转角度。 推荐取值:支持 90、180 以及 270 旋转角度。默认值:TRTCVideoRotation0。 |
| userId | - | 指定远端用户的 ID。 |
| streamType | - | |