Web & Uniapp Vue2

THMKit SDK API 文档

欢迎使用我们的 SDK，本文档提供了您需要的所有信息来使用我们的 npm SDK。如果您有任何疑问或反馈，请随时联系我们。

安装

您可以通过 npm 安装我们的 SDK：

npm install thmkit --save

使用方法

在您的项目中引入 SDK 并开始使用它：

// main.js 文件中引用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
// thmkit样式
import 'thmkit/packages/lib/common/index.scss'
// 全局申明 THMKit 用于THMKit 实例化后全局调用
Vue.prototype.$THMKit = new Vue()

// 业务组件中进行引用组件及SDK
import { THMKitAssist, THMKitAnswer, THMKit } from 'thmkit'

// 根据应用信息实例化ThMeetingSdk
handleInitTHMKit: async function () {
  try {
    // applyInfo 为业务系统调用THMKit 服务端登录接口后返回
    // 根据应用信息实例化ThMeetingSdk
    this.$THMKit = new THMKit({
      userId: this.applyInfo.userId,
      appKey: this.applyInfo.appKey,
      accessKey: this.applyInfo.accessKey,
      signature: this.applyInfo.signature,
      timestamp: this.applyInfo.timestamp,
      platform: this.applyInfo.platform
    })
    // 登录MST-SDK
    const meetingRes = await this.$THMKit.login({
      userId: this.applyInfo.userId
    })
    // 返回用户信息
    this.userInfo = meetingRes.data
    // 注册相关监听事件
    this.handleMonitorTHMKitSdk()
  } catch (error) {
    this.$message.error(error.msg)
  }
}

API 函数列表

1. `用户登录`

定义：login(parameters)

描述：该函数用于服务的登录授权, 是业务的最开始的函数调用

参数 parameters：

{
    userId: string
}

返回值：

描述：授权 token、用户信息和当前套餐权限信息

{
  "code":  200,
  "msg":  "success",
  "data":  {
    "appId":  1,
    "token":  "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ7XCJhcHB***Npb25JZFwiOlwiMVwiLFwidGltZXN0YW1wXCI6MTcwOTIyMjQwMDAwMCxcInVzZXJUeXBlXCI6MX0iLCJleHAiOjE3MDkyMjI0MDB9.d6NE7g6Jy7j5YydF7lKt-D_FvP0wMMV_PuKvqNAMJxKX__MXctGsDyiEGEJ0e_vVkeRFb1KCqPO39LXhQiswGg",
    "timestamp":  "1709222400000",
    "userId":  "1",
    "nickname":  "wsl-01",
    "avatarUrl":  "https://*.cos.ap-nanjing.myqcloud.com/sys/default_img.png",
    "memberInfo":  {
      "videoResolution":  "1080",
      "maxUserCount":  "0",
      "maximumMeetingDuration":  "0"
    }
  }
}

示例代码：

// 示例代码
const meetingRes = await this.$THMKit.login({
    userId: this.applyInfo.userId
})
// 返回用户信息
this.userInfo = meetingRes.data

2. `用户登出`

定义: loginOut()

描述：该函数用于服务的登出, 退出用户时进行函数调用

参数：-

返回值：-

描述：通过 THMKit.addEventListener('wsClose')监听

示例：

this.$THMKit.addEventListener('wsClose', this.handleWsClose);
handleWsClose(data) {
  console.log('THMKit WebSocket connection closed:', data);
  // Implement your logic here for 'wsClose' event
}

3. `刷新Token`

定义: refreshToken(parameters)

描述：该函数用于接收到 token 即将失效时，进行调用

参数：

{
    userId: string, // 用户的userId
    timestamp: number  // token有效期(时间戳)
}

返回值：

描述：返回值描述

{
  "code":  200,
  "msg":  "success",
  "data": {

  }
}

示例：

// 示例代码
const meetingRes = await this.$THMKit.refreshToken({
  userId: this.applyInfo.userId,
  timestamp: this.applyInfo.timestamp
})
if (meetingRes.code != 200) {
  this.$message.error(meetingRes.msg)
  return false
}
this.userInfo = meetingRes.data

4. `创建会议`

定义: createMeeting(parameters)

描述：该函数用于创建会议； 1、当只填写 meetingName 时，会议开始时间默认为当前时间 2、参数都填写时，可创建未来会议

参数：

{
  meetingName: string, // 会议名称 必填
  startTime: string, // 会议开始时间(时间戳)
  hour: number, // 会议大最时长  minimum: 0 maximum: 23
  minute: number, // 会议大最时长  minimum: 0 maximum: 60
  inviteeUserIds: array // 会议邀请成员 userId 数组
}

返回值：

描述：返回值描述 1、用于加入会议时调用：this.$THMKit.joinMeeting 2、当启用自定义二次邀请时，需要将返回集 data 进行储存

{
  "code":  200,
  "msg":  "success",
  "data": {
    "appId": string,
    "groupId": string,
    "meetingName": string,
    "meetingNo": string,
    "meetingShareH5Url": string,
    "token": string
  }
}

示例：

// 示例代码
handlePromptlyMeeting: async function () {
  if (!this.form.meetingName) {
    this.$message.error('请输入会议名称')
    return false
  }
  const res = await this.THMKitEvent.createMeeting({
    meetingName: this.form.meetingName,
    startTime: '',
    hour: '',
    minute: '',
    inviteeUserIds: []
  })
  if (res.code != 200) {
    this.$message.error(res.msg)
    return false
  }
  this.handleJoinMeeting(res.data)
}
handleJoinMeeting: async function (row) {
  try {
    const [resultMeeting] = await this.$THMKit.joinMeeting(
      {
        ...row
      }
    )
    this.meetingInfo = resultMeeting.data
    this.$set(this.assistProps, 'assistVisible', true) // 进入会议协作
  } catch (error) {
    console.log(error)
    this.$message.error(error.msg)
  }
}

5. `加入会议`

定义: joinMeeting(parameters)

描述：该函数用于根据会议号，进行加入会议

参数：

{
  meetingNo: string // 会议号
}

返回值：

描述：返回值描述用于储存会议信息，当加入成功时，调用显示 THMKitAssist 组件

{
  "code":  200,
  "msg":  "success",
  "data": {
    appId: string,
    duration: string,
    endTime: number,
    groupId: string,
    hour: number,
    inviteeUids: array,
    joinMeetingPeopleUrls: array,
    joinMeetingUserInfoList: array,
    joinTime: number,
    masterAvatarUrl: string,
    masterId: string,
    masterName: string,
    meetingId: string,
    meetingName: string,
    meetingShareH5Url: string,
    minute: number,
    startTime: number,
    status: number,
    token: string
  }
}

示例：

// 示例代码
// 加入会议
handleJoinMeeting: async function (row) {
  try {
    const [resultMeeting] = await this.$THMKit.joinMeeting(
      {
        ...row
      }
    )
    this.meetingInfo = resultMeeting.data
    this.$set(this.assistProps, 'assistVisible', true) // 进入会议协作
  } catch (error) {
    console.log(error)
    this.$message.error(error.msg)
  }
}

6. `发起呼叫`

定义: call(array)

描述：该函数用于用户主动发起呼叫其他人员,服务限制不超过 5 人

参数：[userId]

返回值：

描述：返回值描述用于储存会议信息，并呼叫成功时调用显示 THMKitAssist 组件

{
  "code":  200,
  "msg":  "success",
  "data": {
    "appId": string,
    "groupId": string,
    "meetingName": string,
    "meetingNo": string,
    "meetingShareH5Url": string,
    "token": string
  }
}

示例：

// 示例代码
// 发起呼叫
handleCalling: async function (users) {
  try {
    const [resultMeeting] = await this.$THMKit.call(users)
    this.meetingInfo = resultMeeting.data // 获取会议房间信息
    this.$set(this.assistProps, 'assistVisible', true) // 进入会议协作
  } catch (error) {
    this.$message.error(error.msg)
  }
}

7. `邀请加入会议`

定义: invite(parameters)

描述：该函数用于开启自定义二次邀请时，使用

参数：

{
  invites: array // 二次邀请人员id集合
  meetingNo: string // 会议号
  groupId: string //  会议Id：会议信息字段
}

返回值：

描述：此为消息通知无返回值

示例：

// 示例代码
/* vue template*/
<el-dialog title="自定义会议中协作邀请列表" class="selectMemberDialog" :visible.sync="customInviteDialogVisible"
    v-if="customInviteDialogVisible" :modal-append-to-body="false" :destroy-on-close="true"
    :close-on-click-modal="false" :before-close="handleSelectMemberClose">
   /* 自定人员列表 */
    <custom-invite-list ref="customInviteListRef" :userInfo="userInfo" :THMKitEvent="$THMKit" @handleInvite="handleInvite"></custom-invite-list>
</el-dialog>

/* vue script */
// 自定义会议二次邀请
handleInvite: async function (row) {
  this.$THMKit.invite({
    invites: [row.userId],
    meetingNo: this.meetingInfo.meetingNo,
    groupId: this.meetingInfo.groupId
  })
  this.handleSelectMemberClose()
}

 // 关闭自定义会议二次邀请组件
handleSelectMemberClose: function () {
  this.customInviteDialogVisible = false
}

8. `同意邀请`

定义: accept(parameters)

描述：该函数用于自定义接听等组件时，当其他端发起呼叫时，THMKit 监听接收到“THMKit-invite”事，可调用进行同意

参数：

// THMKit-invite 邀请消息中返回 meetingInfo
{
  from: string // 发起邀请人Id
  r: string // 会议号
  g: string // 会议Id
}

返回值：

描述：此为消息通知，无返回值

示例：

// 示例代码
// THMKit invite事件监听回调
this.$THMKit.addEventListener('THMKit-invite', this.handleTHMKitInvite)

// 接受对方邀请事件
handleTHMKitInvite(data) {
  // 储存会议信息
  this.$set(this.answerProps, 'answerOptions', data)
  this.meetingInfo = data.meetingInfo
  // 显示呼叫等组件
  this.$set(this.answerProps, 'answerVisible', true)
}

// 同意邀请
handleAccept: function () {
  const dataContent = JSON.parse(this.answerOptions.dataContent)
  this.THMKitEvent.accept(
    this.answerOptions.from,
    dataContent.r,
    dataContent.g
  )
  this.handleInviterAccept()
  this.handleCloseAnswerContainer()
}

// 同意进行协作
handleInviterAccept: async function () {
  try {
    // 对方同意后，调整用MST业务加入会议接口
    const [resultMeeting] = await this.$THMKit.joinMeeting(
      {
        meetingNo: this.meetingInfo.meetingNo
      }
    )
    // 将当前的会议状态传入ThImAssist 组件
    this.meetingInfo = resultMeeting.data
    this.$set(this.assistProps, 'assistVisible', true) // 进入会议协作
  } catch (error) {
    this.$message.error(error.msg)
  }
}

// 关闭接听等待页面
handleCloseAnswerContainer: function () {
  this.$set(this.answerProps, 'answerVisible', false)
  this.$set(this.answerProps, 'answerOptions', null)
}

9. `拒绝邀请`

定义: reject(parameters)

描述：该函数用于自定义接听等组件时，当其他端发起呼叫时，THMKit 监听接收到“THMKit-invite”事，可调用进行拒绝

参数：

// THMKit-invite 邀请消息中返回 meetingInfo
{
  from: string // 发起邀请人Id
  r: string // 会议号
  g: string // 会议Id
}

返回值：

描述：此为消息通知，无返回值

示例：

// 示例代码
// THMKit invite事件监听回调
this.$THMKit.addEventListener('THMKit-invite', this.handleTHMKitInvite)
// 接受对方邀请事件
handleTHMKitInvite(data) {
  // 储存会议信息
  this.$set(this.answerProps, 'answerOptions', data)
  this.meetingInfo = data.meetingInfo
  // 显示呼叫等组件
  this.$set(this.answerProps, 'answerVisible', true)
}

// 处理拒绝接听
handleReject: function () {
  const dataContent = JSON.parse(this.answerOptions.dataContent)
  this.THMKitEvent.reject(
    this.answerOptions.from,
    dataContent.r,
    dataContent.g
  )
  // 处理关闭接听等待组件
  this.handleCloseAnswerContainer()
}

// 关闭接听等待页面
handleCloseAnswerContainer: function () {
  this.$set(this.answerProps, 'answerVisible', false)
  this.$set(this.answerProps, 'answerOptions', null)
}

10. `获取当前会议人员信息`

定义: getMeetingRoomPsnList()

描述：该函数用于查询当前会议中人员信息

参数：-

返回值：

描述：可用于自定义二次邀请组件中去除已在会议人员

[
    {
      userId: string,
      hasAudio: boolean,
      hasVideo: boolean,
      isMaster: boolean,
      nickname: string
    }
]

示例：

// 示例代码
// 当自定义接听组件时，可用于去除已参与会议人
handleGetUserListData: async function (row) {
   const curList = this.THMKitEvent.getMeetingRoomPsnList()
    // 获取用户列表-此为注册到THMKit服务中的人员列表
    const psnRes = await this.THMKitEvent.getUserList()
    if (psnRes.code != 200) {
      this.$message.error(psnRes.msg)
      return false
    }
    const allList = psnRes.data
    if (allList && curList && allList.length > 0) {
      this.userListData = allList.filter(itemA => !curList.some(itemB => itemB.userId == itemA.userId));
    } else {
      this.userListData = psnRes.data
    }
}

监听事件列表

1. `WebSocket连接打开事件`

定义: addEventListener('wsOpen', function(parameters))

描述：该事件用于开发者监听 websocket 是否正常打开

参数：

function: 回调方法 - 连接打开成功回调方法

示例：

// 示例代码
this.$THMKit.addEventListener('wsOpen', this.handleWsOpen)
 handleWsOpen(data) {
    console.log('APP-WebSocket connection opened:', data)
    // Implement your logic here for 'wsOpen' event
}

2. `WebSocket 心跳事件`

定义: addEventListener('wsHeartbeat', function(parameters))

描述：该事件用于开发者监听 websocket 心跳是否正常，频率为5s

参数：

function: 回调方法 - 接收到心跳回调方法

示例：

// 示例代码
// webSocket heartbeat事件监听回调
this.$THMKit.addEventListener('wsHeartbeat', this.handleWsHeartbeat)
handleWsHeartbeat() {
// console.log('THMKit WebSocket heartbeat received:')
}

3. `WebSocket 关闭事件`

定义: addEventListener('wsClose', function(parameters))

描述：该事件用于开发者监听 websocket 是否关闭

参数：

function: 回调方法 - 接收到关闭回调方法

示例：

// 示例代码
// webSocket close事件监听回调
this.$THMKit.addEventListener('wsClose', this.handleWsClose)
handleWsClose(data) {
  console.log('THMKit WebSocket connection closed:', data)
  // Implement your logic here for 'wsClose' event
}

4. `WebSocket 异常事件`

定义: addEventListener('wsError', function(parameters))

描述：该事件用于开发者监听 websocket 异常

参数：

function: 回调方法 - 接收到异常回调方法

示例：

// 示例代码
// webSocket error事件监听回调
this.$THMKit.addEventListener('wsError', this.handleWsError)
handleWsError(data) {
  console.error('THMKit WebSocket error:', data)
  // Implement your logic here for 'wsError' event
}

5. `THMKit 登录成功事件`

定义: addEventListener('THMKit-login-success', function(parameters))

描述：该事件用于开发者监听 SDK 登录成功

参数：

function: 回调方法 - 接收到异常回调方法

示例：

// 示例代码
// THMKit 登录成功事件监听回调
this.$THMKit.addEventListener(
  'THMKit-login-success',
  this.handleTHMkitLoginSuccess
)
handleTHMkitLoginSuccess(data) {
    console.log('THMKit login success:', data)
}

6. `THMKit 异常事件`

定义: addEventListener('THMKit-error', function(parameters))

描述：该事件用于开发者监听 SDK 异常事件

参数：

function: 回调方法 - 接收到异常回调方法

示例：

// 示例代码
// THMKit error事件监听回调
this.$THMKit.addEventListener('THMKit-error', this.handleTHMKitError)
handleTHMKitError(data) {
  if (data.reason == 'SAME_PLATFORM_ONLINE') {
    // 处理相同客户端登录逻辑，如退出登录/
    this.$message.error('相同客户端登录')
  } else {
    console.log('THMKit Other error:', data)
  }
}

7. `THMKit 邀请事件`

定义: addEventListener('THMKit-invite', function(parameters))

描述：该事件用于开发者监听 SDK 邀请事件

参数：

function: 回调方法 - 接收到邀请回调方法

示例：

// 示例代码
// THMKit invite事件监听回调
this.$THMKit.addEventListener('THMKit-invite', this.handleTHMKitInvite)
// 接受对方邀请事件
handleTHMKitInvite(data) {
  // 储存会议信息
  this.$set(this.answerProps, 'answerOptions', data)
  this.meetingInfo = data.meetingInfo
  // 显示等待接听组件
  this.$set(this.answerProps, 'answerVisible', true)
}

8. `THMKit 超时未接听事件`

定义: addEventListener('THMKit-invite-timeout', function(parameters))

描述：该事件用于开发者监听 SDK 超时未接听事件

参数：

function: 回调方法 - 接收到超时未接听回调方法

示例：

// 示例代码
// THMKit invite超时事件监听回调
this.$THMKit.addEventListener(
  'THMKit-invite-timeout',
  this.handleTHMKitInviteTimeout
)
handleTHMKitInviteTimeout: function () {
  this.$message.error(`超时未接听`)
  // 关闭接听等待页面
  this.handleCloseAnswerContainer()
}
// 关闭接听等待页面
handleCloseAnswerContainer: function () {
  this.$set(this.answerProps, 'answerVisible', false)
  this.$set(this.answerProps, 'answerOptions', null)
}

9. `THMKit 其他客户端拒绝事件`

定义: addEventListener('THMKit-other-client-reject', function(parameters))

描述：该事件用于开发者监听 SDK 其他客户端拒绝事件

参数：

function: 回调方法 - 接收到其他客户端拒绝回调方法

示例：

// 示例代码
// THMKit 其他客户端拒绝事件监听回调
this.$THMKit.addEventListener(
  'THMKit-other-client-reject',
  this.handleTHMKitOtherClientReject
)
// 接受到其他客户端拒绝
handleTHMKitOtherClientReject() {
this.$message.error(`其他客户端已拒绝`)
  // 关闭接听等待页面
  this.handleCloseAnswerContainer()
}
// 关闭接听等待页面
handleCloseAnswerContainer: function () {
  this.$set(this.answerProps, 'answerVisible', false)
  this.$set(this.answerProps, 'answerOptions', null)
}

10. `THMKit 其他客户端同意事件`

定义: addEventListener('THMKit-other-client-accept', function(parameters))

描述：该事件用于开发者监听 SDK 其他客户端同意事件

参数：

function: 回调方法 - 接收到其他客户端同意回调方法

示例：

// 示例代码
// THMKit 其他客户端同意事件监听回调
this.$THMKit.addEventListener(
  'THMKit-other-client-accept',
  this.handleTHMKitOtherClientAccept
)
// 接到其他客户端同意
handleTHMKitOtherClientAccept() {
  this.$message.error(`其他客户端已同意`)
  // 关闭接听等待页面
  this.handleCloseAnswerContainer()
}
// 关闭接听等待页面
handleCloseAnswerContainer: function () {
  this.$set(this.answerProps, 'answerVisible', false)
  this.$set(this.answerProps, 'answerOptions', null)
}

11. `THMKit token 即将过期事件`

定义: addEventListener('THMKit-token-will-expire', function(parameters))

描述：该事件用于开发者监听 SDK token 即将过期事件

参数：

function: 回调方法 - 接收到token 即将过期回调方法

示例：

// 示例代码
// THMKit token 即将过期事件监听回调
this.$THMKit.addEventListener(
  'THMKit-token-will-expire',
  this.handleTHMKitRefreshToken
)
async handleTHMKitRefreshToken() {
  // 处理重新登录业务逻辑
  // 调用刷新THMkit token API
  const meetingRes = await this.$THMKit.refreshToken({
    userId: this.applyInfo.userId,
    timestamp: this.applyInfo.timestamp
  })
  if (meetingRes.code != 200) {
    this.$message.error(meetingRes.msg)
    return false
  }
  this.userInfo = meetingRes.data
}

12. `THMKit 标注标注截图业务返回URL事件`

定义: addEventListener('THMKit-shot-screen', function(parameters))

描述：该事件用于开发者监听 SDK 标注标注截图业务返回URL事件,可用于将标注中截取的图片，进行其他业务处理

参数：

function: 回调方法 - 接收到标注标注截图业务返回URL回调方法

示例：

// 示例代码
// THMKit 标注标注截图业务 URL 返回
this.$THMKit.addEventListener('THMKit-shot-screen',this.handleTHMKitShotScreen)
// 标注截图业务返回
handleTHMKitShotScreen({usrId, url}) {
  console.log(userId,url)
}

常见问题

1. `问题名称`

解答:

2. `问题名称`

解答:

Web & Uniapp Vue2

THMKit SDK API 文档

安装​

使用方法​

API 函数列表​

1. 用户登录​

参数 parameters：​

返回值：​

示例代码：​

2. 用户登出​

参数：-​

返回值：-​

示例：​

3. 刷新Token​

参数：​

返回值：​

示例：​

4. 创建会议​

参数：​

返回值：​

示例：​

5. 加入会议​

参数：​

返回值：​

示例：​

6. 发起呼叫​

参数：[userId]​

返回值：​

示例：​

7. 邀请加入会议​

参数：​

返回值：​

示例：​

8. 同意邀请​

参数：​

返回值：​

示例：​

9. 拒绝邀请​

参数：​

返回值：​

示例：​

10. 获取当前会议人员信息​

参数：-​

返回值：​

示例：​

监听事件列表​

1. WebSocket连接打开事件​

参数：​

示例：​

2. WebSocket 心跳事件​

参数：​

示例：​

3. WebSocket 关闭事件​

参数：​

示例：​

4. WebSocket 异常事件​

参数：​

示例：​

5. THMKit 登录成功事件​

参数：​

示例：​

6. THMKit 异常事件​

参数：​

示例：​

7. THMKit 邀请事件​

参数：​

示例：​

8. THMKit 超时未接听事件​

参数：​

示例：​

9. THMKit 其他客户端拒绝事件​

参数：​

示例：​

10. THMKit 其他客户端同意事件​

参数：​

示例：​

11. THMKit token 即将过期事件​

参数：​

示例：​

12. THMKit 标注标注截图业务返回URL事件​

安装

使用方法

API 函数列表

1. `用户登录`

参数 parameters：

返回值：

示例代码：

2. `用户登出`

参数：-

返回值：-

示例：

3. `刷新Token`

参数：

返回值：

示例：

4. `创建会议`

参数：

返回值：

示例：

5. `加入会议`

参数：

返回值：

示例：

6. `发起呼叫`

参数：[userId]

返回值：

示例：

7. `邀请加入会议`

参数：

返回值：

示例：

8. `同意邀请`

参数：

返回值：

示例：

9. `拒绝邀请`

参数：

返回值：

示例：

10. `获取当前会议人员信息`

参数：-

返回值：

示例：

监听事件列表

1. `WebSocket连接打开事件`

参数：

示例：

2. `WebSocket 心跳事件`

参数：

示例：

3. `WebSocket 关闭事件`

参数：

示例：

4. `WebSocket 异常事件`

参数：

示例：

5. `THMKit 登录成功事件`

参数：

示例：

6. `THMKit 异常事件`

参数：

示例：

7. `THMKit 邀请事件`

参数：

示例：

8. `THMKit 超时未接听事件`

参数：

示例：

9. `THMKit 其他客户端拒绝事件`

参数：

示例：

10. `THMKit 其他客户端同意事件`

参数：

示例：

11. `THMKit token 即将过期事件`

参数：

示例：

12. `THMKit 标注标注截图业务返回URL事件`

参数：

示例：