Agora 教程 | 如何在 Unity 中创建实时视频聊天应用

image

声网发布了基于 Native SDK 2.9.1 全平台接口的第一个全功能版 Agora Unity SDK,可用于基于 Unity 环境开发的游戏(不在意包体大小)、教育、AR、VR 项目。我们将讲解如何使用 Agora Video SDK for Untiy 在 Unity 中构建跨平台的实时视频聊天场景。

注意:本篇教程中要用的 Agora Video SDK for Untiy ,与之前已经发布的 Agora 互动游戏 Unity SDK 有很多差别,具体如下:

image

前期准备

  • Unity Editor

  • 了解 Unity Editor、GameObjects、Unity 脚本、及如何将 Unity 应用发布到移动设备上

  • 了解 C#的基础知识

  • 一个声网Agora 开发者帐户

概述

以下是本项目的所有步骤:

1.设置新项目,导入 Agora.io Video SDK for Untiy

2.创建场景

3.处理按钮点击事件

4.集成 Agora SDK

5.在设备上搭建和测试(iOS/Android/Windows/macOS)

设置新项目

首先,打开 Unity 并创建一个空白的新项目,将其命名为 Agora Video Demo。Unity 项目设置完成后,找到 Unity Asset Store,搜索 Agora Video SDK,把 Agora Video SDK for Unity 导入到我们的项目中。出现提示时,请确保选中列表中的所有 Assets。

创建场景

创建一个新场景,将其命名为 WelcomeScene,然后双击该场景在 Editor 视图中打开。应用加载后,WelcomeScene 将是用户看到的首个画面。首先,从场景中删除现有的 Camera 和 Lights,添加一个 Canvas Game Object。然后添加一个 Camera,作为 Canvas 的子对象。由于屏幕是以 2D 模式显示的,所以要把 Editor 切换为 2D 模式。另外,把 Editor 视图切换为 Game 模式,以便查看与 Camera 视图相关的定位。

我们需要一个按钮来触发应用以加入聊天,因此,我们添加一个名为 JoinChannel 的按钮,并为其添加标签。我们还需要让用户输入其频道名称,为此我们创建一个文本输入(InputFiled),将其命名为 ChannelName,并为其提供有效的占位符文本。

image

接下来,我们将创建一个新场景,并将其命名为 ChatScene,它是播放本地和远端视频推流的屏幕。为了测试 Agora Video SDK 的某些功能,我们为场景添加一些新形状。首先,向场景添加一个立方体。由于我们的场景包含 3D 模式,所以在编辑器中退出 2D 模式,这样我们对立方体就有了更好的视图,它看起来略小,所以我们需要把它的所有尺寸设置为 2。

我们希望立方体把本地的摄像头推流渲染为纹理视图,因此需要为立方体添加 VideoSurface.cs 组件。我们添加一个 Cylinder Game Object,先将其移动到上方不被立方体遮挡的位置。然后,我们给 Cylinder 一个独特的尺寸,并添加 VideoSurface.cs 组件。

最后,我们把 Canvas 添加到场景中,这样我们就可以添加一个 2D 按钮用来退出聊天,我们将其命名为 LeaveButton 并为其指定合适的标签。在此过程中,我们需要添加一个文本框,将其命名为 VersionText,我们可以用 VersionText 对当前工作进行视觉确认。我们把 VersionText 放置在右上角,避免其遮挡画面,并将其颜色设置为白色,方便查看。

处理按钮点击事件

在设置场景的过程中,我们创建了两个按钮(JoinButtonLeaveButton),现在我们需要创建一个脚本,将一些 On Click Event 映射到这两个按钮上。

首先,在 Assets 中创建一个新的 C#脚本,将其命名为 ButtonHandler.cs,然后双击它,在 Visual Studio 中打开文件。我们添加一个函数 OnButtonClick(),为方便起见,我们在函数主体中添加一个 Debug Log。

Debug.Log(“Button Clicked: “ + name);

现在,回到 Unity 中的 WelcomeScene,将脚本和函数关联到按钮上。先选择 JoinButton,将 ButtonHandler.cs 添加为组件,然后添加一个 On Click event,并将按钮单击映射到 OnButtonClick()。我们会在 ChatSceneLeaveButton 上重复此过程。

image

此外,我们需要引入 UnityEngine.UI,然后才能从 ChannelName Game Object 获取 InputFiled 组件。

public void OnButtonClick()
{
    Debug.Log("Button Clicked: " + name);

    // determin which button
    if (name.CompareTo("JoinButton") == 0)
    {
        // join chat
        OnJoinButtonClicked();
    }
    else if (name.CompareTo("LeaveButton") == 0)
    {
        // leave chat
        OnLeaveButtonClicked();
    }
}

private void OnJoinButtonClicked()
{
    Debug.Log("Join button clicked");

    // get channel name from text input
    GameObject go = GameObject.Find("ChannelName");
    InputField input = go.GetComponent<InputField>();
}

private void OnLeaveButtonClicked()
{
    Debug.Log("Leave button clicked");
}

集成 Agora SDK

首先,我们在 Assets 中创建一个新的 C#脚本,将其命名为 AgoraInterface.cs,然后在 Visual Studio 中打开该文件。我们创建的第一个变量是 appId,用来保存我们的 Agora AppID。登录你的声网Agora 开发者账户,复制你的 AppID 并将其粘贴到 appId 的值中。我们还需要创建一个变量来保存对 Agora RTC Engine 的引用,另外,要为远端推流 id 创建一个占位符变量。

private static string appId = "Agora App ID";
public IRtcEngine mRtcEngine;
public uint mRemotePeer;

创建一个函数来初始化 Agora Rtc Engine,将该函数命名为 LoadEngine()。如果引擎不存在,需要确保引擎只被初始化一次。使用 if 语句来检查 mRtcEngine 引用是否为 null,如果结果为 true,使用 IRtcEngine.getEngine 传递我们的 Agora AppID 来初始化引擎。

这里也将日志级别设置为 Debug,所以可以看到我们的 Debug 日志,掌握全局情况。我喜欢添加许多 Debug 日志,了解执行过程中的各种细节。

接下来,我们将声明 JoinChannel() 函数。首先,检查 mRtcEngine 是否存在,然后调用 EnableVideoEnableVideoObserver,最后用 ChannelName 调用 JoinChannel

目前,我们已经初始化了 Agora mRtcEngine,并用它“加入频道”。现在我们需要为用户提供“离开频道”并“卸载”引擎的方法。我们先从 LeaveChannel() 开始,再次检查引擎是否存在,然后用引擎调用 LeaveChannel()DisabelVideoObserver()。最后,通过调用 IRtcEngine.Destroy() 并把本地引用设置为 null 来卸载引擎。

image

我们准备添加一些回调函数,以便基于各种预定义事件进行调用。我们重点关注三个回调:OnChannelJoinSuccessOnUserJoinedOnUserOffline

只要本地设备成功加入频道,就会调用 OnChannelJoinSuccess;当远端推流加入频道,就会调用 OnUserJoined;当远端推流离开频道时,就会调用 OnUserOffline

调用 JoinChannel 后,我们在 OnJoinButtonClicked 中向 SceneManagerSceneLoaded 监听器添加一个回调,将函数命名为 OnSceneFinishedLoading。由于每次加载场景时都会调用回调,因此我们需要一个中间函数。

image

在设备上测试本项目之前,需要为 Android 设备添加一些权限请求。从 Unity 2018_3 开始,权限不再自动添加,因此我们需要添加一些 if-else 语句来检查并请求麦克风和摄像头权限。

image

在设备上搭建并测试

终于可以测试我们的应用了!我们回到 Unity 并打开 Build Settings。首先,将 WelcomeSceneChatScene 拖到 Build Settings 对话框的 Scene 列表中。

在搭建和部署应用之前,我们需要对每个平台的播放器设置进行一些调整。我们需要更新 Bundle ID,并提供一些有关摄像头和麦克风使用情况的描述文本(开启权限提示)。

image

现在开始构建我们的应用!在 BuildSettings 对话框中,单击 Build 按钮,Unity 会提示你输入构建项目的保存位置。Unity 构建好 iOS 应用后,会出现包含 Unity-iPhone.xcodeprojFinder 窗口,双击该文件打开 XCode,从左侧的文件导航栏中选择项目,启用 Automatic Signing 并选择你的签名证书。最后,确保测试设备已连接,然后单击 Play 按钮。

image

我们这个版本也支持 Windows 和 macOS,如图所示:

image

image

你可以看到 WelcomeScene 先被加载,我们加入频道时会被跳转至 ChatScene,我们单击 Leave 按钮时,就会返回 WelcomeScene。唯一缺少的是远端推流,因为远端推流需要另一个设备。

此外,我们也支持 Android。从 Platform 列表中选择 Android,打开 Player Settings 并提供一个 Package Name。确保你的 Android 设备已连接,然后单击 Build And Run

image

完成啦!

又搞定一个“小目标”!如果大家有任何新的想法,或遇到什么问题,欢迎到 RTC 开发者社区与我们交流。

其它资源

• 我们在 Github 开源了 Unity SDK 的相关代码示例,具体可以参考:https://github.com/AgoraIO/Agora-Unity-Quickstart/tree/master/video/Hello-Video-Unity-Agora

• 可在 Unity Asset Store上获取 Agora.io Video SDK for Unity

• 完整的 API 文档可在声网文档中心找到:https://docs.agora.io/cn/Video/release_unity_video?platform=Unity

• 如果在集成中遇到问题, 你可以到 RTC 开发者社区提问

备注

  1. 你可能会问,为什么是 getEngine() 而不是 new IRtcEngine(),这与 Agora mRtcEngine 作为单例运行有关。getEngine() 将检查实例是否存在,如果不存在,则创建一个新实例。getEngine() 函数也可以稍后被调用以从代码的其他部分获取对引擎的引用。

  2. 所有回调在 AgoraGameRtcEngine.cs 中可见(Assets → /Scripts → /AgoraGamingSDK)。

注意:每个回调函数都会传递一组特定的参数,因此,如果你打算添加其他任何回调,请务必查看 AgoraGameRtcEngine.cs 文件

image

推荐阅读
相关专栏
SDK 教程
167 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。