2024/10/28 16:50:24

实现音视频互动

本文介绍如何集成声网实时互动 Web SDK，通过少量代码从 0 开始实现一个简单的实时互动 App。

开始之前，你需要首先了解音视频实时互动的相关概念和流程。

实时音视频互动主要包含互动直播和视频通话两大场景，你可以按需搭建想要的场景：

互动直播：频道内的用户分为主播和观众，只有主播可以自由发言并且被其他用户看见。
视频通话：频道内的用户不区分主播和观众，所有用户都可以发言并看见彼此。

前提条件

在集成声网实时互动 Web SDK 快速实现音视频互动前，请确保开发环境满足以下要求：

Windows 或 macOS 计算机，需满足以下要求：
- 下载满足声网 Web SDK 兼容性的浏览器。声网强烈推荐使用最新稳定版 Google Chrome 浏览器。
- 具备物理音视频采集设备。
- 可连接到互联网。如果你的网络环境部署了防火墙，请参考应对防火墙限制以正常使用声网服务。
- 搭载 2.2 GHz Intel 第二代 i3/i5/i7 处理器或同等性能的其他处理器。
安装 Node.js 18 或更高版本。

信息
有些框架模板可能需要更高版本的 Node.js 才能工作，如果你的包管理器发出警告，请升级你的 Node.js 版本。
有效的声网账户和声网项目，请参考开通服务，从声网控制台获取以下信息：
- App ID：声网随机生成的字符串，用于识别你的 App。
- 临时 Token：你的 App 客户端加入频道时会使用 Token 对用户进行鉴权。临时 Token 的有效期为 24 小时。
- 频道名称：用于标识频道的字符串。

实现步骤

使用包管理工具快速创建（推荐）
获取 SDK 后手动集成

本节介绍如何使用包管理工具快速搭建你想要实现的音视频互动场景（视频通话或互动直播）。

信息

目前使用包管理工具只能快速搭建开箱即用的视频通话场景。如果你希望体验互动直播场景，请获取 SDK 后手动集成，并在创建客户端时将 mode 设置为 live。

1. 获取快速开始安装包

在使用包管理器创建项目之前，你需要通过以下任意一种途径下载声网实时互动 Web SDK 快速开始安装包资源：

通过 Github 下载：

点击此处获取快速开始安装包资源。
使用 npm：

安装 Node.js 及 npm，然后在终端通过 npm 安装快速开始资源包：
Shell
```
npm i create-agora-app
```

2. 使用包管理器创建项目

在使用包管理器创建项目之前，你需要选择安装以下任一款包管理工具：

你可以通过以下任意一种方式安装声网实时互动 Web SDK 快速开始安装包资源：

使用 yarn
Shell
```
yarn create agora-app
```
使用 pnpm
Shell
```
pnpm create agora-app
```
使用 npm
Shell
```
npm create agora-app@latest
```
使用 bun
Shell
```
bunx create-agora-app
```

你可以在项目创建过程中修改你的项目名称，例如 agora-project。

3. 选择框架模板

在创建过程中，系统会提示你选择一个前端框架模版（包括 vanilla-js、vue-ts、react-ts 或 svelte-ts）。你可以根据你的需求选择相应的框架。

4. 启动项目

系统将根据你的选择生成项目骨架，你需要进入项目目录并安装依赖，然后启动开发服务器。

以下是使用 yarn 创建了一个 react-ts 项目的示例，按照屏幕提示输入命令行来完成相关操作即可：

Shell
Scaffolding project in agora-project...
Done. Now run:

cd agora-project
yarn
yarn dev

此时，开发服务器将启动，你可以在浏览器中访问 http://localhost:5173/ 查看项目运行情况。

信息

在本地服务器 (localhost) 运行 Web 应用仅作为测试用途。部署生产环境时，请确保使用 HTTPS 协议。

5. 查看预期效果

你的浏览器会自动打开以下页面：

打开摄像头和麦克风确认设备没有问题，之后输入 App ID、临时 Token，以及生成临时 Token 时填入的频道名，可以快速实现加入频道、发布音视频流和离开频道等基础音视频互动功能。

你可以参考以下步骤，获取 SDK 后进行手动集成，以搭建你想要实现的音视频互动场景（视频通话或互动直播）。

1. 创建 Web 项目

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

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

2. 集成 SDK

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

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

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

将以下代码复制到 basicEngagement.js 文件中，在你的项目中导入 AgoraRTC 模块。

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

3. 实现用户界面

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

互动直播
视频通话

html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Web SDK Video 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 Video Quickstart</h2>
        <div class="row">
            <div>
                <button type="button" id="host-join">Join as host</button>
                <button type="button" id="audience-join">Join as audience</button>
                <button type="button" id="leave">Leave</button>
            </div>
        </div>
    </body>
</html>

html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Web SDK Video 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 Video Quickstart</h2>
        <div class="row">
            <div>
                <button type="button" id="join">JOIN</button>
                <button type="button" id="leave">LEAVE</button>
            </div>
        </div>
    </body>
</html>

4. 复制项目示例代码

声网实时互动 Web SDK 提供两种模式的音视频互动，分别是视频通话和互动直播。两者创建客户端时设置的 mode 参数不同：

视频通话：

JavaScript
rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

互动直播：

JavaScript
rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });

你可以先复制完整的示例代码到你的项目中，快速体验实时音视频互动的基础功能。

互动直播
视频通话

下图展示了基础的音视频直播的 API 调用。注意图中的方法是对不同的对象调用的。

你可以直接将以下代码复制到 basicEngagement.js 文件中来快速体验互动直播，注意将 appID 、 token 和频道名替换为你自己的 App ID 和临时 Token以及频道名。

实现互动直播示例代码

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

let rtc = {
    // For the local audio and video tracks.
    localAudioTrack: null,
    localVideoTrack: null,
    client: null,
};

let options = {
    // Pass your app ID here.
    appId: "your_app_id",
    // Set the channel name.
    channel: "test",
    // Use a temp token
    token: "your_temp_token",
    // Uid
    uid: 123456,
};

async function startBasicLiveStreaming() {
    rtc.client = AgoraRTC.createClient({mode: "live", codec: "vp8"});

    window.onload = function () {
        document.getElementById("host-join").onclick = async function () {
            rtc.client.setClientRole("host");
            await rtc.client.join(options.appId, options.channel, options.token, options.uid);
            // Create an audio track from the audio sampled by a microphone.
            rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
            // Create a video track from the video captured by a camera.
            rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
            // Publish the local audio and video tracks to the channel.
            await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
            // Dynamically create a container in the form of a DIV element for playing the local video track.
            const localPlayerContainer = document.createElement("div");
            // Specify the ID of the DIV container. You can use the `uid` of the remote user.
            localPlayerContainer.id = options.uid;
            localPlayerContainer.textContent = "Local user " + options.uid;
            localPlayerContainer.style.width = "640px";
            localPlayerContainer.style.height = "480px";
            document.body.append(localPlayerContainer);

            rtc.localVideoTrack.play(localPlayerContainer);

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

        document.getElementById("audience-join").onclick = async function () {
            rtc.client.setClientRole("audience");
            await rtc.client.join(options.appId, options.channel, options.token, options.uid);
            rtc.client.on("user-published", async (user, mediaType) => {
                // Subscribe to a remote user.
                await rtc.client.subscribe(user, mediaType);
                console.log("subscribe success");

                // If the subscribed track is video.
                if (mediaType === "video") {
                    // Get `RemoteVideoTrack` in the `user` object.
                    const remoteVideoTrack = user.videoTrack;
                    // Dynamically create a container in the form of a DIV element for playing the remote video track.
                    const remotePlayerContainer = document.createElement("div");
                    // Specify the ID of the DIV container. You can use the `uid` of the remote user.
                    remotePlayerContainer.id = user.uid.toString();
                    remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
                    remotePlayerContainer.style.width = "640px";
                    remotePlayerContainer.style.height = "480px";
                    document.body.append(remotePlayerContainer);

                    // Play the remote video track.
                    // Pass the DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
                    remoteVideoTrack.play(remotePlayerContainer);
                }

                // If the subscribed track is audio.
                if (mediaType === "audio") {
                    // Get `RemoteAudioTrack` in the `user` object.
                    const remoteAudioTrack = user.audioTrack;
                    // Play the audio track. No need to pass any DOM element.
                    remoteAudioTrack.play();
                }
            });

            rtc.client.on("user-unpublished", user => {
                // Get the dynamically created DIV container.
                const remotePlayerContainer = document.getElementById(user.uid);
                // Destroy the container.
                remotePlayerContainer.remove();
            });
        };

        document.getElementById("leave").onclick = async function () {
            // Close all the local tracks.
            rtc.localAudioTrack.close();
            rtc.localVideoTrack.close();
            // Traverse all remote users.
            rtc.client.remoteUsers.forEach(user => {
                // Destroy the dynamically created DIV containers.
                const playerContainer = document.getElementById(user.uid);
                playerContainer && playerContainer.remove();
            });

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

startBasicLiveStreaming();

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

你可以直接将以下代码复制到 basicEngagement.js 文件中来快速体验视频通话，注意将 appID 和 token 替换为你自己的 App ID 和临时 Token。

实现视频通话示例代码

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

let rtc = {
    localAudioTrack: null,
    localVideoTrack: 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 a video track.
        if (mediaType === "video") {
            // Get the RemoteVideoTrack object in the AgoraRTCRemoteUser object.
            const remoteVideoTrack = user.videoTrack;
            // Dynamically create a container in the form of a DIV element for playing the remote video track.
            const remotePlayerContainer = document.createElement("div");
            // Specify the ID of the DIV container. You can use the uid of the remote user.
            remotePlayerContainer.id = user.uid.toString();
            remotePlayerContainer.textContent = "Remote user " + user.uid.toString();
            remotePlayerContainer.style.width = "640px";
            remotePlayerContainer.style.height = "480px";
            document.body.append(remotePlayerContainer);

            // Play the remote video track.
            // Pass the DIV container and the SDK dynamically creates a player in the container for playing the remote video track.
            remoteVideoTrack.play(remotePlayerContainer);
        }

        // 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. No need to pass any DOM element.
            remoteAudioTrack.play();
        }

        // Listen for the "user-unpublished" event
        rtc.client.on("user-unpublished", user => {
            // Get the dynamically created DIV container.
            const remotePlayerContainer = document.getElementById(user.uid);
            // Destroy the container.
            remotePlayerContainer.remove();
        });
    });

    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();
            // Create a local video track from the video captured by a camera.
            rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
            // Publish the local audio and video tracks to the RTC channel.
            await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
            // Dynamically create a container in the form of a DIV element for playing the local video track.
            const localPlayerContainer = document.createElement("div");
            // Specify the ID of the DIV container. You can use the uid of the local user.
            localPlayerContainer.id = options.uid;
            localPlayerContainer.textContent = "Local user " + options.uid;
            localPlayerContainer.style.width = "640px";
            localPlayerContainer.style.height = "480px";
            document.body.append(localPlayerContainer);

            // Play the local video track.
            // Pass the DIV container and the SDK dynamically creates a player in the container for playing the local video track.
            rtc.localVideoTrack.play(localPlayerContainer);
            console.log("publish success!");
        };

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

            // Traverse all remote users.
            rtc.client.remoteUsers.forEach(user => {
                // Destroy the dynamically created DIV containers.
                const playerContainer = document.getElementById(user.uid);
                playerContainer && playerContainer.remove();
            });

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

startBasicCall();

5. 测试 App

本文使用 webpack 打包项目，使用 webpack-dev-server 运行项目。

参考以下步骤来测试你的 App：

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

JSON
{
    "name": "agora_web_quickstart",
    "version": "1.0.0",
    "description": "",
    "main": "basicEngagement.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: "./basicEngagement.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

信息

在本地服务器 (localhost) 运行 Web 应用仅作为测试用途。部署生产环境时，请确保使用 HTTPS 协议。
由于浏览器的安全策略，声网对除 127.0.0.1 以外的 HTTP 地址作了限制。

6. 查看预期效果

互动直播
视频通话

你的浏览器会自动打开以下页面：

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

你的浏览器会自动打开以下页面：

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

7. 后续步骤

在完成音视频互动后，你可以阅读以下文档进一步了解：

本文的示例使用了临时 Token 加入频道。在正式生产环境中，为保障通信安全，你需要在自己的 App 服务端生成 Token。详见使用 Token 鉴权。
如果你想要实现极速直播场景，可以在互动直播的基础上，通过修改观众端的延时级别为低延时实现。详见实现极速直播。

参考信息

示例项目

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

Web-API-Examples

其它集成方式

使用 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。

尝试以上解决方案后，再次尝试运行项目。

前提条件​

实现步骤​

1. 获取快速开始安装包​

2. 使用包管理器创建项目​

3. 选择框架模板​

4. 启动项目​

5. 查看预期效果​

1. 创建 Web 项目​

2. 集成 SDK​

3. 实现用户界面​

4. 复制项目示例代码​

5. 测试 App​

6. 查看预期效果​

7. 后续步骤​

参考信息​

示例项目​

其它集成方式​

常见问题​

前提条件

实现步骤

1. 获取快速开始安装包

2. 使用包管理器创建项目

3. 选择框架模板

4. 启动项目

5. 查看预期效果

1. 创建 Web 项目

2. 集成 SDK

3. 实现用户界面

4. 复制项目示例代码

5. 测试 App

6. 查看预期效果

7. 后续步骤

参考信息

示例项目

其它集成方式

常见问题