更新时间: 2021-07-16

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

# 前置条件

  1. Web 站点必须为 localhost 或 https
  2. 暂不支持移动端浏览器
  3. 必须成功连接 IM 后, 才可进行 CallLib 通话
  4. Web CallLib 从 3.1.0 开始, 不能与 3.1.0 之前的版本互通
  5. Web CallLib 3.1.0 以下对应音视频 2.0 引擎, 3.1.0 以及 3.1.0 以上对应音视频 3.0 引擎

摄像头麦克风检查

音视频服务需保证设备自带本地摄像头和麦克风, 您可使用以下 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 导入

使用 Web CallLib 时必须引入 IM SDK RTC 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>
<!-- CallLib -->
<script src="https://cdn.ronghub.com/RongCallLib.3.2.1.min.js"></script>
已复制
1
2
3
4
5
6
7
8
# 初始化
# IM 初始化

使用 Web CallLib 时需要先对 IM 进行初始化,再初始化 CallLib。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
# RTC 初始化
// RCRTC 是 RTCLib v5 的顶级变量定义
const rtcClient = im.install(RCRTC.installer)
已复制
1
2
# CallLib 插件安装
// RongCallLib 为 CallLib v3 的顶级变量定义
im.install(RongCallLib.installer)
已复制
1
2
# CallLib 初始化

参数说明

参数 类型 必填 说明 最低版本
RongIMLib Object 融云 IM SDK 3.0.0
RongRTC Object RTCLib v5 初始化后获取到的实例,如示例代码中的 rtcClient 3.2.0
RongRTCAdapter Object RCRTCAdapter 为 RCRTCAdapter 的顶级变量定义 3.2.0
currentUserId String 当前用户 ID 3.1.3 起 currentUserId 非必填 3.0.0
timeout Number 呼叫超时时间, 默认 30000 ms 3.0.0

代码示例

var config = {
    timeout: 20000,
    RongIMLib: RongIMLib,
    RongRTC: rtcClient,
    RongRTCAdapter: RCRTCAdapter
};
rongCallLib = RongCallLib.init(config);
已复制
1
2
3
4
5
6
7
# 连接 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

# 通话监听

# 视频监听

监听 result 参数说明

参数 类型 说明 最低版本
type String 添加: added, 移除: removed, 离开: leave 3.0.0
data Object 视频流, video 节点 3.0.0
isLocal Boolean 是否为本地视频 3.0.0
userId String 用户 id 3.0.0

代码示例

var videoWatcher = function(result) {
  var type = result.type;
  var boxEl = document.getElementById('box');
  if (type === 'added') {
    // 添加音视频节点
    var video = result.data;
    boxEl.appendChild(video);
  } else if (type === 'removed') {
    // 删除对应音视频节点
    var video = result.data;
    boxEl.removeChild(video);
  } else if (type == 'leave') {
    // 音视频结束, 清空所有音视频 UI
  }
};
rongCallLib.videoWatch(videoWatcher);
已复制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 消息监听

commandWatcher 对应消息类型处理可参考 Demo 中的 commandWatcher (opens new window) 处理逻辑

代码示例

var commandWatcher = function(message) {
  var messageType = message.messageType;
  // 根据消息类型做对应处理
};
rongCallLib.commandWatch(commandWatcher);
已复制
1
2
3
4
5

# 发起通话

连接 IM 服务成功后,调用 rongCallLib.call 方法发起通话。查看详细 发起通话文档

代码示例

var params = {
  conversationType: RongIMLib.CONVERSATION_TYPE.PRIVATE,
  targetId: 'userId',
  inviteUserIds:['userId'],
  mediaType: RongCallLib.VoIPMediaType.MEDIA_VEDIO
};
rongCallLib.call(params, function (error) {
  if (error) {
      console.error('发起通话失败', error);
  }
});
已复制
1
2
3
4
5
6
7
8
9
10
11

# 接听通话

rongCallLib.commandWatch 监听中收到 InviteMessage 时,可以调用 rongCallLib.accept 来接听通话。查看详细 接听通话文档

#代码示例 代码示例

// params 中的 message 来自 rongCallLib.commandWatch 监听中收到的 InviteMessage。
var params = {
  conversationType: message.conversationType,
  targetId: message.targetId,
  mediaType: RongCallLib.VoIPMediaType.MEDIA_VEDIO
};
rongCallLib.accept(params, function (error) {
  if (error) {
      console.error('接听通话失败', error);
  }
});
已复制
1
2
3
4
5
6
7
8
9
10
11

# 挂断通话

挂断当前通话时机

  1. 用户主动发起挂断。 挂断通话文档
  2. rongCallLib.commandWatch 监听中收到 HungupMessage 消息,您可以调用 rongCallLib.hungup 来挂断通话

代码示例

var params = {
  conversationType: RongIMLib.CONVERSATION_TYPE.PRIVATE,
  targetId: 'user1'
};
rongCallLib.hungup(params, function(error){
  if (error) {
    console.error('挂断通话失败', error);
  }
});
已复制
1
2
3
4
5
6
7
8
9

文档是否解决您的问题 ?

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