• 前置条件
  • 服务开通
  • SDK 导入
  • 初始化
    • IM 初始化
    • RTC SDK 实例化
  • 连接 IM

前置条件

1. Web 站点必须为 localhost 或 https。
2. 暂不支持移动端浏览器。
3. 必须成功连接 IM 后, 才可执行其他操作。
4. Web RTC SDK 3.0.0 以下对应音视频 2.0 引擎, 3.0.0 及以上对应音视频 3.0 引擎, 2.0 和 3.0 引擎不互通。
5. RTC SDK 强依赖 IM SDK，使用 RTC SDK 前必须引入 IM SDK。
6. 单个房间内最多 9 人同时进行视频通话。
7. 单个房间内最多 20 人同时进行音频通话。

摄像头麦克风检查

音视频服务需保证设备自带本地摄像头和麦克风, 您可使用以下 Demo 进行摄像头和麦克风的检测。

摄像头检测: https://webrtc.github.io/samples/src/content/getusermedia/gum/ (opens new window)

麦克风检测: https://webrtc.github.io/samples/src/content/getusermedia/audio/ (opens new window)

兼容性

平台	Chrome 57+	Safari 12+	Electron 2.0+
Windows 7+	✔️	N/A	✔️
macOS	✔️	✔️	✔️

服务开通

1. 在 开发者后台 (opens new window)创建应用
2. 开通音视频服务，开通位置如下图。

SDK 导入

<!-- 未压缩版 -->
<script src="https://cdn.ronghub.com/RongIMLib-2.5.9.js"></script>
<!-- 压缩版 -->
<script src="https://cdn.ronghub.com/RongRTC-3.2.4.min.js"></script>
已复制

初始化

IM 初始化

使用 Web RTC SDK 时需要先对 IM 进行初始化在初始化 RTC SDK。IM 初始化详细说明请参照 IM 初始化 文档

代码示例

// appKey 可在融云开发者后台获取
RongIMLib.RongIMClient.init('appKey'); 
// 连接状态监听器  
RongIMClient.setConnectionStatusListener({
  onChanged: function (status) {
    // status 标识当前连接状态  
    console.log(status);
  }
});
// 消息监听器 
RongIMClient.setOnReceiveMessageListener({
  onReceived: function (message) {
    console.log(message);
  }
});
已复制

RTC SDK 实例化

以下 RongRTC 实例 简称 rongRTC

1. 实例化后需设置事件监听器，请参考各模块实例化方法设置事件 Room、Stream。
2. 加入房间成功后等待其他成员加入，成员加入后，当前用户的 room.joined 事件将会触发，成员媒体流到本地后触发 stream.published，按需订阅。
3. 离开房间后并不会销毁 rongRTC。
4. rongRTC.destroy() 触发后销毁实例。
5. rongRTC 销毁后，实例下所有方法均不可调用。

参数说明 option 对象说明:

参数	类型	必填	说明	最低版本
RongIMLib	Object	是	RTC SDK 依赖 IM SDK，使用 RTC 需先引入	3.2.0
bitrate	Object	否	码率设置，默认：最大码率 1000 kbps，最小码率 100 kbps	3.2.0
debug	Boolean	否	调试模式，开启后 SDK 自动向控制台输出日志，默认 false	3.2.0
logger	Function	否	日志收集器，可将 SDK 内部日志收集，分析排查问题	3.2.0
created	Function	否	RongRTC 实例已被创建	3.2.0
mounted	Function	否	RongRTC 各模块已加载完成且当前成员加入房间成功，可开始后续业务	3.2.0
destroyed	Function	否	实例被销毁	3.2.0
error	Function	否	RongRTC 全局错误捕获事件，如：网络断开、IM SDK 不可用等	3.2.0
mode	number	否	音视频模式，默认会议模式音视频，枚举值 RongRTC.Mode.RTC	3.2.0
liveType	number	否	直播类型，默认为音视频直播模式，枚举值 RongRTC.LiveType.AUDIO_AND_VIDEO	3.2.0
liveRole	number	否	直播角色，默认为主播模式，枚举值 RongRTC.ROLE.ANCHOR	3.2.0

MODE 音视频模式说明

名称	值	说明	最低版本
Mode.RTC	0	会议模式音视频	3.2.0
Mode.LIVE	2	直播模式音视频	3.2.0

LiveType 直播类型说明

名称	值	说明	最低版本
LiveType.AUDIO_AND_VIDEO	0	音视频	3.2.0
LiveType.AUDIO	1	音频	3.2.0

ROLE 直播角色说明

名称	值	说明	最低版本
ROLE.ANCHOR	1	主播	3.2.0
ROLE.AUDIENCE	2	观众	3.2.0

代码示例

初始化 RTC 时需要按角色进行初始化

主播初始化：

let rongRTC = new RongRTC({
  RongIMLib: RongIMLib,
  mode: RongRTC.Mode.LIVE,
  liveRole: RongRTC.ROLE.ANCHOR
});
let { Room, Stream, Message, Device, Storage, StreamType} = rongRTC;
// 按需调用各模块实例 API
已复制

观众初始化：

let rongRTC = new RongRTC({
  RongIMLib: RongIMLib,
  mode: RongRTC.Mode.LIVE,
  liveRole: RongRTC.ROLE.AUDIENCE 
});
let { Room, Stream, Message, Device, Storage, StreamType} = rongRTC;
// 按需调用各模块实例 API
已复制

模块列表:

模块	描述
Room	房间模块，提供自己加入、退出房间能力，成员加入退出房间事件
Stream	媒体流模块，提供发布、取消发布、订阅、取消订阅、获取 MeidaStream
Message	消息模块，提供向房间内发送消息能力
Device	设备模块，提供获取当前机器可用音视频设备列表
Storage	存储模块，提供设置、移除、获取数据能力（数据存储时间与房间生命周期一致）
Monitor	通话数据分析模块，用户加入房间后，提供运行状态，设备 CPU 使用率，内存等信息

连接 IM

连接服务器，在整个应用程序只需要调用一次。IM 服务连接详细说明请参照 IM 服务连接 文档。

获取 Token

获取 Token 请前往 融云开发者后台API调用 中生成 Token。

代码示例

//token 可从开发者后台获取 或 Server API 
let token = '';
RongIMClient.connect(token, {
  onSuccess: function(userId) {
    console.log('Connect successfully. ' + userId);
  },
  onTokenIncorrect: function() {
    console.log('token 无效');
  },
  onError: function(errorCode){
    console.log(info);
  }
});
已复制