一、前提条件
·IDE： HBuilderX 版本 ≥ 4.66。
·Vue 版本： Vue3。
·Node 版本：Node.js ≥ 18.0.0。
·支持平台： 仅支持打包为 Android / iOS App，不支持 H5 和小程序。
·支持项目： uni-app 项目。
注意：说明：
注意：Vue2 暂不支持，可通过 视频会议 SDK 接入反馈问卷 进行反馈。
注意：uniappx 暂不支持，可通过 视频会议 SDK 接入反馈问卷 进行反馈。
注意：H5 和小程序项目，如有需要请参考以下替代方案：
注意：接入过程中遇到任何卡点或有改进建议，欢迎通过 视频会议 SDK 接入反馈问卷 反馈，会及时跟进处理。
二、步骤1：创建项目
打开 HBuilderX，在菜单栏中选择文件 > 新建 > 项目，创建一个名为 room-example 的 uni-app vue3 项目。
三、步骤2：安装 TUIKit 插件
进入【】腾讯云聊天+通话+直播响应式 SDK。点击下载插件并导入 HBuilderX，将插件导入 room-example 项目中。
四、步骤3：配置原生模块与 Android 权限
Android 权限配置iOS 权限配置在 manifest.json> 点击安卓 / iOS 权限配置 > Android 云打包权限配置中配置如下权限。如下：<uses-permission android:name="android.permission.CAMERA"/><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/><uses-permission android:name="android.permission.RECORD_AUDIO" /><uses-permission android:name="android.permission.INTERNET"/><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>在 manifest.json> 源码视图 > app-plus > distribute > ios 配置如下权限。如下："privacyDescription" : { "NSCameraUsageDescription" : "应用需要访问你的相机以进行直播", "NSMicrophoneUsageDescription" : "应用需要访问你的麦克风以进行直播"},"UIBackgroundModes" : [ "audio" ]
五、步骤4：集成 TUIKit
1. 拷贝 TUIKit 页面及静态资源：将 uni_modules/tuikit-atomic-x/quickstart_room/下的pages/* 拷贝到项目 pages 目录，static/* 拷贝到项目 static 目录下。
Windows 端Mac 端xcopy /E /I /Y "uni_modules\\tuikit-atomic-x\\quickstart_room\\static\\*" "static\\" && xcopy /E /I /Y "uni_modules\\tuikit-atomic-x\\quickstart_room\\pages\\*" "pages\\"cp -r uni_modules/tuikit-atomic-x/quickstart_room/static/* static/ && cp -r uni_modules/tuikit-atomic-x/quickstart_room/pages/* pages/
2. 配置页面路由：替换 pages.json 内容，注册所需页面路由：
{ "pages": [ { "path": "pages/login/login", "style": { "navigationStyle": "custom" } }, { "path": "pages/index/index", "style": { "navigationStyle": "custom" } }, { "path": "pages/scenes/room/index", "style": { "navigationStyle": "custom" } }, { "path": "pages/scenes/room/join/index", "style": { "navigationStyle": "custom" } }, { "path": "pages/scenes/room/quickstart/index", "style": { "navigationStyle": "custom" } }, { "path": "pages/scenes/room/schedule/index", "style": { "navigationStyle": "custom" } }, { "path": "pages/scenes/room/schedule/detail/index", "style": { "navigationStyle": "custom" } }, { "path": "pages/scenes/room/meeting/index", "style": { "navigationStyle": "custom", "disableScroll": true, "disableSwipeBack": true } }, { "path": "pages/scenes/room/join/invitation/index", "style": { "navigationStyle": "custom", "disableScroll": true, "disableSwipeBack": true, "backgroundColor": "#000000", "app-plus": { "titleNView": false, "animationType": "slide-in-bottom" } } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "腾讯云 IM", "navigationBarBackgroundColor": "#EBF0F6", "backgroundColor": "#F8F8F8" }}
3. 初始化来电邀请服务：在 App.vue 的 onLaunch 里初始化 initRoomCallService。
<script lang="ts"> import { initRoomCallService } from '@/uni_modules/tuikit-atomic-x/server/roomCallService'; export default { onLaunch: function () { initRoomCallService(); }, };</script>
六、运行和测试
注意：说明：
注意：接入过程中遇到任何卡点或有改进建议，欢迎通过 视频会议 SDK 接入反馈问卷 反馈，会及时跟进处理。
七、步骤1：制作自定义基座
点击运行 > 运行到手机或模拟器 > 制作自定义调试基座。
注意：说明：
注意：首次制作自定义基座需要下载 Gradle 依赖，Android 通常需要 10～20 分钟，iOS 需要 5～10 分钟。过程中请勿中断。
八、步骤2：登录
在 pages/login/login.vue 中，填入 SDKAppID、 userID、SecretKey，点击登录。
| 参数 | 类型 | 说明 |
| SDKAppID | Number | SDKAppID 是 RoomKit 客户应用的唯一标识。你可以在 TRTC 控制台 > 应用管理 创建新应用获取 。说明：SDKAppID 是 RoomKit 客户应用的唯一标识。每个独立的 App 都应单独申请一个 SDKAppID。不同 SDKAppID 之间天然隔离、互不相通，请勿混用。开始使用前，请先领取 TUIRoomKit 体验版，领取方式见「开通服务 」。 |
| SecretKey | String | SecretKey 是 RoomKit 客户应用的密钥。你可以在 TRTC 控制台 > 应用管理 对应应用获取。安全提示：项目示例支持通过 genTestUserSig 函数生成 userSig。该方法中 SecretKey 很容易被反编译逆向破解，一旦你的密钥泄露，攻击者就可以盗用你的腾讯云流量。该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式请参见 服务端生成 UserSig。敏感信息（SecretKey）仅用于 Demo 测试，不可提交到代码仓库或用于生产环境。 |
| userID | String | 用户的唯一标识符，由你定义，只能包含大小写字母（a-z，A-Z）、数字（0-9）、下划线和连字符。 |
import { ref } from 'vue'import { useLoginState } from '@/uni_modules/tuikit-atomic-x/state/LoginState';import { genTestUserSig } from '@/uni_modules/tuikit-atomic-x/debug/GenerateTestUserSig';const { login } = useLoginState();const sdkAppId = 0; // SDKAppIDconst userId = ref(''); // userIDconst secretKey = ''; // SecretKey// 登录login({ sdkAppID: sdkAppId, userID: userId.value, userSig: genTestUserSig({ SDKAppID: sdkAppId, userID: userId.value, secretKey: secretKey }).userSig, success: () => { uni.reLaunch({ url: '/pages/scenes/room/index' }) }, fail: (code: number, msg: string) => { uni.showToast({ title: msg || '登录失败', icon: 'none' }) }})
九、步骤3：运行项目
点击运行 > 运行到手机或模拟器 > 运行到 Android/iOS 基座，使用制作好的自定义基座运行到手机。
十、AI 助手：知识咨询与代码集成
你在接入视频会议 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于产品文档。适用于查询 Room 组件和 AtomicXCore SDK 用法以及集成文档等场景，立即体验，提出你的第一个问题。
十一、屏幕共享
AndroidiOS
无需配置，开箱即用。
十二、需配置 Broadcast Upload Extension
步骤1：生成并绑定 Extension
使用你的账号 登录，进行以下操作，注意完成后需要下载对应的 Provisioning Profile。
1. 单击 Certificates, IDs & Profiles。
2. 在右侧的界面中单击加号。
3. 选择 App Groups，单击 Continue。
4. 在弹出的表单中填写 Description 和 Identifier，其中 Identifier 需要传入接口中的对应的 AppGroup 参数。完成后单击 Continue。
5. 回到 Identifier 页面，左上边的菜单中选择 App IDs，然后单击你的 App ID（主 App 与 Extension 的 AppID 需要进行同样的配置）。
6. 选中 App Groups 并单击 Edit。
7. 在弹出的表单中选择你之前创建的 App Group，单击 Continue 返回编辑页，单击 Save 保存。
步骤2：配置屏幕共享扩展
1. 下载 步骤1 中配置好的 Provisioning Profile 并配置到 nativeResources/ios 下。如下：
2. 在 nativeResources/ios 下新建 ios-extension.json 文件，配置文件内容如下：
| 参数 | 说明 |
| identifier | 步骤1 中 Apple 开发者后台创建的 Extension 的 Bundle ID。 |
| profile | nativeResources/ios 下的 .mobileprovision 的文件名。 |
| entitlements.com.apple.security.application-groups | 步骤1 中 Apple 开发者后台创建的 App Group ID。 |
{ "ScreenShareExtension.appex": { "identifier": "xxx", "profile": "xxx.mobileprovision", "entitlements": { "com.apple.security.application-groups": ["xxx"] } } }
3. 在 nativeResources/ios 下新建 UniApp.entitlements 文件，配置文件内容如下：
| 参数 | 说明 |
| com.apple.security.application-groups | 步骤1 中 Apple 开发者后台创建的 App Group ID。 |
<?xml version="1.0" encoding="UTF-8"?><plist version="1.0"> <dict> <key>com.apple.security.application-groups</key> <array> <string>xxx</string> </array> </dict></plist>
4. 在 项目根目录下新建 Info.plist 文件，配置文件内容如下：
| 参数 | 说明 |
| TUIRoomAppGroup | 步骤1 中 Apple 开发者后台创建的 App Group ID。 |
<?xml version="1.0" encoding="UTF-8"?><plist version="1.0"> <dict> <key>TUIRoomAppGroup</key> <string>xxx</string> </dict></plist>
步骤3：重新制作自定义基座
点击运行 > 运行到手机或模拟器 > 制作 iOS 自定义调试基座。
十三、预定会议和会中邀请
TUIRoomKit 内置的邀请参会和预定会议选人组件，底层默认依赖腾讯云 IM 的用户关系链（好友列表）。如果你希望在这些组件中展示你企业内部的组织架构或好友列表，请先通过服务端 REST API 将你的业务联系人同步至腾讯云 IM 系统中：
1. 使用 账号管理 > 导入多个账号 REST API 接口批量导入用户账号。
2. 使用 好友管理 > 导入好友 REST API 接口批量导入用户关系链。
十四、该 TUIKit 插件是否支持编译到 H5 或微信小程序？
不支持。由于新版 TUIKit 基于 UTS (Uni-app Type Script) 插件架构开发，深度依赖 Android 和 iOS 的原生能力（如原生渲染引擎、本地数据库、音视频编解码），因此仅支持打包为 App (Android/iOS)。
十五、我的现有项目全是 .vue 页面（Webview 渲染），能直接集成吗？
可以混用，但需要注意页面模式。
nvue 页面和 vue 页面可以互相跳转，但是 vue 页面的子组件不建议是 nvue 组件。TUIKit 的 UI 组件是 nvue 组件，因此使用 TUIKit 所在的页面（pages）必须也是 nvue 文件。
十六、联系我们
如果你在接入或使用过程有任何疑问或者建议，欢迎 联系我们 提交反馈。