一分钟集成 SDK

本文主要介绍 一分钟集成 SDK, 将 互动白板 SDK 快速集成到您的项目中。

从官网获取 SDK

• 下载最新版 互动白板 Web SDK 软件包
• 将下载下来的软件包中的 互动白板 SDK 文件保存到项目文件所在的目录下
• 在项目文件中,将如下代码添加到 <style> 标签的上一行

<script src="./BRTMSDK.js"></script>

从官网获取 SDK,使用模块导入

下载最新版 互动白板 Web SDK 软件包。 将下载下来的软件包中的 BRTM.js 文件保存到项目文件所在的目录下。

const BRTM = require('BRTM')

import * as BRTM from 'BRTM'

示例代码

const rtmClient = BRTM.createClient({
  appId: 'xxxxxx' // 在控制台创建的appId
});

// 设置当前是否可以使用文档功能
let enableDocument = false

rtmClient
  .on(
    BRTM.Events.Room.USER_KICKED, fromId => {
      this.$message({
        type: 'error',
        message: `已被用户 ${fromId} 踢出房间`
      })
    }
  )
  .on(
    BRTM.Events.Room.CLIENT_BANNED, endType => {
      this.$message({
        type: 'error',
        message: `你已在终端 ${endType} 上登录`
      })
      this.$router.push({
        path: 'join'
      })
    }
  )
  .on(
    BRTM.Events.Room.ERROR, error => {
      console.log('brtm error')
    }
  )
  /**
    * 监听收到广播消息
    */
  .on(BRTM.Events.Room.BROADCAST_MESSAGE_RECEIVED, (data) => {
    console.log('收到广播消息：', data)
  })
  /**
    * 监听收到广播消息
    */
  .on(BRTM.Events.Room.MESSAGE_RECEIVED, (data) => {
    console.log('收到单播消息：', data)
    if (data.messageType === 'logout') {
      this.leaveRoom()
    }
  })

rtmClient.document
  // 文档翻页
  .on('page-changed', (data) => {
    console.log('page-changed')
  })
  // 添加文档
  .on('doc-added', (data) => {
    console.log('doc-added')
  })
  // 文档更新
  .on('doc-updated', (data) => {
    console.log('doc-updated')
  })
  // 文档移除
  .on('doc-removed', (data) => {
    console.log('doc-removed')
  })
  // 添加白板
  .on('page-added', (data) => {
    console.log('page-added')
  })
  // 删除白板
  .on('page-removed', (data) => {
    console.log('page-removed')
  })
  // 画笔相关
  .on('shape-added', (data) => {
    console.log('shape-added')
  })
  .on('shape-appended', (data) => {
    console.log('shape-appended')
  })
  .on('shape-updated', (data) => {
    console.log('shape-updated')
  })
  .on('shape-removed', (data) => {
    console.log('shape-removed')
  })
  // 激光笔
  .on('laser-received', (data) => {
    console.log('laser-received')
  })

rtmClient.user
  .on(
    BRTM.Events.User.USER_IN, user => {
      console.log('brtm user in', user)
    }
  )
  .on(
    BRTM.Events.User.USER_OUT, user => {
      console.log('brtm user out', user)
    }
  )

rtmClient.chat
  .on(
    BRTM.Events.Chat.MESSAGE_RECEIVED, message => {
      console.log('brtm message received', message)
    }
  )
  .on(
    BRTM.Events.Chat.MESSAGE_WHISPER_REVEIVED, message => {
      console.log('brtm message whisper received', message)
    }
  )
  .on(
    BRTM.Events.Chat.MESSAGE_REVOKED, message => {
      console.log('brtm message revoked', message)
    }
  )

rtmClient.init().then(() => {
  // 加入房间
  brtmClient.join(roomId, userId, sig, {
    userInfo: {
      name: name,
      avatar: avatar // 头像链接
    }
  }).then(res => {
    console.log('rtm 加入房间成功')
    enableDocument = rtmClient.getAbilities().document
  }).catch(error => {
    console.log('rtm 加入房间失败')
    console.log(error)
  })
})