@tencentcloud/tiw NPM

腾讯云互动白板 JSSDK

腾讯云互动白板（Tencent Interactive Whiteboard，TIW）提供整套完备的多人实时白板互动服务，打破线上教学中师生信息传递障碍，拥有比面授教学板书更丰富、直观和多样的功能。包含的功能有互动涂鸦、涂鸦轨迹同步、文档演示同步、文档共享、媒体共享、文档转码、白板与音视频实时同步录制、回放等功能。具备灵活易用、扩展性强的优点，帮助用户高度还原线下面授教学的互动体验，显著提升线上教学质量。

安装

使用npm安装JSSDK：

npm install @tencentcloud/tiw

使用方法

在你的项目中引入JSSDK

import TEduBoard from '@tencentcloud/tiw';

创建白板控制器

const initParams = {
  id: domId, // dom节点id
  classId: classId, // 课堂 ID，32位整型，取值范围[1, 4294967294]
  sdkAppId: sdkAppId, // 整数
  userId: userId, // 字符串
  userSig: userSig, // 字符串
};

const teduBoard = new TEduBoard(initParams);

监听白板关键事件

// 监听白板错误事件
teduBoard.on(TEduBoard.EVENT.TEB_ERROR, (code, msg) => {
  console.log('error:', code, msg);
});

// 监听白板告警事件
teduBoard.on(TEduBoard.EVENT.TEB_WARNING, (code, msg) => {
  console.log('warning:', code, msg)
});

4.白板数据同步

白板在使用过程中，需要在不同的用户之间进行数据同步（涂鸦数据等），SDK 默认使用 IMSDK 作为信令通道，您需要自行实现 IMSDK 的初始化、登录、加入群组操作，确保白板初始化时，IMSDK 已处于所指定的群组内。监听事件 TEduBoard.EVENT.TEB_SYNCDATA

因为 TIM 消息有限频，请将白板消息的优先级设置为最高，以保证白板信令消息不会被丢弃。

// 1. 监听操作白板参数的数据，并将回调的数据通过 im 发送到接收者
teduBoard.on(TEduBoard.EVENT.TEB_SYNCDATA, data => {
  let message = this.tim.createCustomMessage({
    to: '课堂号',
    conversationType: window.TIM.TYPES.CONV_GROUP,
    priority: TIM.TYPES.MSG_PRIORITY_HIGH,  // 因为im消息有限频，白板消息的优先级调整为最高
    payload: {
      data: JSON.stringify(data), 
      description: '',
      extension: 'TXWhiteBoardExt' // 固定写法，各端会以extension: 'TXWhiteBoardExt'为标志作为白板信令
    }
  })
  this.tim.sendMessage(message).then(() => {
    // 同步成功
  }, () => {
    // 同步失败
  });
});

将收到的数据添加到白板中 addSyncData

// 2. 接收者通过监听 im 消息回调，将收到的数据添加到白板中
this.tim.on(window.TIM.EVENT.MESSAGE_RECEIVED, () => {
  let messages = event.data;
  messages.forEach((message) => {
    // 群组消息
    if (message.conversationType === window.TIM.TYPES.CONV_GROUP) {
      if (message.to === '课堂号') { // 如果是当前课堂，这里需要注意一定只能接受当前课堂群组的信令。如果用户加入多个im群组，恰巧这几个群组也在上课，白板信令则会多个课堂错乱，引发互动白板不能同步的异常行为。
        let elements = message.getElements();
        if (elements.length) {
          elements.forEach((element) => {
            if (element.type === 'TIMCustomElem') {
              if (element.content.extension === 'TXWhiteBoardExt') {
                if (message.from != this.userId) { // 过滤自己本人的操作信令
                  teduBoard.addSyncData(JSON.parse(element.content.data));
                }
              }
            }
          });
        }
      } else {
        // 其他群组消息忽略
      }
    }
  });
}, this)