更新时间: 2021-07-16

由于谷歌官方决定自 Chrome 93 版本开始不再支持 plan-b 协议,因此 RTCLib v3 即将停止维护,请所有 RTCLib v3 及 CallLib 用户尽快迁移至 RCRTCAdapter 桥接版本,迁移方案请查看【产品概述 - 升级说明】章节。
目前所有 RTCLib v3 相关集成文档内容已更新为 RCRTCAdapter 集成文档,新集成用户请优先使用 RTCLib v5.0 并查看相应版本文档。

# 前置条件

  1. Web 站点必须为 http://localhosthttps:// 站点
  2. 移动端浏览器适配测试中,敬请期待
  3. 单个房间内最多 9 人同时进行视频通话。
  4. 单个房间内最多 20 人同时进行音频通话。

摄像头麦克风检查

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

兼容性

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

功能 音频 视频 视频小流 屏幕共享 自定义音视频
平台 浏览器 --- --- --- --- ---
Windows Chrome 57+ 57+ 63+ 72+ 57+
FireFox 56+ 56+ 56+ 66+ 56+
Edge 79+ 79+ 79+ 79+ 79+
Opera 76+ 76+ 76+
QQ 10+ 10+ 10+ 10+
360 12+ 12+ 12+ 12+ 12+
MacOSX Chrome 57+ 57+ 63+ 72+ 57+
Safari 11+ 11+ 11+ 11+
FireFox 56+ 56+ 56+ 66+ 56+
Edge 79+ 79+ 79+ 79+ 79+
Opera 46+ 46+ 46+
QQLite
iOS 14.3+ Safari
Chrome
FireFox
微信内置浏览器 微信 6.5 微信 6.5
Android 6.0+ Chrome 90+ 90+
FireFox 87+ 87+
Opera 62+ 62+
WebView
微信内置浏览器

其他已知问题说明

  • 华为 Android 设备上使用 Chrome 浏览器无法使用视频功能
  • Vivo Android 设备内置浏览器不支持 WebRTC 能力,故无法使用 RTCLib
  • 小米 Android 设备内置小米浏览器不支持 WebRTC 能力,故无法使用 RTCLib
# 服务开通
  1. 开发者后台 (opens new window)创建应用
  2. 开通音视频服务,开通位置如下图。
# SDK 导入
<!-- RongIMLib -->
<script src="https://cdn.ronghub.com/RongIMLib-4.4.4.prod.js"></script>
<!-- RTCLib v5 -->
<script src="https://cdn.ronghub.com/RCRTC-5.1.3.prod.js"></script>
<!-- RCRTCAdapter -->
<script src="https://cdn.ronghub.com/RCRTCAdapter-1.0.6.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
# RTCLib 初始化

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

// import * as RCRTC from '@rongcloud/plugin-rtc'
// const RCRTC = require('@rongcloud/plugin-rtc')

// RCRTC 是 RTCLib v5 的顶级变量定义
const rtcClient = im.install(RCRTC.installer)
已复制
1
2
3
4
5
# 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);
});
已复制
1
2
3
4
5
6
7

# 模块列表

// 按需调用各模块实例 API
const { Room, Stream, Message, Device, Storage, StreamType} = RCRTCAdapter
已复制
1
2
模块 描述
Room 房间模块,提供自己加入、退出房间能力,成员加入退出房间事件
Stream 媒体流模块,提供发布、取消发布、订阅、取消订阅、获取 MeidaStream
Message 消息模块,提供向房间内发送消息能力
Device 设备模块,提供获取当前机器可用音视频设备列表
Storage 存储模块,提供设置、移除、获取数据能力(数据存储时间与房间生命周期一致)
Monitor 通话数据分析模块,用户加入房间后,提供房间内的流数据状态

文档是否解决您的问题 ?

如果遇到产品相关问题,您可 提交工单 寻求帮助