TRTC横竖屏切换
一、简介
本篇主要介绍TRTC通话时,横竖屏切换接口的调用示例、通话效果。
音视频通话完整链路,大致是:本地采集、本地预览、编码输出、网络传输、接收解码渲染。
这几步中有四个环节,能捕获到视频的角度参数:本地采集、本地预览、编码输出、接收解码渲染,
其中本地采集是摄像头硬件默认的,而本地预览、编码输出、接收解码渲染这三步,可以改变音视频数据的角度,
TRTC提供了这三个api,满足您的画面横竖屏切换需求。
用户要的只是4种效果:自己横竖屏切换+对方看到的横竖屏切换,但是sdk却有4X4X4=64种实现方式,一旦遇到问题就很费解。以下将引导:用最简单的方式,体验sdk的横竖屏切换功能。
二、api介绍
参考api文档描述:
setLocalViewRotation可以改变本地渲染预览方向,支持调整4个方向。
setRemoteViewRotation可以远端视频的渲染方向,支持调整4个方向。
setVideoEncoderRotation可以改变sdk编码输出的方向,6.9版本的sdk开始支持4个方向
三、代码示例和通话效果
0、代码修改
以sdk包中的SimpleDemo为例,修改“视频通话”功能模块下的按钮点击事件,如下
else if (id == R.id.trtc_btn_mute_audio) {
// muteAudio();
new AlertDialog.Builder(this)
.setTitle("请选择")
.setIcon(android.R.drawable.ic_dialog_info)
.setSingleChoiceItems(new String[]{"本地渲染0度","本地渲染90度","本地渲染180度","本地渲染270度"}, -1, new DialogInterface.OnClickListener(){
public void onClick(DialogInterface arg0, int arg1) {
switch (arg1) {
case 0:mTRTCCloud.setLocalViewRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_0);break;
case 1:mTRTCCloud.setLocalViewRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_90);break;
case 2:mTRTCCloud.setLocalViewRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_180);break;
case 3:mTRTCCloud.setLocalViewRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_270);break;
default: break;
}
arg0.dismiss();
}
})
.setNegativeButton("取消", null)
.show();
}
else if (id == R.id.trtc_btn_mute_video) {
// muteVideo();
new AlertDialog.Builder(this)
.setTitle("请选择")
.setIcon(android.R.drawable.ic_dialog_info)
.setSingleChoiceItems(new String[]{"远端渲染0度","远端渲染90度","远端渲染180度","远端渲染270度"}, -1, new DialogInterface.OnClickListener(){
public void onClick(DialogInterface arg0, int arg1) {
switch (arg1) {
case 0:mTRTCCloud.setRemoteViewRotation("123",TRTCCloudDef.TRTC_VIDEO_ROTATION_0);break;
case 1:mTRTCCloud.setRemoteViewRotation("123",TRTCCloudDef.TRTC_VIDEO_ROTATION_90);break;
case 2:mTRTCCloud.setRemoteViewRotation("123",TRTCCloudDef.TRTC_VIDEO_ROTATION_180);break;
case 3:mTRTCCloud.setRemoteViewRotation("123",TRTCCloudDef.TRTC_VIDEO_ROTATION_270);break;
default: break;
}
arg0.dismiss();
}
})
.setNegativeButton("取消", null)
.show();
}
else if (id == R.id.trtc_btn_log_info) {
// showDebugView();
new AlertDialog.Builder(this)
.setTitle("请选择")
.setIcon(android.R.drawable.ic_dialog_info)
.setSingleChoiceItems(new String[]{"编码输出0度","编码输出90度","编码输出180度","编码输出270度"}, -1, new DialogInterface.OnClickListener(){
public void onClick(DialogInterface arg0, int arg1) {
switch (arg1) {
case 0:mTRTCCloud.setVideoEncoderRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_0);break;
case 1:mTRTCCloud.setVideoEncoderRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_90);break;
case 2:mTRTCCloud.setVideoEncoderRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_180);break;
case 3:mTRTCCloud.setVideoEncoderRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_270);break;
default: break;
}
arg0.dismiss();
}
})
.setNegativeButton("取消", null)
.show();
}
1、原始效果
如下图左右两位手机竖持,画面效果也都是竖屏,大画面是自己,小画面是对方。
后面操作都是在这种初始状态下,调用接口旋转的。
2、本地渲染旋转90°
左不做操作,右调用mTRTCCloud.setLocalViewRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_90)
3、本地渲染旋转180°
左不做操作,右调用mTRTCCloud.setLocalViewRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_180)
4、本地渲染旋转270°
左不做操作,右调用mTRTCCloud.setLocalViewRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_270)
5、远端渲染旋转90°
左不做操作,右调用mTRTCCloud.setRemoteViewRotation("123",TRTCCloudDef.TRTC_VIDEO_ROTATION_90)。
6、远端渲染旋转180°
左不做操作,右调用mTRTCCloud.setRemoteViewRotation("123",TRTCCloudDef.TRTC_VIDEO_ROTATION_180)
7、远端渲染旋转270°
左不做操作,右调用mTRTCCloud.setRemoteViewRotation("123",TRTCCloudDef.TRTC_VIDEO_ROTATION_270)
8、编码输出旋转90°
左不做操作,右先初始化禁止重力感应mTRTCCloud.setGSensorMode(TRTCCloudDef.TRTC_GSENSOR_MODE_DISABLE);
后调用mTRTCCloud.setVideoEncoderRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_90)
9、编码输出旋转180°
左不做操作,右先初始化禁止重力感应mTRTCCloud.setGSensorMode(TRTCCloudDef.TRTC_GSENSOR_MODE_DISABLE);
后调用mTRTCCloud.setVideoEncoderRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_180)
10、编码输出旋转270°
左不做操作,右先初始化禁止重力感应mTRTCCloud.setGSensorMode(TRTCCloudDef.TRTC_GSENSOR_MODE_DISABLE);
后调用mTRTCCloud.setVideoEncoderRotation(TRTCCloudDef.TRTC_VIDEO_ROTATION_270)
四、常见问题
1、平板设备、IP电视
以上是安卓手机端的示例,手机端摄像头默认采集的视频数据,角度参数都是一致的。但是在一些安卓智能设备上,特别是平板设备、IP电视等这种横屏设备,厂商默认会把采集的视频角度先带上90°参数,以适应横屏设备播放渲染时自动横屏。
这种设备集成TRTC的表现一般是:本地渲染默认初始值0°,但是本地预览画面是横屏的,对方看到自己的画面也是横屏的。
这就需要使用sdk接口改变一下本地渲染角度,再改变一下编码输出角度。选择角度视各个厂商采集角度而定。
2、重力感应
TRTCSDK默认重力感应GSensorMode是开启的,如果您调用setVideoEncoderRotation不生效,需要把GSensorMode关闭。
还有一些手机,平放在桌面时,会发生横竖屏切换,这是手机重力感应触发的,请把手机支起来吧,或者关闭手机的重力感应。
关于sdk重力感应功能,可以参考这篇《TRTC横竖屏切换2,重力感应》
3、横屏后画面裁剪问题
横屏后画面只显示中间一小部分,看上去放大了。
这其实不是放大了,是view没有跟着画面横竖屏切换,
渲染模式默认用的是铺满模式,这种模式下,view会优先选择画面最短边,画面最长边超过view边,就会剪裁掉。
可以改变渲染模式为适应模式,这种情况下,view会优先选择画面最长边,画面最短边小于view边,就会出现两边黑边。
另外,您也可以同步调整view的横竖屏比例。
链接
- Windows下bat批处理脚本使用telnet批量检测远程端口小记
- WordPress集成PHP缩略图,并开启Nginx缓存的方法
- 分享几个WordPress本地缓存gravatar评论头像的方案
- Linux下的mongodb服务脚本,以备不时之需
- WordPress发布文章主动推送到百度,加快收录保护原创
- Nginx开启fastcgi_cache缓存加速,支持html伪静态页面
- Go-指针、传值与传引用、垃圾回收
- SEO分享:彻底禁止搜索引擎抓取/收录动态页面或指定路径的方法
- Go-defer,panic,recover
- SEO技巧:Shell脚本自动提交网站404死链到搜索引擎
- Nginx发布1.9.0版本,新增支持TCP代理和负载均衡的stream模块
- WordPress4.2升级修复补丁:解决大量404请求以及评论表情路径及尺寸异常问题
- Linux系统编译安装Redis以及主从复制配置小记
- Go-Maps
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法