基于[声网]开发互动直播应用的技术调研

摘要

为满足业务需求而调研实时互动直播应用服务的实现方式后发现，

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

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

1. 创建声网账号

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

注册过程中有短信验证码和邮箱验证码的相关验证操作，根据网站指示操作即可。尽量一次性完成所有信息的填写和验证，避免出现问题。

由于声网每个月提供有一万分钟的测试流量，在真正确定采购声网服务之前，不需要付费就可以进行技术调研和验证。

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等所需各项依赖，几乎可以一键启动。

因此，在声网的基础上，开发一个完整的互动直播的应用，难度大大降低，为业务快速上线提供了可靠的基础。

（完）