本文介绍如何通过少量代码集成声网音频 SDK 并调用 API,在你的 Web 应用中实现语音通话。
你需要满足以下前提条件:
创建一个名为 agora_web_quickstart
的文件夹。一个 Web 客户端项目至少需包含以下文件:
index.html
: 用于设计 Web 应用的用户界面。basicVoiceCall.js
: 通过 AgoraRTCClient
实现具体应用逻辑的代码。package.json
: 安装并管理项目依赖。你可以通过命令行进入 agora_web_quickstart
目录并运行 npm init
命令来创建 package.json
文件。下文介绍通过声网音频 SDK 在你的 Web 应用中实现语音通话的详细步骤。
参考以下步骤通过 npm 将声网 Web SDK 集成到你的项目中:
在 package.json
文件的 dependencies
字段中添加 agora-rtc-sdk-ng
及版本号:
{
"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
模块。
import AgoraRTC from "agora-rtc-sdk-ng"
将以下代码复制到 index.html
实现客户端用户界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>声网 Voice 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">声网 Voice 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>
参考以下步骤实现语音通话的逻辑:
AgoraRTCClient
对象。AgoraRTCRemoteUser
对象 。AgoraRTCRemoteUser
对象,获取远端用户的远端音频轨道 RemoteAudioTrack
对象。play
方法播放远端音频轨道。下图展示了基础的一对一语音通话的 API 调用。注意图中的方法是对不同的对象调用的。
将以下代码复制到 basicVoiceCall.js
文件中,注意将 appID
和 token
替换为你自己的 App ID 和临时 Token。
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()
本文使用 webpack 打包项目,使用 webpack-dev-server
运行项目。
在 package.json
的 dependencies
中添加 webpack-cli
和 webpack-dev-server
字段中,在 scripts
字段中添加 build
和 start:dev
字段。
{
"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:
const path = require("path");
module.exports = {
entry: "./basicVoiceCall.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./dist"),
},
devServer: {
compress: true,
port: 9000,
},
};
运行下列命令安装依赖:
npm install
运行下列命令通过 webpack 编译项目:
# Use webpack to package the project
npm run build
通过 webpack-dev-server 运行项目:
npm run start:dev
你的浏览器会自动打开以下页面:
点击 JOIN 加入频道。你还可以邀请朋友克隆 https://github.com/AgoraIO/API-Examples-Web 项目到本地,在浏览器中打开 Demo/index.html
文件,并输入相同的 App ID、频道名称和临时 Token。你的朋友加入频道后,你们可以听到彼此的声音。
为保障通信安全,在正式生产环境中,你需要在自己的 app 服务端生成 Token。详见使用 Token 鉴权。
声网在 GitHub 上提供一个开源的示例项目供你参考。
除上文介绍的使用 npm 获取 Web SDK 之外,你还可以使用以下方法获取 SDK:
在项目 HTML 文件中,添加如下代码,使用 CDN 方法获取 SDK:
<script src="https://download.agora.io/sdk/release/AgoraRTC_N-4.18.3.js"></script>
下载声网 Web SDK 4.x 版本 SDK 包至本地,将 SDK 包中的 .js
文件保存到项目文件所在的目录下,然后在项目 HTML 文件中添加如下代码:
<script src="./AgoraRTC_N-4.18.3.js"></script>
AgoraRTC
对象,直接访问这个对象即可操作 SDK。1. 为什么在本地运行快速开始项目时会报错 digital envelope routines::unsupported
?
本文中的快速开始项目通过 webpack 打包并在本地运行。由于 Node.js 16 及以上版本更改了对 OpenSSL 的依赖(详见 node issue),影响了项目中本地开发环境的依赖(详见 webpack issue ),运行项目会发生错误。解决方案如下:
export NODE_OPTIONS=--openssl-legacy-provider
然后再次尝试运行项目。