( 最近更新时间:2020-07-06 11:30:00 )

# 前置条件

  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 进行摄像头和麦克风的检测

兼容性

平台 Chrome 57+ Safari 12+ Electron 2.0+
Windows 7+ ✔️ N/A ✔️
macOS ✔️ ✔️ ✔️
# 服务开通
  1. 开发者后台 (opens new window)创建应用
  2. 开通音视频服务,开通位置如下图。
# SDK 导入

使用 Web CallLib 时必须引入 IM SDK RTC SDK

代码示例

/* IMLib SDK 压缩版 */
<script src="https://cdn.ronghub.com/RongIMLib-3.0.7.min.js"></script>
/* RTCLib SDK 压缩版 */
<script src="https://cdn.ronghub.com/RongRTC-3.2.6.min.js"></script>
/* CallLib SDK 压缩版 */
<script src="https://cdn.ronghub.com/RongCallLib.3.1.7.1.min.js"></script>
已复制
1
2
3
4
5
6
# 初始化
# 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
# CallLib 初始化

参数说明

参数 类型 必填 说明 最低版本
RongIMLib Object 融云 IM SDK 3.0.0
RongRTC Object 融云 RTC SDK 3.1.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: RongRTC
};
rongCallLib = RongCallLib.init(config);
已复制
1
2
3
4
5
6
# 连接 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
talkType Number 无视频有音频: 0, 有视频有音频: 1, 有视频无音频: 2, 无视频无音频: 3 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

文档是否解决您的问题 ?

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