Web集成互动白板

大约 2 分钟

Web集成互动白板

下载

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 {number} level 权限等级 ,1-3禁止互动,4-8允许互动。默认允许互动
 * @param {number} layout 工具栏位置 ,默认0;0-底部,1-右侧,2-顶部
 * @param {string} ratio 白板画布宽高比。建议"4:3"、"2:1"
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.join({
  roomName: 'roomName',
  password: 'password',
  userName: 'userName',
  level: 4,
  layout:0,
  ratio:"2:1",
  token: 'token',
  suc: (res) => {
    res.whiteBoardUrl; 为白板房间地址
  },
  error: () => {},
})

2. 通过单独api去创建、加入

a. 创建白板 (WDSdk.create)

/**
 * @param {string} roomName 房间名
 * @param {string} password 房间密码
 * @param {string} userName im用户名
 * @param {number} level 权限等级 ,1-3禁止互动,4-8允许互动。默认允许互动
 * @param {number} layout 工具栏位置 ,默认0;0-底部,1-右侧,2-顶部
 * @param {string} ratio 白板画布宽高比。建议"4:3"、"2:1"
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.create({
  userName: 'userName',
  roomName: 'roomName',
  level: 4,
  layout:0,
  ratio:"2:1",
  password: 'password',
  token: 'token',
  suc: (res) => {
    window.location = res.whiteBoardUrl;
  },
  error: () => {}
});

b. 加入白板,可支持两种方式加入白板:

  • joinByRoomId :通过已经创建的房间ID加入;
  • 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} userName im用户名
 * @param {string} roomId 房间id
 * @param {number} leval 4-8允许互动/1-3禁止互动
 * @param {arr} members 操作的权限用户名数组,当isAll为true,此参数不生效,所以设置此参数时需设置isAll=false
 * @param {bloon} isAll ture时操作对象为房间所有成员,默认为true
 * @param {string} token im登录token
 * @param {function} suc 成功的回调
 * @param {function} error 失败的回调
 */
WDSdk.oprateAuthority({
   userName: "username",
   roomId: "roomId",
   leval: 4, 
   members:[],
   isAll: true,
   token: "token",
   suc: function(res){},
   err: function(err){}
})

4. 销毁白板

/**
 * @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);
  }
});