2024/10/28 16:50:24

实现纯语音互动

本文介绍如何集成声网实时互动 SDK，通过少量代码从 0 开始实现一个简单的纯语音互动 App，适用于语音通话场景。

前提条件

开始之前，请按照以下要求准备开发环境：

Windows 或 macOS 计算机，需满足以下要求：
- 下载声网 Web SDK 支持的浏览器。声网强烈推荐使用最新稳定版 Google Chrome 浏览器。
- 具备物理音视频采集设备。
- 可连接到互联网。如果你的网络环境部署了防火墙，请参考应用企业防火墙限制以正常使用声网服务。
- 搭载 2.2 GHz Intel 第二代 i3/i5/i7 处理器或同等性能的其他处理器。
安装 Node.js 及 npm。
有效的声网账户和声网项目，请参考开通服务，从声网控制台获取以下信息：
- App ID：声网随机生成的字符串，用于识别你的 App。
- 临时 Token：你的 App 客户端加入频道时会使用 Token 对用户进行鉴权。临时 Token 的有效期为 24 小时。
- 频道名称：用于标识频道的字符串。

创建 Web 项目

创建一个名为 agora_web_quickstart 的文件夹。一个 Web 客户端项目至少需包含以下文件：

index.html: 用于设计 Web 应用的用户界面。
basicVoiceCall.js: 通过 AgoraRTCClient 实现具体应用逻辑的代码。
package.json: 安装并管理项目依赖。你可以通过命令行进入 agora_web_quickstart 目录并运行 npm init 命令来创建 package.json 文件。

实现步骤

下文介绍通过声网 RTC SDK 在你的 Web 应用中实现语音通话的详细步骤。

1. 集成 SDK

参考以下步骤通过 npm 将声网 Web SDK 集成到你的项目中：

在 package.json 文件的 dependencies 字段中添加 agora-rtc-sdk-ng 及版本号：

JSON
{
    "name": "agora_web_quickstart",
    "version": "1.0.0",
    "description": "",
    "main": "basicVoiceCall.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "agora-rtc-sdk-ng": "latest"
    },
    "author": "",
    "license": "ISC"
}

将以下代码复制到 basicVoiceCall.js 文件中，在你的项目中导入 AgoraRTC 模块。
JavaScript
```
import AgoraRTC from "agora-rtc-sdk-ng"
```

2. 实现用户界面

将以下代码复制到 index.html 实现客户端用户界面：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web SDK Voice Quickstart</title>
    <!--
      This line is used to refer to the bundle.js file packaged by webpack. A sample webpack configuration is shown in the later step of running your app.
    -->
    <script src="./dist/bundle.js"></script>
</head>
<body>
    <h2 class="left-align">Web SDK Voice Quickstart</h2>
        <div class="row">
            <div>
                <button type="button" id="join">JOIN</button>
                <button type="button" id="leave">LEAVE</button>
            </div>
        </div>
</body>
</html>

3. 实现纯语音互动逻辑

参考以下步骤实现纯语音互动的逻辑：

调用 createClient 方法创建 AgoraRTCClient 对象。
调用 join 方法加入一个 RTC 频道，你需要在该方法中传入 App ID 、用户 ID、Token、频道名称。
先调用 createMicrophoneAudioTrack 通过麦克风采集的音频创建本地音频轨道对象，然后调用 publish 方法，将这些本地音频轨道对象当作参数即可将音频发布到频道中。
当一个远端用户加入频道并发布音频轨道时：
1. 监听 client.on("user-published") 事件。当 SDK 触发该事件时，在这个事件回调函数的参数中你可以获取远端用户 AgoraRTCRemoteUser 对象。
2. 调用 subscribe 方法订阅远端用户 AgoraRTCRemoteUser 对象，获取远端用户的远端音频轨道 RemoteAudioTrack 对象。
3. 调用 play 方法播放远端音频轨道。

下图展示了实现音频互动的 API 调用流程。注意图中的方法是对不同的对象调用的。

将以下代码复制到 basicVoiceCall.js 文件中，注意将 appId 和 token 参数替换为你自己的 App ID 和临时 Token。

JavaScript
import AgoraRTC from "agora-rtc-sdk-ng";

let rtc = {
    localAudioTrack: null,
    client: null
};

let options = {
    // Pass your App ID here.
    appId: "Your App ID",
    // Set the channel name.
    channel: "test",
    // Pass your temp token here.
    token: "Your temp token",
    // Set the user ID.
    uid: 123456,
};

async function startBasicCall() {
    // Create an AgoraRTCClient object.
    rtc.client = AgoraRTC.createClient({mode: "rtc", codec: "vp8"});

    // Listen for the "user-published" event, from which you can get an AgoraRTCRemoteUser object.
    rtc.client.on("user-published", async (user, mediaType) => {
        // Subscribe to the remote user when the SDK triggers the "user-published" event
        await rtc.client.subscribe(user, mediaType);
        console.log("subscribe success");

        // If the remote user publishes an audio track.
        if (mediaType === "audio") {
            // Get the RemoteAudioTrack object in the AgoraRTCRemoteUser object.
            const remoteAudioTrack = user.audioTrack;
            // Play the remote audio track.
            remoteAudioTrack.play();
        }
        });
        // Listen for the "user-unpublished" event
        rtc.client.on("user-unpublished", async (user) => {
            // Unsubscribe from the tracks of the remote user.
            await rtc.client.unsubscribe(user);
        });


    window.onload = function () {

        document.getElementById("join").onclick = async function () {
            // Join an RTC channel.
            await rtc.client.join(options.appId, options.channel, options.token, options.uid);
            // Create a local audio track from the audio sampled by a microphone.
            rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
            // Publish the local audio tracks to the RTC channel.
            await rtc.client.publish([rtc.localAudioTrack]);

            console.log("publish success!");
        }

        document.getElementById("leave").onclick = async function () {
            // Destroy the local audio track.
            rtc.localAudioTrack.close();

            // Leave the channel.
            await rtc.client.leave();
        }
    }
}

startBasicCall();

调试 App

本文使用 webpack 打包项目，使用 webpack-dev-server 运行项目。参考以下步骤来测试你的 App：

在 package.json 的 dependencies 中添加 webpack-cli 和 webpack-dev-server 字段中，在 scripts 字段中添加 build 和 start:dev 字段。

JSON
{
    "name": "agora_web_quickstart",
    "version": "1.0.0",
    "description": "",
    "main": "basicVoiceCall.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack --config webpack.config.js",
        "start:dev": "webpack serve --open --config webpack.config.js"
    },
    "dependencies": {
        "agora-rtc-sdk-ng": "latest",
        "webpack": "5.28.0",
        "webpack-dev-server": "3.11.2",
        "webpack-cli": "4.10.0"
    },
    "author": "",
    "license": "ISC"
}

在项目目录中创建一个名为 webpack.config.js 的文件，将以下代码复制到 webpack.config.js 配置 webpack：

JavaScript
const path = require("path");

module.exports = {
    entry: "./basicVoiceCall.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist"),
    },
    devServer: {
        compress: true,
        port: 9000,
    },
};

运行下列命令安装依赖：
Shell
```
npm install
```
运行下列命令通过 webpack 编译项目：
Shell
```
# Use webpack to package the project
npm run build
```
通过 webpack-dev-server 运行项目：
Shell
```
npm run start:dev
```
你的浏览器会自动打开以下页面：

点击 JOIN 加入频道。你还可以邀请朋友克隆 Gitee 示例项目或 Github 示例项目到本地。在浏览器中打开 src/index.html 文件，并输入相同的 App ID、频道名称和临时 Token。你的朋友加入频道后，你们可以听到彼此的声音。

信息

在本地服务器（localhost）运行 Web 应用仅作为测试用途。部署生产环境时，请确保使用 HTTPS 协议。
由于浏览器的安全策略对除 127.0.0.1 以外的 HTTP 地址作了限制，声网 Web SDK 仅支持 HTTPS 协议、 http://localhost（http://127.0.0.1）。请勿使用 HTTP 协议在 http://localhost（http://127.0.0.1）之外访问你的项目。

后续步骤

为保障通信安全，在正式生产环境中，你需要在自己的 App 服务端生成 Token。详见使用 Token 鉴权。

参考信息

示例项目

声网提供了开源的示例项目供你参考，你可以前往下载或查看其中的源代码。

示例项目

其它集成方式

使用 npm 集成 Web SDK 还支持开启 Tree shaking 来减小集成 SDK 后的 App 体积，详见使用 Tree shaking。

除使用 npm 获取 Web SDK 之外，你还可以使用以下方法获取 SDK：

在项目 HTML 文件中，添加如下代码，使用 CDN 方法获取 SDK：

html
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.22.2.js"></script>

下载声网 Web SDK 4.x 版本 SDK 包至本地，将 SDK 包中的 .js 文件保存到项目文件所在的目录下，然后在项目 HTML 文件中添加如下代码：
html
```
<script src="./AgoraRTC_N-4.22.2.js"></script>
```
信息
在以上方法中，SDK 都会在全局导出一个 AgoraRTC 对象，直接访问这个对象即可操作 SDK。

常见问题

为什么在本地运行快速开始项目时会报错 digital envelope routines::unsupported？

本文中的快速开始项目通过 webpack 打包并在本地运行。由于 Node.js 16 及以上版本更改了对 OpenSSL 的依赖（详见 node issue），影响了项目中本地开发环境的依赖（详见 webpack issue），运行项目会发生错误。解决方案如下：

（推荐）运行如下命令，设置临时的环境变量：
Shell
```
export NODE_OPTIONS=--openssl-legacy-provider
```
暂时换用低版本的 Node.js。

然后再次尝试运行项目。

前提条件​

创建 Web 项目​

实现步骤​

1. 集成 SDK​

2. 实现用户界面​

3. 实现纯语音互动逻辑​

调试 App​

后续步骤​

参考信息​

示例项目​

其它集成方式​

常见问题​

前提条件

创建 Web 项目

实现步骤

1. 集成 SDK

2. 实现用户界面

3. 实现纯语音互动逻辑

调试 App

后续步骤

参考信息

示例项目

其它集成方式

常见问题