导入互动白板 SDK

更新时间: 2022/12/15 09:31:37

如果您需要调用互动白板 SDK 的 API 进行二次开发,请参考本文导入互动白板 SDK。

前提条件

已下载最新的互动白板 SDK

操作步骤

互动白板 SDK 通过 umd 方式打包。

  1. 请在 HTML 页面中拷贝如下代码,直接引入互动白板 SDK 脚本。

    html<!doctype html>
    <html lang="en">
        <head>
            <script src="https://your_web_site_address/WhiteBoardSDK_v${version}.js"></script>
            <script src="https://your_web_site_address/ToolCollection_v${version}.js"></script>
            <script src="https://your_web_site_address/RecordPlayer_v${version}.js"></script>
            <script src="https://your_web_site_address/pptRenderer_v${version}.js"></script>
        </head>
    </html>
    
  2. 通过如下两种方式在代码中使用互动白板 SDK。

    • 导入全局对象

      在代码中直接通过window对象访问互动白板 SDK。

      jswindow.WhiteBoardSDK.getInstance({
          //...
      })
      window.ToolCollection.getInstance({
          //...
      })
      window.RecordPlayer.getInstance({
          //...
      })
      
    • 模块化导入

      如果通过webpack打包。可以将脚本设置为外部依赖,然后在Javascript文件中通过import方式导入。

      js//webpack.config.js
      module.exports = {
          entry: 'xxx',
          externals: {
              RecordPlayer: 'RecordPlayer',
              WhiteBoardSDK: 'WhiteBoardSDK',
              ToolCollection: 'ToolCollection'
          }
      }
      
      //index.js
      import WhiteBoardSDK from 'WhiteBoardSDK'
      WhiteBoardSDK.getInstance({
          //...
      })
      

Token 鉴权

Token 鉴权的处理逻辑如下图所示。

uml diagram

处理逻辑说明如下:

  1. 白板 SDK 通过getAuthInfo接口向应用服务器发起安全认证签名的请求。
  2. 应用服务器根据下文中的 Auth规则自行计算出 Auth 并返回给白板 SDK 。
  3. 客户端加入互动白板房间时,携带已获取的 Auth 信息,白板服务器对该 Auth 进行鉴权。
  4. 如果鉴权通过,则返回房间信息。

建议在客户端缓存 Auth 权限,避免短时间内重复调用接口。

Auth规则

Auth 权限共包括三个字端:

  • curTime: 当前 UTC 时间戳,从1970年1月1日0点0分0秒开始到现在的秒数。
  • nonce: 长度小于 128 位的随机字符串。
  • checksum: 格式为sha1(appSecret + Nonce + curTime),计算 CheckSum 的示例代码请参见接口鉴权
jsgetAuthInfo: () => {
    return axios.getAuth('server_request_url')
        .then(function(response) {
            return {
                checksum: response.data.checksum,
                nonce: response.data.nonce,
                curTime: response.data.curTime
            }
        })
}

API 参考

API API说明
getInstance 初始化互动白板
getAuthInfo 向应用服务器获取Auth 信息
此文档是否对你有帮助?
有帮助
去反馈
  • 前提条件
  • 操作步骤
  • Token 鉴权
  • Auth规则
  • API 参考