声网(agora)简单流程
一、获取SDK
SDK:代表软件开发工具包是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、操作系统等创建应用软件的开发工具的集合,一般而言SDK即开发Windows平台下的应用程序所使用的SDK。
- 使用npm获取SDK:npm install agora-rtc-sdk-ng --save
- 使用CDN方法获取SDK:
- 手动下载SDK:下载 Agora Web SDK 4x版本SDK包
二、常用对象
- [AgoraRTCClient](https://docs.agora.io/cn/Video/API Reference/web_ng/interfaces/iagorartcclient.html) 对象,代表一个本地客户端。
AgoraRTCClient
类的方法提供了音视频通话的主要功能,例如加入频道、发布音视频轨道等。 - [LocalTrack](https://docs.agora.io/cn/Video/API Reference/web_ng/interfaces/ilocalaudiotrack.html) 对象,代表本地的音视频轨道对象,用于播放等音视频相关的控制。
- [RemoteTrack](https://docs.agora.io/cn/Video/API Reference/web_ng/interfaces/iremotetrack.html) 对象,远端的音视频轨道对象,用于播放等音视频相关的控制。
三、基本流程
- 根据项目的 App ID 创建一个本地客户端
AgoraRTCClient
对象。 - 通过
AgoraRTCClient.join
加入到一个指定的频道中。 - 通过麦克风采集的音频创建一个
MicrophoneAudioTrack
对象(本地音频轨道对象);通过摄像头采集的视频创建一个CameraVideoTrack
对象(本地视频轨道对象)。 - 通过
AgoraRTCClient.publish
将创建的本地音视频轨道对象发布到频道中。 - 当有其他用户加入频道并且也发布音视频轨道时:
- SDK会触发client.on(“user-published”)事件,在这个事件回调函数的参数中你可以拿到远端用户对象AgoraRTCRemoteUser,表示这个用户刚刚发布了音视频轨道。
- 通过
AgoraRTCClient.subscribe
订阅获取到的AgoraRTCRemoteUser
。 - 订阅完成后,访问
AgoraRTCRemoteUser.audioTrack
和AgoraRTCRemoteUser.videoTrack
即可获取到RemoteAudioTrack
(远端音频轨道对象)和RemoteVideoTrack
(远端视频轨道对象)。
四、简单代码示例
var rtc = {
// 用来放置本地客户端。
client: null,
// 用来放置本地音视频频轨道对象。
localAudioTrack: null,
localVideoTrack: null,
};
var options = {
// 替换成你自己项目的 App ID。
appId: "<YOUR APP ID>",
// 传入目标频道名。
channel: "demo_channel_name",
// 如果你的项目开启了 App 证书进行 Token 鉴权,这里填写生成的 Token 值。
token: null,
};
async function startBasicCall() {
/**
* 接下来的代码写在这里。
*/
// 创建本地客户端
// mode: rtc-通信场景|live-直播场景
rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8"
// 加入频道
/**
* appid: 你的 App ID。详见创建 Agora 项目和获取 App ID。
channel: 频道名,长度在 64 字节以内的字符串。在我们的示例项目中,channel 的值设为 demo_channel_name。
token: (可选)如果你的 Agora 项目开启了 App 证书,你需要在该参数中传入一个 Token,详见使用 Token。
*/
const uid = await rtc.client.join(options.appId, options.channel, options.token, null);
// 通过麦克风采集的音频创建本地音频轨道对象。
rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
// 通过摄像头采集的视频创建本地视频轨道对象。
rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
// 将这些音视频轨道对象发布到频道中。
await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
console.log("publish success!");
// 订阅远端用户
rtc.client.on("user-published", async (user, mediaType) => {
// 开始订阅远端用户。
await rtc.client.subscribe(user, mediaType);
console.log("subscribe success");
// 表示本次订阅的是视频。
if (mediaType === "video") {
// 订阅完成后,从 `user` 中获取远端视频轨道对象。
const remoteVideoTrack = user.videoTrack;
// 动态插入一个 DIV 节点作为播放远端视频轨道的容器。
const playerContainer = document.createElement("div");
// 给这个 DIV 节点指定一个 ID,这里指定的是远端用户的 UID。
playerContainer.id = user.uid.toString();
playerContainer.style.width = "640px";
playerContainer.style.height = "480px";
document.body.append(playerContainer);
// 订阅完成,播放远端音视频。
// 传入 DIV 节点,让 SDK 在这个节点下创建相应的播放器播放远端视频。
remoteVideoTrack.play(playerContainer);
// 也可以只传入该 DIV 节点的 ID。
// remoteVideoTrack.play(playerContainer.id);
// 获取刚刚动态创建的 DIV 节点。
const playerContainer = document.getElementById(user.uid.toString());
// 销毁这个节点。
playerContainer.remove();
}
// 表示本次订阅的是音频。
if (mediaType === "audio") {
// 订阅完成后,从 `user` 中获取远端音频轨道对象。
const remoteAudioTrack = user.audioTrack;
// 播放音频因为不会有画面,不需要提供 DOM 元素的信息。
remoteAudioTrack.play();
}
});
});
}
// 离开频道
/* 1、销毁创建的本地音视频轨道,解除网页对摄像头和麦克风的访问。
2、手动销毁之前动态创建的 DIV 节点。
3、调用 leave 离开频道。
*/
async function leaveCall() {
// 销毁本地音视频轨道。
rtc.localAudioTrack.close();
rtc.localVideoTrack.close();
// 遍历远端用户。
rtc.client.remoteUsers.forEach(user => {
// 销毁动态创建的 DIV 节点。
const playerContainer = document.getElementById(user.uid);
playerContainer && playerContainer.remove();
});
// 离开频道。
await rtc.client.leave();
}
startBasicCall();