互动白板


产品介绍

白板(Easemob-WhiteBoard)服务端基于socket.io,页面基于svg.js开发,所以兼容性参考上述两项即可。SDK提供了创建白板、加入白板、销毁白板三个API。加入到白板中的用户都可以在实时共享的画布上运用提供工具进行元素的绘制、拖动等操作,同时支持通过上传图片文档等作为白板页面的背景。 创建白板后会返回一个白板地址链接,客户端通过直接使用页面、ifram 或者 webview等方式集成。一个白板中含有多个白板页面,加入白板中的用户都可以在实时共享的画布上运用提供工具进行元素的绘制、拖动等操作,支持通过上传图片作为白板的背景。用户可以上传PDF文档、Word、PPT文档进行实时展示和讲解。白板功能是实时音视频通话场景的互动补充,可以满足广泛的业务场景,例如:教育板书、会议内容展示、笔记记录。

白板功能特性:

  • 多客户端支持: 桌面端(基于electron)、Web端;
  • 多人实时互动:可支持多人同时在线互动;
  • 超低时延同步:白板操作低时延同步展示;
  • 文件类型丰富:支持图片、PDF文档、Word、PPT;

白板DEMO体验: Web Demo

产品功能

白板操作有3类,分别为:页面类操作、元素类操作、文档类操作;

表1.白板支持功能

图2.白板操作界面

产品集成

下载

npm install easemob-whiteboards

引入sdk

import whiteboards from 'easemob-whiteboards'

初始化

var WDSdk = new whiteboards({
  appKey: "yourAppKey"
});

APIs

有两种方式创建白板:

1. 通过房间名加入,没有房间创建房间,有房间加入房间
/**
 * @param {string} roomName 房间名
 * @param {string} password 房间密码
 * @param {string} userName im用户名
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.join({
  roomName: 'roomName',
  password: 'password',
  userName: 'userName',
  token: 'token',
  suc: (res) => {
    res.whiteBoardUrl; 为白板房间地址
  },
  error: () => {},
})
2.通过单独api去创建、加入

a.创建白板 (WDSdk.create)

/**
 * @param {string} roomName 房间名
 * @param {string} password 房间密码
 * @param {string} userName im用户名
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.create({
  userName: 'userName',
  roomName: 'roomName',
  password: 'password',
  token: 'token',
  suc: (res) => {
    window.location = res.whiteBoardUrl;
  },
  error: () => {}
});

b.加入白板 加入白板2中方式分别是: 1.joinByRoomId 通过已经创建的房间ID加入; 2.joinByRoomName 通过已经创建的房间名称加入;

/**
 * 1 通过房间ID加入
 * @param {string} roomId 房间Id
 * @param {string} password 房间密码
 * @param {string} userName im用户名
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.joinByRoomId({
  userName: userName,
  roomId: roomId,
  token: "token", 
  suc: function(res){
    window.location = res.whiteBoardUrl;
  },
  error: function(err){
    console.log("err", err);
  }
});
  
/**
 * 2 通过房间名加入
 * @param {string} roomName 房间名
 * @param {string} password 房间密码
 * @param {string} userName im用户名
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.joinByRoomName({
  userName: userName,
  roomName: roomName,
  token: "token",
  suc: function(res){
    window.location = res.whiteBoardUrl;  //同joinByRoomId返回
  },
  error: function(err){
    console.log("err", err);
  }
});
3.销毁白板
/**
 * @param {string} roomId 房间id
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.destroy({
  roomId: roomId,
  token: "token",
  suc: function(res){
    console.log(res);
  },
  error: function(err){
    console.log("err", err);
  }
});