实时音视频 uni-app (客户端)

本文档介绍如何在 uniapp 业务项目中集成 TUIRoomKit，快速获得开箱即用的多人音视频会议能力。
﻿
﻿
﻿
﻿
前提条件
IDE： HBuilderX 版本 ≥ 4.66。
Vue 版本： Vue3。
Node 版本：Node.js  ≥ 18.0.0。
支持平台： 仅支持打包为 Android / iOS App，不支持 H5 和小程序。
支持项目： uni-app 项目。
说明：
Vue2 暂不支持，可通过 视频会议 SDK 接入反馈问卷 进行反馈。
uniappx 暂不支持，可通过 视频会议 SDK 接入反馈问卷 进行反馈。
H5 和小程序项目，如有需要请参考以下替代方案：
打包 Web H5，可参考：Web&H5（Vue3）。
打包小程序，可参考：uni-app（小程序）。
接入过程中遇到任何卡点或有改进建议，欢迎通过 视频会议 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/*⁠ 拷贝到项目 page⁠ 目录，⁠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/create/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/scenes/room/schedule/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/scenes/room/scheduleDetail/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/scenes/room/main/index",
      "style": {
        "navigationStyle": "custom",
        "disableScroll": true,
        "disableSwipeBack": true
      }
    },
    {
      "path": "pages/scenes/room/roomInvite/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。
// App.vue
<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; // SDKAppID
const userId = ref(''); // userID
const 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 用法以及集成文档等场景，立即体验，提出您的第一个问题。
高级功能
屏幕共享
﻿
﻿
﻿
Android - 无需配置
开箱即用。
iOS - 需配置 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 文件。
联系我们
如果您在接入或使用过程有任何疑问或者建议，欢迎 联系我们 提交反馈。

uni-app (客户端)

本页目录：

前提条件

集成步骤

步骤1：创建项目

步骤2：安装 TUIKit 插件

步骤3：配置原生模块与 Android 权限

步骤4：集成 TUIKit

运行和测试

步骤1：制作自定义基座

步骤2：登录

步骤3：运行项目

AI 助手：知识咨询与代码集成

高级功能

屏幕共享

Android - 无需配置

iOS - 需配置 Broadcast Upload Extension

步骤1：生成并绑定 Extension

步骤2：配置屏幕共享扩展。

步骤3：重新制作自定义基座。

预定会议和会中邀请

常见问题

该 TUIKit 插件是否支持编译到 H5 或微信小程序？

我的现有项目全是 `.vue` 页面（Webview 渲染），能直接集成吗？

联系我们

参数	类型	说明
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）、下划线和连字符。

参数	说明
identifier	步骤1 中 Apple 开发者后台创建的 Extension 的 Bundle ID。
profile	`nativeResources/ios` 下的 .mobileprovision 的文件名。
entitlements.com.apple.security.application-groups	步骤1 中 Apple 开发者后台创建的 App Group ID。

参数	说明
com.apple.security.application-groups	步骤1 中 Apple 开发者后台创建的 App Group ID。

参数	说明
TUIRoomAppGroup	步骤1 中 Apple 开发者后台创建的 App Group ID。