写点什么

基于 Agora SDK 实现 Android 端的多人视频互动

  • 2020-02-26
  • 本文字数:3910 字

    阅读完需:约 13 分钟

基于 Agora SDK 实现 Android 端的多人视频互动

本系列教程将分为三期,分享基于 Agora SDK 在各系统平台应用中实现一对一视频通话、多人互动直播,以及结合跨平台技术进行开发。本期推送在 Android、iOS、Windows、Web、macOS 上实现多人视频互动直播。


本篇基于上一篇「Android 端一对一视频通话」教程,讲分享如何使用 Agora SDK 开发多人互动直播。

分屏

本文是采用瀑布流结合动态聊天窗实现分屏显示,这样比较方便的能够适应 UI 的变化。所谓瀑布流,就是目前比较流行的一种列表布局,会在界面上呈现参差不齐的多栏布局。我们先实现一个瀑布流:


瀑布流的实现方式很多,本文采用结合 GridLayoutManager 的 RecyclerView 来实现。我们首先自定义一个 RecyclerView,命名为 GridVideoViewContainer。核心代码如下:


int count = uids.size();if(count <= 2) {// 只有本地视频或聊天室内只有另外一个人this.setLayoutManager(newLinearLayoutManager(activity.getApplicationContext(), orientation, false));} elseif(count > 2) {// 多人聊天室int itemSpanCount = getNearestSqrt(count);this.setLayoutManager(newGridLayoutManager(activity.getApplicationContext(), itemSpanCount, orientation, false));}
复制代码


根据上面的代码可以看出,在聊天室里只有自己的本地视频或者只有另外一个人的时候,采用 LinearLayoutManager,这样的布局其实与前文的一对一聊天类似;而在真正意义的多人聊天室里,则采用 GridLayoutManager 实现瀑布流,其中 itemSpanCount 就是瀑布流的列数。


有了一个可用的瀑布流之后,下面我们就可以实现动态聊天窗了:动态聊天窗的要点在于 item 的大小由视频的宽高比决定,因此 Adapter 及其对应的 layout 就该注意不要写死尺寸。在 Adapter 里控制 item 具体尺寸的代码如下:



if(force || mItemWidth == 0|| mItemHeight == 0) {WindowManager windowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);DisplayMetrics outMetrics = newDisplayMetrics(); windowManager.getDefaultDisplay().getMetrics(outMetrics);
int count = uids.size();intDividerX= 1;intDividerY= 1;
if(count == 2) {DividerY= 2;} elseif(count >= 3) {DividerX= getNearestSqrt(count);DividerY= (int) Math.ceil(count * 1.f/ DividerX);}
int width = outMetrics.widthPixels;int height = outMetrics.heightPixels;
if(width > height) { mItemWidth = width / DividerY; mItemHeight = height / DividerX;} else{ mItemWidth = width / DividerX; mItemHeight = height / DividerY;}}
复制代码


以上代码根据视频的数量确定了列数和行数,然后根据列数和屏幕宽度确定了视频的宽度,接着根据视频的宽高比和视频宽度确定了视频高度。同时也考虑了手机的横竖屏情况(就是 if (width > height)这行代码)。


该 Adapter 对应的 layout 的代码如下:


<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/user_control_mask"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">
<ImageViewandroid:id="@+id/default_avatar"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:visibility="gone"android:src="@drawable/icon_default_avatar"android:contentDescription="DEFAULT_AVATAR"/>
<ImageViewandroid:id="@+id/indicator"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_alignParentBottom="true"android:layout_marginBottom="@dimen/video_indicator_bottom_margin"android:contentDescription="VIDEO_INDICATOR"/>
<LinearLayoutandroid:id="@+id/video_info_container"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentTop="true"android:layout_marginTop="24dp"android:layout_marginStart="15dp"android:layout_marginLeft="15dp"android:visibility="gone"android:orientation="vertical">
<TextViewandroid:id="@+id/video_info_metadata"android:layout_width="wrap_content"android:layout_height="wrap_content"android:singleLine="true"style="@style/NotificationUIText"/></LinearLayout>
</RelativeLayout>
复制代码


我们可以看到,layout 中有关尺寸的属性都 是 wrap_content,这就使得 item 大小随视频宽高比变化成为可能。


把分屏的布局写好之后,我们就可以在每一个 item 上播放聊天视频了。

播放聊天视频

在 Agora SDK 中一个远程视频的显示只和该用户的 UID 有关,所以使用的数据源只需要简单定义为包含 UID 和对应的 SurfaceView 即可,就像这样:


privatefinalHashMap<Integer, SurfaceView> mUidsList = newHashMap<>();
复制代码


每当有人加入了我们的聊天频道,都会触发 onFirstRemoteVideoDecoded(int uid, int width, int height, int elapsed)方法,第一个 uid 就是他们的 UID;接下来我们要为每个 item 新建一个 SurfaceView 并为其创建渲染视图,最后将它们加入刚才创建好的 mUidsList 里并调用 setupRemoteVideo( VideoCanvas remote )方法播放这个聊天视频。这个过程的完整代码如下:


@Overridepublicvoid onFirstRemoteVideoDecoded(int uid, int width, int height, int elapsed) {   doRenderRemoteUi(uid);}
privatevoid doRenderRemoteUi(finalint uid) { runOnUiThread(newRunnable() {@Overridepublicvoid run() {if(isFinishing()) {return;}
if(mUidsList.containsKey(uid)) {return;}
SurfaceView surfaceV = RtcEngine.CreateRendererView(getApplicationContext()); mUidsList.put(uid, surfaceV);
boolean useDefaultLayout = mLayoutType == LAYOUT_TYPE_DEFAULT;
surfaceV.setZOrderOnTop(true); surfaceV.setZOrderMediaOverlay(true);
rtcEngine().setupRemoteVideo(newVideoCanvas(surfaceV, VideoCanvas.RENDER_MODE_HIDDEN, uid));
if(useDefaultLayout) { log.debug("doRenderRemoteUi LAYOUT_TYPE_DEFAULT "+ (uid & 0xFFFFFFFFL)); switchToDefaultVideoView();} else{int bigBgUid = mSmallVideoViewAdapter == null? uid : mSmallVideoViewAdapter.getExceptedUid(); log.debug("doRenderRemoteUi LAYOUT_TYPE_SMALL "+ (uid & 0xFFFFFFFFL) + " "+ (bigBgUid & 0xFFFFFFFFL)); switchToSmallVideoView(bigBgUid);}}});}
复制代码


以上代码与前文中播放一对一视频的代码如出一撤,但是细心的读者可能已经发现我们并没有将生成的 SurfaceView 放在界面里,这正是与一对一视频的不同之处:我们要在一个抽象的 VideoViewAdapter 类里将 SurfaceView 放出来,关键代码如下:


SurfaceView target = user.mView;VideoViewAdapterUtil.stripView(target);holderView.addView(target, 0, newFrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
复制代码


一般 Android 工程师看见 holderView 就明白这是 ViewHolder 的 layout 的根 layout 了,而 user 是哪儿来的,详见文末的代码,文中不做赘述。


这样在多人聊天的时候我们就能使用分屏的方式播放用户聊天视频了,如果想放大某一个用户的视频该怎么办呢?

全屏和小窗

当用户双击某一个 item 的时候,他希望对应的视频能够全屏显示,而其他的视频则变成小窗口,那么我们先定义一个双击事件接口:


publicinterfaceVideoViewEventListener{void onItemDoubleClick(View v, Object item);}
复制代码


具体实现方式如下:


mGridVideoViewContainer.setItemEventHandler(newVideoViewEventListener() {@Overridepublicvoid onItemDoubleClick(View v, Object item) {        log.debug("onItemDoubleClick "+ v + " "+ item + " "+ mLayoutType);
if(mUidsList.size() < 2) {return;}
UserStatusData user = (UserStatusData) item;int uid = (user.mUid == 0) ? config().mUid : user.mUid;
if(mLayoutType == LAYOUT_TYPE_DEFAULT && mUidsList.size() != 1) { switchToSmallVideoView(uid);} else{ switchToDefaultVideoView();}}});
复制代码


将被选中的视频全屏播放的方法很容易理解,我们只看生成小窗列表的方法:


privatevoid switchToSmallVideoView(int bigBgUid) {HashMap<Integer, SurfaceView> slice = newHashMap<>(1);    slice.put(bigBgUid, mUidsList.get(bigBgUid));Iterator<SurfaceView> iterator = mUidsList.values().iterator();while(iterator.hasNext()) {SurfaceView s = iterator.next();        s.setZOrderOnTop(true);        s.setZOrderMediaOverlay(true);}
mUidsList.get(bigBgUid).setZOrderOnTop(false); mUidsList.get(bigBgUid).setZOrderMediaOverlay(false);
mGridVideoViewContainer.initViewContainer(this, bigBgUid, slice, mIsLandscape);
bindToSmallVideoView(bigBgUid);
mLayoutType = LAYOUT_TYPE_SMALL;
requestRemoteStreamType(mUidsList.size());}
复制代码


小窗列表要注意移除全屏的那个 UID,此外一切都和正常瀑布流视图相同,包括双击小窗的 item 将其全屏播放。


到了这里我们就已经使用 Agora SDK 完成了一个有基本功能的简单多人聊天 demo。


本文转载自 声网 Agora 公众号。


原文链接:https://mp.weixin.qq.com/s/lO5pf71goWTRFhm8mo3jKw


2020-02-26 15:49780

评论

发布
暂无评论
发现更多内容

用友与百度强强联合,以AI深化冶金行业数智化应用场景

用友BIP

分享一个 hive on spark 模式下使用 HikariCP 数据库连接池造成的资源泄露问题

明哥的IT随笔

大数据 hive

虚拟主机和云服务器的区别

天翼云开发者社区

企业内部即时通讯软件,提供安全的组织管理和办公协作方式

BeeWorks

AI for Good | 从女性力量,到AI公平

澳鹏Appen

人工智能

DTALK直播预约 | 深度解析大资管行业数字化转型

袋鼠云数栈

数字化转型

WorkPlus|可定制、可扩展的私有化即时通讯办公平台

BeeWorks

数据资产与勒索病毒之间,华为立起一张安全盾牌

脑极体

安全

一图读懂《2023 年全球互联网通信云行业研究报告》

融云 RongCloud

互联网 通讯 图片资源

如何召开成功高效的项目会议?

PMO实践

项目管理 PMO

内存耗尽后Redis干了什么

CTO技术共享

【知识科普】晶振究竟是如何起振的?

元器件秋姐

科普 晶振 元器件 电子

GitLab 解析:为什么市场正在转向一体化 DevSecOps 平台?(附Forrester完整报告下载)

极狐GitLab

DevOps DevSecOps 安全测试 极狐GitLab 安全合规

全国首个算力互联互通验证平台发布,天翼云推动算力智能调度再提速

天翼云开发者社区

十分钟读懂火山引擎DataLeap数据治理实践

字节跳动数据平台

大数据 数据研发 企业号 3 月 PK 榜

让AI上车,车企如何借势2023上海国际车展硬核出圈

极客天地

一文解码:如何在人工智能热潮下实现产业“智”变

加入高科技仿生人

人工智能 AI 低代码 智能化

共铸国云智领未来| “码”上呼唤,马上办!

天翼云开发者社区

「中华田园敏捷开发」,是老板无能还是程序员无力?

引迈信息

前端 敏捷开发 后端 低代码

电商 SaaS 全渠道实时数据中台最佳实践

Apache Flink

大数据 flink 实时计算

从新手小白到运维大咖,SysOM 多场景宕机实例解析 | 龙蜥技术

OpenAnolis小助手

运维 操作系统 服务器 龙蜥技术 SysOM

3 问 6 步,极狐GitLab 帮助企业构建高效、安全、合规的 DevSecOps 文化

极狐GitLab

DevOps DevSecOps 安全测试 极狐GitLab 安全左移

从5分钟到60秒,袋鼠云数栈在热重启技术上的提效探索之路

袋鼠云数栈

热重启

【附下载】艾瑞《全球互联网通信云研究报告》,融云 IM 连续 8 年展现统治力

融云 RongCloud

互联网 IM 社交 融云 元宇宙

如何利用分布式算法理解分布式存储

Dinfan

数据库 分布式 分布式存储 分布式算法

用友BIP接入百度文心一言 持续使能企业数智商业创新

用友BIP

一文搞懂面试官常问的:SpringBoot自动配置原理

Java Spring Boot 自动装配

终于说有人清楚了BI仪表板和大屏的区别

搞大屏的小北

数据分析 数据可视化 数据大屏 仪表板 可视化展示

云计算之-弹性伸缩

天翼云开发者社区

基于 Agora SDK 实现 Android 端的多人视频互动_行业深度_声网_InfoQ精选文章