实现音视频互动

本文介绍如何集成声网实时互动 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 应用的用户界面。
basicVideoCall.js: 通过 AgoraRTCClient 实现具体应用逻辑的代码。
package.json: 安装并管理项目依赖。你可以通过命令行进入 agora_web_quickstart 目录并运行 npm init 命令来创建 package.json 文件。

实现流程

下文介绍通过声网实时互动 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": "basicVideoCall.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "dependencies": {
        "agora-rtc-sdk-ng": "latest"
    },
    "author": "",
    "license": "ISC"
}

将以下代码复制到 basicVideoCall.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>Video Web SDK 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">Video Web SDK 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 通过麦克风采集的音频创建本地音频轨道对象，调用 createCameraVideoTrack 通过摄像头采集的视频创建本地视频轨道对象；然后调用 publish 方法，将这些本地音视频轨道对象当作参数即可将音视频发布到频道中。
当一个远端用户加入频道并发布音视频轨道时：
1. 监听 client.on("user-published") 事件。当 SDK 触发该事件时，在这个事件回调函数的参数中你可以获取远端用户 AgoraRTCRemoteUser 对象。
2. 调用 subscribe 方法订阅远端用户 AgoraRTCRemoteUser 对象，获取远端用户的远端音频轨道 RemoteAudioTrack 和远端视频轨道 RemoteVideoTrack 对象。
3. 调用 play 方法播放远端音视频轨道。

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

将以下代码复制到 basicVideoCall.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();

运行项目

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

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

JSON
{
    "name": "agora_web_quickstart",
    "version": "1.0.0",
    "description": "",
    "main": "basicVideoCall.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: "./basicVideoCall.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 加入频道。你还可以邀请朋友克隆 https://github.com/AgoraIO/API-Examples-Web 项目到本地，在浏览器中打开 Demo/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 鉴权。

实现音视频互动

前提条件

创建 Web 项目

实现流程

1. 集成 SDK

2. 实现用户界面

3. 实现音视频通话逻辑

运行项目

后续步骤

更多信息

示例项目

其它集成方式

常见问题

前提条件​

创建 Web 项目​

实现流程​

1. 集成 SDK​

2. 实现用户界面​

3. 实现音视频通话逻辑​

运行项目​

后续步骤​

更多信息​

示例项目​

其它集成方式​

常见问题​

前提条件

创建 Web 项目

实现流程

1. 集成 SDK

2. 实现用户界面

3. 实现音视频通话逻辑

运行项目

后续步骤

更多信息

示例项目

其它集成方式

常见问题