互动直播应用快速开发实践（基于声网）

摘要

声网（ Agora.io) 是提供实时互动 API 的专业服务商。开发者通过集成其 SDK 和简单调用 API，可以快速创建拥有社交直播、在线教育等多种实时音视频互动场景的应用。

本文将介绍如何在声网平台创建账号和测试项目，实际演示如何编译执行 Web 客户端和安卓客户端的示例代码，并加入到同一个直播间频道中，进行音视频互动。

1. 创建声网账号

登录声网官网首页 ，点击右上方的注册登录按钮后，输入手机号创建账号，并输入真实姓名，公司名，邮箱地址，密码等相关信息，完成整个注册流程。

注册过程中有短信验证码和邮箱验证码的相关验证操作，根据网站指示操作即可。尽量一次性完成所有信息的填写和验证，避免出现问题（我在手机注册后第二天才填写邮箱，导致账号信息无法同步，应该是其账户系统的一个小 bug）。

由于声网为免费账户提供有每月一万分钟的直播时间，在真正确定采购声网服务之前，不需要付费就可以进行技术调研和验证。

2. 创建声网直播项目

账号创建并登录成功后，进入到声网控制台页面 ，可以看到一个叫做项目列表的页签。

点击页签中的“创建项目”，输入项目名称（应为要开发的互动直播应用的唯一标识），并选择使用场景，以及实名认证方式。认证应选择 APP ID + Token 方式，以符合生产环境需要。

项目创建完毕后，进入项目列表 可以找到已创建的项目。

声网为每个创建的项目，提供了一个简单的网页预览功能。

单击“网页演示”图标，可以打开一个临时的频道页面。

加入频道后，可以看到一个类似于视频会议的互动直播页面，并出现本机的摄像头画面。

将链接复制给其他人访问，可以达到实时音视频互动的效果。网页测试项目已经运行成功。

3. 创建测试频道及访问 Token

下面将编译执行声网提供的 Web 客户端和安卓客户端的示例源码，让这两个客户端可以加入到一个直播频道中，实现互动直播功能。为此需要做一些准备工作：

• 首先，需要决定一个频道名，客户端都要加入这个频道；

• 其次，为了模拟生产环境的安全机制需求，频道会设置一个访问 Token，想进入这个频道的客户端，必须持有合法的访问 Token。

在生产环境中，频道名以及每个频道的访问 Token 由业务服务端动态生成并分配给每个客户端。

为了快速实现主要功能的演示，暂时采用声网控制台中提供的“音视频临时 Token”功能，生成一个测试用的 Token，并临时写入到客户端的源码中使用。

点击钥匙图标，打开一个生成临时 Token 的页面。在这个页面中，有两个重要的字符串是客户端连接该项目的依据：

• APP ID

• App 证书

这两个字符串的位置，都可以通过点击进行复制，以后在客户端的源码中会用到。

在这个页面中，输入一个测试用的频道名为：ch1，然后点击“生成临时 Token”按钮，得到如下的一个“临时 Token”字符串：

这个临时 Token 的字符串可以复制，将在下面的客户端源码中使用到。

4. 下载客户端示例代码

声网的官网中提供了很多业务场景的示例代码,其中叫做 Open Live 的示例项目参考价值较大：

在这个项目的源码中可以看到，它包含了多个平台下的客户端的实现。

从 github.com 将该项目下载到本地，本文将选取下面两个平台客户端的源码，进行简单的修改和编译执行，连入上文创建的测试频道中，进行音视频互动：

• 基于 Node.js 实现的 Web 客户端 - OpenLive-Web

• 安卓客户端 - OpenLive-Android

5. Web 客户端的运行示例

5.1 环境准备

要编译和执行 OpenLive-Web 项目，首先需要在开发机上安装 Node.js 的当前长期维护（LTS）版本。在Node官网可以下载到 Windows、Mac 及 Linux 等平台的安装文件，按照官方文档说明安装即可。

Node 源码的编辑器或集成开发环境建议采用：

• Visual Studio Code（https://code.visualstudio.com/）

• IntelliJ Idea 社区版（https://www.jetbrains.com/idea/download/）

5.2 修改源码中的配置

使用 VS Code（或者 Idea）打开 OpenLive-Web 源码文件夹，重命名文件夹中的“.env.example”文件为“.env”

然后编辑这个“.env”文件的内容：

在这个文件中，有两个配置项：

• REACT_APP_AGORA_APP_ID 的值设为从声网控制台复制过来的“APP ID”；

• REACT_APP_AGORA_APP_TOKEN 的值设为“临时 Token”。

因为示例代码使用的是写死到配置文件中的临时 Token，所以控制台中的“App 证书”值暂时没有用到。

在生产环境中，使用的是业务服务端动态生成的 Token，在生成和验证的过程中，需要用到“App 证书”值。

5.3 启动 Node.js 项目

npm 是 Node.js 的包管理器，在 OpenLive-Web 源码所在目录下，执行 npm install 命令，可以安装项目所需要的所有依赖包。

然后，执行 npm run dev 命令，启动 Web 项目。

项目启动成功后，本机浏览器将打开一个新页面：http://localhost:3000/#/，基于浏览器的 Web 客户端已成功打开。

5.4 进入直播间

选择身份为“host”以启用摄像头和麦克风，然后填入在声网控制台创建的频道名“ch1”,点击“Start Live Streaming”按钮，即可进入直播间。

如果在局域网内另外一台电脑上用浏览器访问这个 Web 站点，或者采用同样的源码和配置启动 Web 项目，则可以用同样的方式，加入到 ch1 这个测试直播间中，以画中画的形式，达到实时音视频互动的效果。

6. 安卓客户端的运行示例

6.1 环境准备

为编译执行首先需要下载并参考官方安装说明，安装 Android Studio 集成开发环境。

6.2 修改源码中的配置

Android Studio 安装成功后，打开 OpenLive-Android 源码文件夹，修改/res/values 目录中的 strings_config.xml 文件，填入测试用的 APP ID 和临时 Token 值：

6.3 创建虚拟安卓设备

从 Android Studio 的 Tools 菜单中，打开“AVD Manager”，这是虚拟安卓设备的管理界面。如果还没有虚拟设备，可以通过“Create Virtual Device”按钮创建一个新的设备。

如果是创建新设备，需要选择设备种类，具体型号，然后点击“Next”按钮。

然后选择 Android 系统的版本为最新版 11.0，API 版本为 30，继续点击 Next

为了让虚拟设备可以使用本机的摄像头，需要改一下高级设计，点击“Show Advance Settings”按钮：

打开高级设置后，可以看到 Camera 设置，将前置摄像头 Front 以及后置摄像头 Back 都改为“Webcam0”，在虚拟设备中启用本机的物理摄像头。

在 AVD Manager 的列表中，将至少有一个可用的虚拟手机设备。

6.4 在虚拟安卓设备上启动应用

在 Android Studio 中选择刚才创建的虚拟设备，并点击“启动 APP”。

在虚拟设备中启动 APP 后，输入频道名 ch1,点击“开始直播”按钮，选择“我是主播”，进入直播间。

可以看到本机的摄像头的实时视频画面：

6.5 和 Web 客户端实时交互

在另一台电脑上，本地启动 Web 项目或者用浏览器打开已启动的 Web 项目地址，输入 ch1 测试频道名加入到直播间中。

此时可以看到，虚拟安卓客户端的画面分成了上下两部分，两个客户端实现了实时音视频互动。

7. 动态频道及访问 Token 的创建

示例代码中，客户端加入到特定频道名所需的访问 Token，是写死到源码的配置文件中的。

在生产环境中，应创建一个服务端应用，为不同的频道名和用户创建不同的访问 Token，并返给客户端使用。其大致流程如下：

服务端如何生成 Key，声网也提供了各种语言版本的实现代码, 以JAVA代码实现为例：

package io.agora.sample;
import io.agora.media.RtcTokenBuilder;import io.agora.media.RtcTokenBuilder.Role;
public class RtcTokenBuilderSample {    static String appId = "970CA35de60c44645bbae8a215061b33";    static String appCertificate = "5CFd2fd1755d40ecb72977518be15d3b";    static String channelName = "7d72365eb983485397e3e3f9d460bdda";    static String userAccount = "2082341273";    static int uid = 2082341273;    static int expirationTimeInSeconds = 3600; 
    public static void main(String[] args) throws Exception {        RtcTokenBuilder token = new RtcTokenBuilder();        int timestamp = (int)(System.currentTimeMillis() / 1000 + expirationTimeInSeconds);        String result = token.buildTokenWithUserAccount(appId, appCertificate,               channelName, userAccount, Role.Role_Publisher, timestamp);        System.out.println(result);              result = token.buildTokenWithUid(appId, appCertificate,              channelName, uid, Role.Role_Publisher, timestamp);        System.out.println(result);    }}

可以看到，动态的访问 Token 由以下入参生成，可确保动态性、唯一性和安全性：

• APP ID（业务应用在声网平台创建的相应项目的唯一标识）

• APP 证书（声网平台提供的一个特殊的认证用字符串）

• 要加入的直播频道名

• 用户 ID（字符串或者整型数字，唯一标识参与直播的用户）

• 用户角色（决定是否可以发送音视频）

• 当前时间（决定 Token 有效期）

对此，声网文档中有更加详细的说明文档：https://docs.agora.io/cn/Interactive%20Broadcast/token_server?platform=All%20Platforms

小结

至此，多平台客户端的互动直播应用示例，已完整呈现。除了访问 Token 的管理，服务端可以不需要一行代码的开发量，核心的音视频后台功能，完全由声网平台提供。

同时，声网所提供的 Open Live 客户端示例代码，完整的集成了 SDK 等所需各项依赖，几乎可以一键启动，参考价值很高。

因此可以说，基于声网服务，开发互动直播功能的难度大大降低，为业务应用的快速上线提供了较为可靠的基础。

（完）