快速入门（Web & Uniapp Vue2）
一、快速上手
本节将介绍如何在项目中使用 THMKit SDK 快速集成多人远程会议、场景标记等功能，实现文字、图片、语音、视频等类型收发，满足多场景即时通讯需求。
二、支持的开发方式
- 基于 Vue2 的 Web 端开发
- 支持的浏览器: Chrome、Safari、Firefox、Edge
- 支持的最低分辨率: 720
- 基于 Vue2 的 uni-app 开发
- 支持的浏览器: Chrome、Safari、Firefox、Edge
- 支持的移动端设备: iOS、Android、H5、小程序
- 支持的最低分辨率: 720
三、THMKit SDK 的核心组成部分:
-
UI Component(UI 组件)
包含以下 2 个组件: THMKitAnswer、THMKitAssist
-
Component①: THMKitAnswer
说明: 用于接收到会议呼叫消息时，弹窗提示用户, 等待用户操作, 用户可以通过该组件进行接听/拒绝操作 你也可以自定义自己的接听与拒绝组件, 自定义接听/拒绝按钮, 通过按钮触发 SDK 的接听和拒绝 API 即可
-
Component②: THMKitAssist
说明:该组件是远程会议的核心组件, 包含了远程协助会议全部的核心功能, 包括: 画笔、画板、文本、图片、语音、视频、屏幕共享等。 该组件目前不支持自定义。
-
-
SDK API:
说明: 提供 SDK 核心业务 API, 供开发者主动调用, 主要包含的 API 有登录、登出、刷新 token、创建会议, 邀请会议成员、同意邀请和拒绝邀请等, 更多 API 请参考API 文档部分;
-
SDK Callback Event:
说明: 提供 SDK 核心业务回调事件，供开发者监听, 主要包含的监听时间有被呼叫事件、被邀请人接听事件、被邀请人拒绝事件、被邀请人忙碌等, 更多 Event 请参考API 文档部分;
四、核心组件架构图
五、核心业务流程图
六、开发环境准备
- 安装开发工具
- 推荐 vscode: https://code.visualstudio.com/
- 安装 nodejs 16.8.0 及以上版本, 有如下安装方式:
- 你可以在 nodejs 官网下载安装: https://nodejs.org/
- 你还可以通过 nvm 工具安装, 具体教程可参考: https://blog.csdn.net/qq_22182989/article/details/125387145
- 安装 Vue CLI, 你可以通过如下命令安装:
npm install -g @vue/cli - 已包含的依赖组件:
请注意你的项目中是否已包含以下依赖组件, 用于排查依赖冲突:
- "ali-oss": "^6.20.0",
- "axios": "^1.6.6",
- "benz-amr-recorder": "^1.1.5",
- "core-js": "^3.8.3",
- "cos-js-sdk-v5": "^1.6.0",
- "sass": "^1.70.0",
- "sass-loader": "^14.0.0",
- "vue": "^2.6.14"
七、快速体验
-
体验前置条件
- 已在开发者平台注册账号, 如未注册, 请前往开发者平台注册;
- 已在开发者平台创建应用, 如未创建, 请前往开发者平台创建应用;
- 已在开发者平台创建 AK, 如未创建, 请前往开发者平台创建应用;
- 已在开发者平台添加用户, 如为添加, 请前往开发者平台添加用户;
-
体验参数准备:
- userId: 你的应用用户的 userId, 请在开发者平台查看;
- appKey: 你的应用的 appKey, 请在开发者平台查看;
- accessKey: 你的应用的 accessKey, 请在开发者平台查看;
- accessSecret: 你的应用的 accessSecret, 请在开发者平台查看;
- timestamp: 你的应用用户登录后预期 token 有效期时间戳;
-
下载我们已经准备好的示例工程包, 示例工程下载地址: Github
-
安装依赖命令:
npm install --registry=https://registry.npmjs.org -
运行命令:
npm run serve -
根据控制台提示的访问地址, 在 2 个不同的浏览器运行后访问效果图如下:
-
填写参数后点击呼叫人员呼叫登录的用户即可开始体验:
八、创建 Web 工程
说明: 通过命令行创建一个 vue2.0 的 web 工程, 你也可以通过 vue-cli 工具创建
-
步骤 1. 命令行创建 web 工程 详情请前往Vue.js
npm create-vue-project -
步骤 2. 安装 THMKit SDK 依赖
npm i thmkit --save
npm i element-ui -S -
步骤 3. 配置 THMKit 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'
Vue.prototype.$THMKit = new Vue() -
步骤 4. 获取初始化SDK参数
- 说明: 初始化签名参数signature是用于调用Teamhelper 远程协助服务端登录接口的验签参数
- 前往查看服务端签名生成方式
- 你可以通过调用自己服务端的接口获取签名及其他的SDK初始化参数
- 如果你暂时没有自己的服务端, 也可以通过调用我们提供的临时生成签名参数API获取签名参数
- 完整的客户端登录参数请参考: API 文档部分
- 建议该登录参数, 在你的客户端应用授权接口中同步返回, 然后紧接着初始化Teamhelper远程协助SDK
-
步骤 5: 初始化Teamhelper 远程协助SDK代码如下:
- 首先引入SDK
import { THMKit } from 'thmkit'- 然后在你的登录接口成功后调用初始化SDK
const THMKit = new THMKit(
userId: userInfo.userId,
appKey: userInfo.appKey,
accessKey: userInfo.accessKey,
signature: userInfo.signature,
timestamp: userInfo.timestamp,
platform: this.platform
)
THMKit.addEventListener('THMKit-message',()=>{}) -
步骤 6: 登录Teamhelper 远程协助SDK代码如下:
- 说明: 该登录api是在初始化SDK后调用, 用于登录远程协助服务端, 用于获取远程协助服务端的 token, 用于后续的远程协助业务;
- 登录代码如下:
// 示例代码
const meetingRes = await this.$THMKit.login({
userId: this.applyInfo.userId
})
// 返回用户信息
this.userInfo = meetingRes.data
-
步骤 7: 引用等待接听 UI 组件 THMKitAnswer
说明: 该组件是用于收到邀请事件时显示等待接听容器, 用于显示呼叫人员名称、 头像等信息, 也可以操作同意/拒绝接听业务; 该监听事件建议在初始化SDK后添加该监听事件;
组件属性&事件
属性 参数 功能 answerOption THMKit-invite 监听事件 返回参数 用于显示等待接听容器，呼叫人员名称、头像 THMKitEvent 赋值实例化 THMKit 事件 参数 功能 handleCallAccept conetnt 处理 被呼叫等待接听组件同意关闭业务 handleCallReject conetnt 处理 被呼叫等待接听组件拒绝关闭业务 示例代码
<template>
<div class="answer-container" v-if="answerVisible">
<THMKitAnswer
:answerOptions="meetingAnswerOptions"
:THMKitEvent="$THMKit"
@handleCallAccept="handleAcceptCloseAnswerContainer"
@handleCallReject="handleRejectCloseAnswerContainer"
></THMKitAnswer>
</div>
</template>
<script>
import { ThmkitAnswer } from 'thmkit'
export default{
data(){
return {
answerVisible: null,
meetingAnswerOptions: null,
}
},
components: {
ThImAnswer
},
methods: {
handleAcceptCloseAnswerContainer: function () {
// 同意事件，并打开协作容器
this.handleInviterAccept()
this.handleCloseAnswerContainer()
},
// 同意进行协作
handleInviterAccept: async function () {
// 对方同意后，调整用MST业务加入会议接口
const [resultMeeting, resultJoinMeeting] = await this.$THMKit.joinMeeting(
{
meetingNo: this.meetingInfo.meetingNo
}
)
if (resultJoinMeeting.code != 200) {
// 失败提示
this.$message.error(resultJoinMeeting.msg)
return false
}
// 将当前的会议状态传入ThImAssist 组件
this.meetingInfo = resultMeeting.data
this.assistOptions = resultJoinMeeting.data
// 该变量用于控制步骤8的协助组件显示
this.assistVisible = true
},
// 关闭接听等待页面
handleCloseAnswerContainer: function () {
this.answerVisible = false
this.meetingAnswerOptions = null
},
}
}
</script> -
步骤 8: 引用协作会议 UI 组件 THMKitAssist
组件属性&事件
属性 参数 功能 customInvite true/false；默认为 false； 用于控制是否启用自定义邀请列表 ThImSdkEvent 实例化 ThImSdk 赋值 事件 参数 功能 handleOverMeeting - 处理会议结束，关闭会议组件 handleCustomInvite - 开启自定义邀请列表，当 customInvite 为 true 时生效 示例代码
<template>
<div id="app">
<THMKitAssist
v-if="assistVisible"
:THMKitEvent="$THMKit"
:customInvite="customInvite"
@handleOverMeeting="handleOverMeeting"
@handleCustomInvite="handleCustomInviteEvent"
></THMKitAssist>
</div>
</template>
<script>
import { THMKitAssist } from 'thmkit'
export default{
data() {
return {
// 协作容器
assistVisible: false, // 控制协作容器显示, 来源于步骤7的变量控制
customInvite: true,
}
},
components: {
THMKitAssist
},
methods: {
// 打开呼叫容器
handleCalling: async function (item) {
try {
const [resultMeeting, resultJoinMeeting] = await this.$THMKit.call([
item.userId
])
this.meetingInfo = resultMeeting.data
this.assistVisible = true
} catch (error) {
this.$message.error(error.msg)
}
},
handleOverMeeting: function () {
this.assistVisible = false
},
}
}
</script>
九、创建 uni-app 工程
说明: 通过 HBuilderX 创建 uni-app 项目，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目
- 步骤 1. 创建 uni-app 项目 详情请前往HBuilderX
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project
-
步骤 2. 组件引用参照 创建 Web 工程 步骤
-
步骤 3. 配置权限
// manifest.json
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-feature android:name= \"android.hardware.camera\"/>",
"<uses-feature android:name= \"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
...
],
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
},
/* ios打包配置 */
"ios" : {
"dSYMs" : false
},
/* SDK配置 */
"sdkConfigs" : {
"ad" : {}
}
}