用通话统计 UI 监测 Agora 视频直播性能

本教程中,我们会把Agora频道文件的默认状态(通话)改成视频直播状态。然后用Unity的Canvas UI实时显示每位主播的属性。

最后,我们还会一起创建一个可以应对恶劣网络环境的应变系统,可用通话统计 UI 对其进行实时监测。

如果你想跳过对Agora概念的入门介绍,可以直接跳到 调整Partychat Demo获取代码 的部分。

第一步,你需要一个Agora账户。声网账户创建指南

此项目的建立基于 agora-party-chat Demo,如果没有这个Demo的使用经验,你可以先下载一个了解一下基本的Agora功能以及PUN2的网络运行。在agora-party聊天Demo基础上,Agora还提供立体声效实例演示

我们将会把agora-party-chat作为起始模板,按说明进行修改实现这些功能。完整示例代码

广播文件

Agora SDK的默认状态是 Communication,最多支持17人建群视频聊天。在这个示例中,你将允许用户把他们的频道文件设置成CHANNEL_PROFILE.CHANNEL_PROFILE_LIVE_BROADCASTING,这需要把每位用户角色都设定为主播或是观众。在频道中,全员都能看到主播的视频源,但看不到也听不到观众的视频源。同时支持容纳100多万用户,Agora SDK是一个非常有用的实时互动工具。

举个例子: 一群玩家在队伍中准备开始一场比赛或副本,而队长向队伍发布了一个公告,于是他们的视频流就出现在每个玩家的UI上,他们在游戏中的头像会显示一个特殊的效果,以显示他们是队长并且正在发言。

实时通话统计

Agora 包含SDK中的回调以接收来自频道的数据,让你能监测每位频道中主播的表现。你可以捕捉或展示像比特率、编解码器类型和质量适配之类的数据。在这个示例中,我创建了一个简单的能让你在邻近播放视频的窗口中查看所有数据点的UI。你能保留所需的统计信息,并删除其余的统计信息。

音视频流回退处理

举个例子: 理想中的游戏,群主能与群成员进行音视频交流以获取更丰富的体验。但网络不稳定时,成员能优先听见群主的信息就显得很重要。

Agora允许自定义当网络不稳定时App的应对策略,例如当宽带不足时,对质量、帧率或音频进行优先排序,让三者都得到支持。在这个例子中,我向你展示了优先处理尽可能高质量的视频的设置直到视频不可用、频道默认只有音频。

调整群聊天Demo

首先我们要对访问Agora引擎的方式做些调整。在名为AgoraEngine的 VikingeScene中创建一个空的游戏对象。创建一个脚本将其命名为AgoraEngine.cs并把它附加到新的游戏对象中。在脚本内,初始化Agora引擎、创建一个能从其他脚本访问的静态引用。

重要提示: 请确保你的Agora个人资料中包含你自己的 App ID 。否则,你的项目将无法正常工作。

在初始化引擎的代码中,将视频设置为以正方形长宽比渲染(与渲染视频中的正方形UI图像匹配),并在游戏退出时清理引擎。

Agora视频聊天

在AgoraVideoChat.cs脚本中,删除Start()方法中的Agora引擎初始化,调整回调引用你建完的新AgoraEngine.cs脚本,更新 JoinRemoteChannel() mRtcEngine引用,如下所示:

每次离开网络游戏关卡时,都能用这个方法销毁Agora引擎,并删除该 TerminateAgoraEngine() 方法:

设置视频直播配置文件

下一步,你需实现“直播配置文件”选择。

创建一个名为ProfileSelection.cs的脚本,并将其附加到CharPrefab玩家游戏对象上。

接下来,创建作为主播或观众加入频道的UI。如果你想搞得复杂点,你可以随便使用自己的样式或创建自己的UI。

为每个角色创建一个带有两个嵌套按钮的面板:

在我的CharPrefab中,UI层次结构如下所示:

monitoring-agora-broadcast-6

我已经从起始项目的父层次结构中删除了Viewport UI对象,因为它隐藏了你要看到的UI面板。

将ButtonPanel设置为False,因为此演示不需要该功能。最后,将“滚动视图” UI对象的Alpha通道设置为透明,以免与后面创建的UI状态面板冲突。

创建基本的UI后,让我们进入脚本。添加这些变量。对于“ UI元素”部分,保证将适当的UI元素从“场景”中拖动到 Inspector的相应插槽中:

Start() 方法中,初始化UI和直播状态,然后启动coroutine以获取Agora引擎。

因Agora引擎的异步功能,所以使用一个coroutine来检索。我将计时器设置为3秒。如果三秒过后仍未找到引擎,该脚本会停止运行并向你报错。如果检索到引擎,你需要将用户的频道配置文件设置为视频直播模式,初始化直播回调,并显示刚刚创建的两个按钮:

创建按“观众”或“主播”按钮时所触发的功能:

重要提示: 确保将此功能拖到你的按钮中。要不你会纳闷儿为什么没有响应。

对于Broadcaster按钮,确保选中该功能旁边的复选框,将isNewStateBroadcaster参数设置为true,并将Audience复选框保留为false。

打开AgoraVideoChat.cs,删除 Start() 中的 mRtcEngine.JoinChannel() 调用,创建一个公共函数来加入频道,如下所示:

在默认的“通信”配置文件中,用户会自动加入。但在这种情况下,你要通过UI设置客户端配置文件后加入频道。

作为点睛之笔,任何以主播身份参与的用户都有变成金色的玩家模型,以提示游戏中谁是主播谁是观众。在你项目中创建金色素材并将其拖动到broadCasterMaterial中。将BaseHuman(SkinnedMeshRenderer)拖到你先前创建的vikingMesh变量中。你可以在Charprefab> Viking> BaseHuman中找到它:

通话统计

接下来,你将实现在主播的视频画面旁边显示通话统计UI的功能。创建一个名为UserStatsUI.cs的脚本,并将其附加到UserVideo预制件上。

UI面板

创建一个UI> Panel对象作为UserVideo预制件的子对象,并为其提供以下属性:

为了显示视频直播统计信息,我创建了14个嵌套在面板内的单独的UI Text对象,如下所示:

你可以根据自己的喜好来安排,我按照下面的顺序来排列:

UID音频后备

1 4 7

2 5 8

3 6 9

10 11

12

UI脚本

创建这些变量,然后将文本对象拖动到编辑器Inspector中的插槽中:

接下来,禁用 Start() 方法中的“统计信息”面板,设置回调以获取统计信息:

在主播加入后并创建了UserVideo预制件时,会设置 isLocalVideo 属性。

创建方法来设置这个属性,然后在AgoraVideoChat.cs中访问它:

monitoring-agora-broadcast-19

实现单击处理程序,以在用户单击广播的方形视频帧时打开和关闭统计信息面板:

此函数是从使用 UnityEngine.EventSystems 的IPointerClickHandler衍生而来。

如果你没有注册任何点击事件,那可能是你的UserVideo预制对象被翻转了。

最后,在面板中实现Agora的通话统计信息:

注意: 确保浏览新创建的脚本的“层次结构”视图,并拖入任何所需的对象和引用。

现在可以进行测试了!

流程应如下所示:

  1. 进入Photon大厅。
  2. 创建房间或加入现有房间。
  3. 除主播或观众面板外,屏幕均为空白。
  4. 选择主播或观众。
  5. 如果选择了Broadcaster,则本地视频将填充方形UI视频的左列。
  6. 点击主播视频以切换统计信息。
  7. 加入另一个客户端,然后单击“主播”。单击每个视频源以获取本地和远程视频统计信息。

这就是本教程的所有内容了!Unity多人通话Demo直播性能监测Demo提供完成的代码供参考。

如果你想为这个项目以及整个Agora社区做出贡献,请随时在GitHub上提交请求,然后将更改添加到项目中!

作者 Joel Thomas

原文链接 https://www.agora.io/en/blog/monitoring-agora-broadcast-performance-with-a-call-stats-ui/