实现音视频会议
融云开发者账户是使用融云 SDK 产品的必要条件。在开始之前,请先前往融云官网注册开发者账户。注册后,控制台将自动为你创建一个应用,默认为开发环境应用,使用国内数据中心。请获取该应用的 App Key,在本教程中使用。
首次使用融云音视频的用户,建议参考文档运行示例项目,以完成开发者账号注册、音视频服务开通等工作。
步骤 1:服务开通
您在融云创建的应用默认不会启用音视频服务。在使用融云提供的任何音视频服务前,您需要前往控制台,为应用开通音视频服务。
具体步骤请参阅开通音视频服务。
服务开通、关闭等设置完成后 15 分钟后生效。
步骤 2:SDK 导入
RTCLib 相关业务依赖 IMLib 作为信令通道。因此,开发音视频会议必须安装融云音视频核心能力库 RTCLib,即时通讯能力库 IMLib。
安装 IMLib
推荐使用 IMLib 5.X。您也可以使用 2.x 或 4.x 的 Adapter SDK。
# 安装 RongIMLib v5
npm install @rongcloud/engine@latest @rongcloud/imlib-next --save
@rongcloud/engine | |
@rongcloud/imlib-next@latest |
安装 RTCLib
# 安装 RTCLib
npm install @rongcloud/plugin-rtc --save
@rongcloud/plugin-rtc |
上述步骤仅简要说明安装方法,详见安装 RTCLib SDK。
步骤 3:初始化
您需要先初始化 IMLib,再初始化 RTCLib。
初始化 IMLib
RTCLib 是基于 IMLib 的插件机制所实现的插件。因此需要先初始化 IMLib。推荐使用 IMLib 5.X。
以下示例基于 IMLib 5.X。使用 Typescript 进行编码,便于开发者更好的理解相关值的类型信息。
import * as RongIMLib from '@rongcloud/imlib-next'
import { installer, RCRTCCode } from '@rongcloud/plugin-rtc'
// 初始化 IM
RongIMLib.init({
appkey: '<Your-Appkey>',
});
/**
* 监听消息通知
*/
const Events = RongIMLib.Events;
RongIMLib.addEventListener(Events.MESSAGES, (event) => {
console.log('received messages', event.messages);
});
/**
* 监听 IM 连接状态变化
*/
RongIMLib.addEventListener(Events.CONNECTING, () => {
console.log('onConnecting');
});
RongIMLib.addEventListener(Events.CONNECTED, () => {
console.log('onConnected');
});
RongIMLib.addEventListener(Events.DISCONNECT, (status) => {
console.log('连接中断,需要业务层进行重连处理 ->', status)
})
初始化 RTCLib
如果使用 IMLib 5.X,需要调用 installPlugin 方法初始化 RCRTCClient。options
参数的详细说明参见 IRCRTCInitOptions。
以下示例基于 IMLib 5.X。使用 Typescript 进行编码,便于开发者更好的理解相关值的类型信息。
// 初始化 RCRTCClient,初始化过程需要在建立连接之前
const rtcClient = RongIMLib.installPlugin(installer, {
/**
* 自定义 MediaServer Url,公有云用户无需关注
* @description
* 1. 仅当 `location.hostname` 为 `localhost` 时,`http` 协议地址有效,否则必须使用 `https` 协议地址
* 2. 当该值有效时,将不再从 IMLib 导航数据中获取 mediaServer 地址
*/
mediaServer?: string,
/**
* 输出日志等级,生产环境默认使用 WARN,开发环境默认使用 DEBUG
* @description
* * 4 - DEBUG
* * 3 - INFO
* * 2 - WARN
* * 1 - ERROR
*/
logLevel?: LogLevel
/**
* 与 MediaServer 的 http 请求超时时间,单位为毫秒,默认值为 `5000`,有效值 `5000-30000`。
* 优先级:用户配置 > 导航配置 > 默认时间。
*/
timeout?: number,
/**
* 房间 Ping 间隔时长,默认 `10000` ms,有效值 `3000`-`10000`
*/
pingGap?: number,
/**
* 内置 CDN 观看地址直播拉流协议,默认为 RCInnerCDNPullKind.FLV
*/
pullInnerCDNProtocol?: RCInnerCDNPullKind
/**
* 内置 CDN 观看地址是否使用 https,默认为 RCInnerCDNPullIsHttps.HTTPS
*/
pullInnerCDNUseHttps?: RCInnerCDNPullIsHttps
})
上述步骤仅简要说明初始化方法。详细说明请参阅初始化。
步骤 4:连接融云
音视频用户之间的信令传输依赖于融云的即时通信(IM)服务。应用客户端成功连接到融云服务器后,才能使用融云即时通讯 SDK 进行信令传输。
连接时融云服务端必须传入 Token 参数。Token 是与用户 ID 对应的身份验证令牌,是应用客户端用户在融云的唯一身份标识。融云服务端在收到客户端发起的连接请求后,会根据连接请求里携带的用户身份验证令牌(Token 参数),判断是否允许用户连接。
在实际业务运行过程中,应用客户端需要通过应用的服务端向融云服务端申请取得 Token,具体方法可参考 Server API 获取 Token。
如果仅希望快速体验和测试,您可以直接从融云控制台获取一个用户 Token。具体操作请参见运行示例项目。
以下示例使用 Typescript 进行编码,便于开发者更好的理解相关值的类型信息。
import * as RongIMLib from '@rongcloud/imlib-next'
import { installer, RCRTCCode } from '@rongcloud/plugin-rtc'
// 建立 IM 连接
RongIMLib.connect('<Your-Token>').then((user) => {
console.log('connect success', user.data.userId);
})
.catch((error) => {
console.log(`连接失败: ${error}`);
});
步骤 5: 加入房间
RTCLib 初始化后,可获取到 RTC 客户端实例。调用 joinRTCRoom 方法可加入 RTC 房间。
以下示例中 rtcClient
表示 RTC 客户端实例。加入房间成功后,会返回 RCRTCRoom 房间实例、房间内其他用户 ID,以及房间内已发布的资源。
// 加入普通音视频房间,从 5.0.7 开始增加返回 `tracks` 与 `userIds`
// * userIds - 当前已加入房间的远端人员列表
// * tracks - 当前已发布至房间内的远端资源列表
const { code, room, userIds, tracks: remoteTracks } = await rtcClient.joinRTCRoom('roomId')
// 若加入失败,则 room、userIds、tracks 值为 undefined
if (code !== RCRTCCode.SUCCESS) {
console.log('join living room failed:', code)
return
}