多人互动白板

通过阅读本章节,您将快速了解多人互动白板的相关功能,并且能通过本章节中介绍的流程和接口快速搭建多人互动白板会话。

多人互动白板,顾名思义,参与互动白板的有多人,SDK 提供多人互动白板从创建白板会话、加入会话、会话互动到解散会话整个过程的能力,包括创建多人白板会话、发送白板数据、结束白板等基础能力接口与异常流程控制与回调。 多人互动白板不配套提供语音通道,如果需要,可以与多人音视频通话功能结合使用,方便灵活满足各类音视频与白板相结合的多人场景。

与点对点实时互动白板的流程不同,多人互动白板暂不支持呼叫推送挂断等服务,只提供基本的创建加入离开白板会话接口。

多人互动白板也不配套提供语音通话通道,如果需要,可以与多人会议功能组合使用。多人互动白板的主要流程如下:

多人白板接入流程

sequenceDiagram 发起者-> 发起者: 1. 创建房间: whiteboard.createChannel 发起者-> 发起者: 2. 加入房间: whiteboard.joinChannel 发起者-> 参与者A: 发送IM点对点自定义通知: nim.sendTipMsg 发起者-> 参与者B: 发送IM点对点自定义通知: nim.sendTipMsg 发起者-> 参与者C: 发送IM点对点自定义通知: nim.sendTipMsg 参与者A-> 参与者A: 1. 收到IM自定义通知 参与者A-> 参与者A: 2. 加入房间: whiteboard.joinChannel 参与者B-> 参与者B: 1. 收到IM自定义通知 参与者B-> 参与者B: 2. 加入房间: whiteboard.joinChannel 参与者C-> 参与者C: 1. 收到IM自定义通知 参与者C-> 参与者C: 2. 加入房间: whiteboard.joinChannel

创建多人互动白板

创建一个多人互动白板会话,以会话名标识。创建成功后,本人和其他人才可以使用该会话名加入同一白板会话。

whiteboard.createChannel({
  channelName: 'testChannelName' //必填
  custom: '测试自定义数据' //可选
}).then(function(obj) {
  // 预定房间成功后的上层逻辑操作
  // eg: 初始化房间UI显示
  // eg: 加入房间
})
参数名 类型 说明
channelName string 房间房号,可以任意英文字母和数组的组合
custom string 扩展字段,在通话的创建和加入之间传递自定义的额外信息

加入多人互动白板

创建多人互动白板会话成功后,本人和其他人可以使用创建时的名称,通过该接口加入会话。

const sessionConfig = {
  color: '#aaa',
  width: 200,
  height: 200,
  record: false,
  // 绘画模式
  mode: 'free'
};
whiteboard
  .joinChannel({
    channelName: 'testChannelName', //必填
    type: Netcall.NETCALL_TYPE_VIDEO,
    sessionConfig: sessionConfig
  })
  .then(function(obj) {
    // 加入房间成功后的上层逻辑操作
  });
参数名 类型 说明
channelName string 房间房号,可以任意英文字母和数组的组合
type number 房间通话类型,音频、视频
sessionConfig object 通话配置, 每次通话会伴随着一次通话, 可以对此次通话进行一些配置,具体属性见这里

用户加入多人互动白板通知

whiteboard.on('joinChannel', function(obj) {
  // 通知上层有其他用户加入了房间,上层做相应逻辑和UI处理
  console.log('joinChannel', obj);
});

obj 为通知消息对象

obj 属性 类型 说明
account string 新加入同伴的 accid
channelId number 加入的房间 id

用户离开多人互动白板通知

whiteboard.on('leaveChannel', function(obj) {
  // 通知上层有其他用户离开了会议,上层做相应逻辑和UI处理
  console.log('leaveChannel', obj);
});

obj 为通知消息对象

obj 属性 类型 说明
account string 离开同伴的 accid
channelId number 离开的房间 id
返回类型 方法名 说明
promise whiteboard.stopRemoteStream 停止预览对方视频画面

改变自己在房间中的角色

角色 说明
player 互动者,可以绘图并且发送自己的数据
audience 观众,不能绘图,不能发送自己的数据
// 切换为互动者
whiteboard.changeRoleToPlayer().then(function(obj) {
  console.log('切换成功,当前角色', obj);
});

// 切换为观众
whiteboard.changeRoleToAudience().then(function(obj) {
  console.log('切换成功,当前角色', obj);
});

动态设置绘图颜色

whiteboard.setColor('#aaa');

动态设置绘图模式

// 激光笔模式
whiteboard.setDrawMode('flag');
// 自由绘图模式
whiteboard.setDrawMode('free');

主动同步

whiteboard.syncBegin();

同步请求

whiteboard.syncRequest(account);