The content of this page has been automatically translated by AI. If you encounter any problems while reading, you can view the corresponding content in Chinese.
Help & Documentation>Tencent Interactive Whiteboard>Quick Start>Integrating SDK>Web

Web

Last updated: 2024-12-19 17:37:25

On this page:

Integrating SDK

This document describes how to quickly integrate the Tencent Cloud TEduBoard SDK into your project.

Supported Platforms

OS/Platform
Browser/WebView
Version Requirement
Remarks
Windows
Chrome
50+
Win7+
Windows
Firefox
50+
Win7+
Mac
Chrome
50+
-
Mac
Safari
8+
-
Mac
Firefox
50+
-
iOS
-
System Version 8.1+
-
Android
-
System Version 4.2+
We recommend using Chrome browser, WeChat browser, Mobile QQ browser

Integrate TEduBoard SDK

You only need to add the following code to your web page:
<!-- axios SDK -->
<script src="https://res.qcloudtiw.com/board/third/axios/axios.min.js"></script>
<!-- COS SDK -->
<script src="https://res.qcloudtiw.com/board/third/cos/5.1.0/cos.min.js"></script>
<!-- TEduBoard SDK -->
<script src="https://res.qcloudtiw.com/board/2.8.7/TEduBoard.min.js"></script>
If you need to add a video file, also add the following code:
<link href="https://res.qcloudtiw.com/board/third/videojs/1.0.0/video-js.min.css" rel="stylesheet">
<script src="https://res.qcloudtiw.com/board/third/videojs/1.0.0/video.min.js"></script>
Currently, the interactive whiteboard relies on axios and cos. Please use the script:src method to load them. This ensures global access to axios and cos. Import methods are not supported.

Using TEduBoard SDK

1. Create whiteboard controller
var initParams = {
  id: domId, // DOM Node ID
  classId: classId, // Classroom ID, 32-bit integer, value range [1, 4294967294]
  sdkAppId: sdkAppId, // Integer
  userId: userId, // String
  userSig: userSig, // String
};
var teduBoard = new TEduBoard(initParams);
2. Listening to whiteboard key events
Use on to listen to whiteboard key events
onTEBError Error Details
onTEBWarning Warning Details
// Listen to whiteboard error events
teduBoard.on(TEduBoard.EVENT.TEB_ERROR, (code, msg) => {

});
// Listen to whiteboard warning events
teduBoard.on(TEduBoard.EVENT.TEB_WARNING, (code, msg) => {

});
3. Whiteboard Data Synchronization
During the use of the whiteboard, data synchronization (e.g., graffiti data) needs to be performed among different users. The SDK uses IMSDK as the signaling channel by default. You need to implement the initialization, login, and group joining operations of IMSDK yourself to ensure IMSDK is within the specified group when the whiteboard is initialized.
Listen for events TEduBoard.EVENT.TEB_SYNCDATA
Note
Due to the limited frequency of TIM messages, please set the priority of whiteboard messages to the highest to ensure that whiteboard signaling messages are not discarded.
// 1. Monitor the whiteboard parameter data and send the callback data to the recipient via IM
teduBoard.on(TEduBoard.EVENT.TEB_SYNCDATA, data => {
  let message = this.tim.createCustomMessage({
    to: 'Classroom Number',
    conversationType: window.TIM.TYPES.CONV_GROUP,
    priority: TIM.TYPES.MSG_PRIORITY_HIGH,  // Due to the limited frequency of IM messages, adjust the priority of whiteboard messages to the highest
    payload: {
      data: JSON.stringify(data), 
      description: '',
      extension: 'TXWhiteBoardExt' // Fixed writing, each end will use extension: 'TXWhiteBoardExt' as the whiteboard signaling identifier
    }
  })
  this.tim.sendMessage(message).then(() => {
    // Synchronization Successful
  }, () => {
    // Synchronization Failure
  });
});
Add the received data to the whiteboard addSyncData.
// 2. The receiver receives the data through listening to IM message callbacks and adds it to the whiteboard
this.tim.on(window.TIM.EVENT.MESSAGE_RECEIVED, () => {
  let messages = event.data;
  messages.forEach((message) => {
    // Group Message
    if (message.conversationType === window.TIM.TYPES.CONV_GROUP) {
      if (message.to === 'Classroom Number') { // If it is the current classroom, here it is necessary to ensure that only the signaling of the current classroom group is received. If the user joins multiple IM groups, and these groups happen to be in class, the whiteboard signaling could get confused among multiple classrooms, causing an interactive whiteboard synchronization error.
        let elements = message.getElements();
        if (elements.length) {
          elements.forEach((element) => {
            if (element.type === 'TIMCustomElem') {
              if (element.content.extension === 'TXWhiteBoardExt') {
                if (message.from != this.userId) { // Filter out own operation signaling
                  teduBoard.addSyncData(JSON.parse(element.content.data));
                }
              }
            }
          });
        }
      } else {
        // Ignore other group messages
      }
    }
  });
}, this)


中国站 - English