内容介绍
跟手机直播千篇一律的竖屏体验不同,实时音视频(TRTC)需要兼顾横屏和竖屏两种场景,因此就会有很多横竖屏的处理逻辑需要去应对,本文主要介绍:
如何实现竖屏模式,例如:微信的视频通话就是一个典型的竖屏体验模式。
如何实现横屏模式,例如:多人音视频房间 App(类似小鱼易连)往往都是采用横屏模式。
如何自定义控制本地画面和远程画面的旋转方向和填充模式。


平台支持
iOS | Android | Mac OS | Windows | Electron | 微信小程序 | Web 端 |
✓ | ✓ | ✓ | ✓ | ✓ | × | × |
竖屏模式
如果要实现类似微信视频通话的体验模式,需要做两项工作:
1. 配置 App 界面为竖屏模式
可以直接在 Xcode 的 General > Deployment Info > Device Orientation 中进行设置:


您也可以通过实现 AppDelegate 中的
supportedInterfaceOrientationsForWindow 方法来达到相同目标:- (UIInterfaceOrientationMask)application:(UIApplication *)applicationsupportedInterfaceOrientationsForWindow:(UIWindow *)window{return UIInterfaceOrientationMaskPortrait ;}
说明
通过指定 activity 的
screenOrientation 属性为 portrait,即可指定该界面为竖屏模式:<activity android:name=".trtc.TRTCMainActivity" android:launchMode="singleTask" android:windowSoftInputMode="adjustPan"android:screenOrientation="portrait" />
2. 配置 SDK 使用竖屏分辨率
示例代码如下:
字段名 | 类型 | 说明 |
字段含义:视频分辨率。 特别说明:如需使用竖屏分辨率,请指定 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 | 字段含义:视频采集帧率。 推荐取值:15fps或20fps。5fps以下,卡顿感明显。10fps以下,会有轻微卡顿感。20fps以上,会浪费带宽(电影的帧率为24fps)。 特别说明:部分 Android 手机的前置摄像头并不支持15fps以上的采集帧率,部分主打美颜功能的 Android 手机的前置摄像头的采集帧率可能低于10fps。 | |
字段含义:分辨率模式(横屏分辨率 or 竖屏分辨率)。 推荐取值:手机平台(iOS、Android)建议选择 Portrait,桌面平台(Windows、Mac)建议选择 Landscape。 特别说明:如需使用竖屏分辨率,请指定 resMode 为 Portrait,例如: 640 × 360 + Portrait = 360 × 640 。 |
TRTCVideoEncParam* encParam = [TRTCVideoEncParam new];encParam.videoResolution = TRTCVideoResolution_640_360;encParam.videoBitrate = 600;encParam.videoFps = 15;encParam.resMode = TRTCVideoResolutionModePortrait; //设置分辨率模式为竖屏模式[trtc setVideoEncoderParam: encParam];
TRTCCloudDef.TRTCVideoEncParam encParam = new TRTCCloudDef.TRTCVideoEncParam();encParam.videoResolution = TRTCCloudDef.TRTC_VIDEO_RESOLUTION_640_360;encParam.videoBitrate = 600;encParam.videoFps = 15;encParam.videoResolutionMode = TRTCCloudDef.TRTC_VIDEO_RESOLUTION_MODE_PORTRAIT; //设置分辨率模式为竖屏模式trtc.setVideoEncoderParam(encParam);
横屏模式
在 iOS 平台中应该指定为
TRTCVideoResolutionModeLandscape。在 Android 平台中应该指定为
TRTC_VIDEO_RESOLUTION_MODE_LANDSCAPE。自定义控制
TRTC SDK 本身提供了大量的接口函数可以操控本地和远程画面的旋转方向和填充模式:
接口函数 | 参数 | 字段名 | 描述 |
fillMode | 字段含义:画面填充模式。 推荐取值:填充(画面可能会被拉伸裁剪)或适应(画面可能会有黑边),默认值:TRTC_VIDEO_RENDER_MODE_FILL。 | ||
| | mirrorType | 字段含义:画面镜像模式。 推荐取值:默认值:TRTC_VIDEO_MIRROR_TYPE_AUTO。 |
| | rotation | 字段含义:图像的顺时针旋转角度。 推荐取值:支持 90、180 以及 270 旋转角度。默认值:TRTC_VIDEO_ROTATION_0。 |
fillMode | 字段含义:画面填充模式。 推荐取值:填充(画面可能会被拉伸裁剪)或适应(画面可能会有黑边),默认值:TRTC_VIDEO_RENDER_MODE_FILL。 | ||
| | mirrorType | 字段含义:画面镜像模式。 推荐取值:默认值:TRTC_VIDEO_MIRROR_TYPE_AUTO。 |
| | rotation | 字段含义:图像的顺时针旋转角度。 推荐取值:支持 90、180 以及 270 旋转角度。默认值:TRTC_VIDEO_ROTATION_0。 |
| userId | - | 指定远端用户的 ID。 |
| streamType | - | |


GSensorMode
考虑到画面旋转牵扯到录制和 CDN 旁路直播的各种适配问题, TRTC SDK 仅提供了一种简单的重力感应自适应功能,您可以通过 TRTCCloud 的
setGSensorMode接口来开启。该功能支持90度、180度、270度旋转的自适应,也就是当用户自己的手机旋转时,对方看到的画面朝向还是会保持不变。而且这种自适应是基于对编码器的方向调整而实现的,因此录制出的视频,以及小程序和 H5 端看到的视频画面也能做到保持原方向不变。
注意:
重力感应自适应的另一种实现方案是在每一帧视频信息里都带上当前视频的重力朝向,然后在远程用户那里自适应的调整渲染方向,但这种方案需要引入额外的转码资源才能解决录制出的视频朝向跟期望的视频朝向保持一致的问题,因此并不推荐。