# 前置条件

摄像头麦克风检查

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

兼容性

Web RTCLib v5.1.0 版本开始已支持大部分现代浏览器，但由于各浏览器厂商对于 WebRTC 能力实现不同，故 RTCLib 在浏览器中的功能支持情况也有所不同。

其他已知问题说明

• 华为 Android 设备上使用 Chrome 浏览器无法使用视频功能
• Vivo Android 设备内置浏览器不支持 WebRTC 能力，故无法使用 RTCLib
• 小米 Android 设备内置小米浏览器不支持 WebRTC 能力，故无法使用 RTCLib

# 服务开通

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

# SDK 导入

RongIMLib v3 与 v4 版本用户，需要升级 RongIMLib 至 v4.3 以上

使用 CDN 方式集成

<!-- RongIMLib v4.3 -->
<script src="https://cdn.ronghub.com/RongIMLib-4.4.4.prod.js"></script>
<!-- RTCLib v5.0 -->
<script src="https://cdn.ronghub.com/RCRTC-5.1.7.prod.js"></script>
<!-- RCRTCAdapter -->
<script src="https://cdn.ronghub.com/RCRTCAdapter-1.0.7.prod.js"></script>
已复制
复制代码

1
2
3
4
5
6

RongIMLib v2 版本用户，需要升级 RongIMLib 版本至 v2.8 以上

使用 CDN 方式集成

<!-- RongIMLib v2.8 -->
<script src="https://cdn.ronghub.com/RongIMLib-2.9.4.prod.js"></script>
<!-- RTCLib v5.0 -->
<script src="https://cdn.ronghub.com/RCRTC-5.1.7.prod.js"></script>
<!-- RCRTCAdapter -->
<script src="https://cdn.ronghub.com/RCRTCAdapter-1.0.7.prod.js"></script>
已复制
复制代码

1
2
3
4
5
6

# IMLib 初始化

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

代码示例

// appKey 可在融云开发者后台获取
const im = RongIMLib.init({ appkey: '<your-appkey>' })
// 添加事件监听器
im.watch({
  // 连接状态监听
  status(evt) {
    console.log('连接状态码:', evt.status);
  // 消息监听
  message(evt) {
    console.log('收到新消息:', evt.message);
已复制
复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var appKey = '<your-appkey>';
var options = {
  navi:'', // 私有部署配置，公有云用户可忽略
  api:'', // 私有部署配置，公有云用户可忽略
  logLevel: 0
RongIMLib.RongIMClient.init(appkey, null, options);
已复制
复制代码




    

1
2
3
4
5
6
7
8

# RTCLib 初始化

因 RCRTCAdapter 需依赖 RTCLib v5，因此需要先对 RTCLib 进行初始化，细节请参考 RTCLib v5 初始化

// import * as RCRTC from '@rongcloud/plugin-rtc'
// const RCRTC = require('@rongcloud/plugin-rtc')
// RTCLib v5 初始化，RCRTC 为 RTCLib v5 的顶级变量定义
const rtcClient = im.install(RCRTC.installer, { ...params })
已复制
复制代码

1
2
3
4
5

// RTCLib v5 初始化，RCRTC 为 RTCLib v5 的顶级变量定义
const rtcClient = RongIMClient.getInstance().install(RCRTC.installer, { ...params })
已复制
复制代码

1
2

# RCRTCAdapter 初始化

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

主播初始化：

RCRTCAdapter.init({
  client: rtcClient,
  mode: RCRTCAdapter.Mode.LIVE,
  liveRole: RCRTCAdapter.ROLE.ANCHOR
已复制
复制代码

1
2
3
4
5

观众初始化：

RCRTCAdapter.init({
  client: rtcClient,
  mode: RCRTCAdapter.Mode.LIVE,
  liveRole: RCRTCAdapter.ROLE.AUDIENCE
已复制
复制代码

1
2
3
4
5

参数说明: options

参数	类型	必填	说明
client	RCRTCClient	是	RTCLib v5 初始化后获取到的实例，如示例代码中的 rtcClient
bitrate	Object	否	码率设置，默认使用 RTCLib v5 中计算的动态码率
bitrate.min	Number	否	最小码率配置
bitrate.max	Number	否	最大码率配置
debug	Boolean	否	影响 RTCLib v5 中的日志输出等级，不推荐使用。 默认值为 WARN 级别，值为 true 时使用 DEBUG 级别 推荐直接通过 RTCLib v5 初始化时传参 logLevel 指定具体的日志等级
logger	Function	否	用于捕捉 RCRTCAdapter 中的日志信息以排查问题
mode	number	否	音视频模式，默认会议模式音视频，枚举值 RCRTCAdapter.Mode.RTC
liveType	number	否	直播类型，默认为音视频直播模式，枚举值 RCRTCAdapter.LiveType.AUDIO_AND_VIDEO
liveRole	number	否	直播角色，默认为主播模式，枚举值 RCRTCAdapter.ROLE.ANCHOR

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

# 连接 IM

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

获取 Token

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

代码示例

//token 可从开发者后台获取 或 Server API
const token = ''
im.connect({ token }).then(user => {
  console.log('链接成功, 链接用户 id 为: ', user.id);
}).catch(error => {
  console.log('链接失败: ', error.code, error.msg);
});