@tencentcloud/sdk-mcp 1.7.2 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +13 -5
  3. package/knowledge/bm25.js +20 -11
  4. package/knowledge/search/generic-rerank.js +123 -0
  5. package/knowledge/search/search-pass.js +8 -1
  6. package/package.json +1 -1
  7. package/resource/_schema/query-normalization.yaml +6 -0
  8. package/resource/index/manifest.json +1 -1
  9. package/resource/integration/chat/preset/android/integration.md +33 -29
  10. package/resource/integration/chat/preset/flutter/integration.md +93 -92
  11. package/resource/knowledge/callkit/core-sdk/ios/offline-push.md +1 -1
  12. package/resource/knowledge/chat/best-practice/common/web-sdk-log-level.md +76 -0
  13. package/resource/knowledge/chat/best-practice/miniprogram/desktop-wechat-miniprogram-error.md +79 -0
  14. package/resource/knowledge/chat/best-practice/miniprogram/login-timeout-2801-diagnosis.md +1 -1
  15. package/resource/knowledge/chat/preset/android-view/integration.md +37 -29
  16. package/resource/knowledge/push/config/android/fcm.md +2 -6
  17. package/resource/knowledge/push/integration/android.md +777 -425
  18. package/resource/knowledge/push/integration/donut.md +54 -71
  19. package/resource/knowledge/push/integration/flutter.md +194 -63
  20. package/resource/knowledge/push/integration/harmonyos.md +7 -2
  21. package/resource/knowledge/push/integration/ios.md +23 -93
  22. package/resource/knowledge/push/integration/react-native.md +2 -1
  23. package/resource/knowledge/push/integration/uni-app.md +28 -106
  24. package/resource/knowledge/push/integration/unity.md +2 -1
  25. package/resource/knowledge/push/integration/unreal-engine.md +2 -1
  26. package/resource/knowledge/roomkit/best-practice/vue/screen-share-auto-stop-on-leave.md +62 -0
  27. package/resource/knowledge/roomkit/core-sdk/react/network-proxy.md +84 -0
  28. package/resource/knowledge/roomkit/core-sdk/vue/network-proxy.md +84 -0
  29. package/resource/knowledge/roomkit/core-sdk/vue/recording.md +245 -0
  30. package/resource/knowledge/roomkit/core-sdk/vue/whiteboard-annotation.md +196 -0
  31. package/resource/knowledge/roomkit/faq/error-code.md +103 -0
  32. package/resource/knowledge/roomkit/preset/harmonyos/integration.md +461 -0
  33. package/resource/knowledge/roomkit/preset/react/features/network-proxy.md +80 -0
  34. package/resource/knowledge/roomkit/preset/uniapp-app/integration.md +581 -0
  35. package/resource/knowledge/roomkit/preset/vue/features/ai-caption-translation.md +69 -0
  36. package/resource/knowledge/roomkit/preset/vue/features/ai-denoiser.md +67 -0
  37. package/resource/knowledge/roomkit/preset/vue/features/network-proxy.md +80 -0
  38. package/resource/knowledge/roomkit/preset/vue/features/recording.md +85 -0
  39. package/resource/knowledge/roomkit/preset/vue/features/whiteboard-annotation.md +86 -0
  40. package/server.js +1 -1
  41. package/utils/preflight-route.js +18 -6
  42. package/utils/report-cls-client.js +1 -1
  43. package/utils/report-es-client.js +1 -1
@@ -0,0 +1,581 @@
1
+ TUIRoomKit 是腾讯云提供的一站式多人视频会议解决方案,集成了完整的 UI 组件和核心功能。通过本文档,开发者可以快速了解如何将 TUIRoomKit 集成到项目中,实现多人视频会议功能。本文还将详细介绍如何快速接入 UI 项目,替换图片资源,自定义样式,帮助开发者打造符合品牌特色的音视频应用。
2
+
3
+ <style>
4
+ .vsdk-survey-card * {
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ .vsdk-survey-card {
9
+ position: relative;
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ gap: 20px;
14
+ padding: 18px 22px;
15
+ margin: 16px 0;
16
+ border-radius: 14px;
17
+ overflow: hidden;
18
+ background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%);
19
+ border: 1px solid #D7E8FF;
20
+ box-shadow: 0 4px 16px rgba(0,110,255,.05);
21
+ transition: all .25s ease;
22
+ }
23
+
24
+ .vsdk-survey-card::before{
25
+ content:"";
26
+ position:absolute;
27
+ right:-60px;
28
+ top:-60px;
29
+ width:180px;
30
+ height:180px;
31
+ background:radial-gradient(circle,
32
+ rgba(0,110,255,.16) 0%,
33
+ rgba(0,110,255,.08) 45%,
34
+ transparent 75%);
35
+ pointer-events:none;
36
+ }
37
+
38
+ .vsdk-survey-card::after{
39
+ content:"";
40
+ position:absolute;
41
+ left:-40px;
42
+ bottom:-60px;
43
+ width:120px;
44
+ height:120px;
45
+ background:radial-gradient(circle,
46
+ rgba(76,169,255,.08),
47
+ transparent 70%);
48
+ pointer-events:none;
49
+ }
50
+
51
+ .vsdk-survey-card:hover{
52
+ border-color:#006EFF;
53
+ box-shadow:
54
+ 0 10px 28px rgba(0,110,255,.10),
55
+ 0 0 36px rgba(0,110,255,.08);
56
+ transform:translateY(-2px);
57
+ }
58
+
59
+ .vsdk-card-left{
60
+ display:flex;
61
+ align-items:center;
62
+ gap:14px;
63
+ flex:1;
64
+ min-width:0;
65
+ position:relative;
66
+ z-index:1;
67
+ }
68
+
69
+ .vsdk-ico{
70
+ width:46px;
71
+ height:46px;
72
+ flex:0 0 46px;
73
+ border-radius:12px;
74
+ background:linear-gradient(180deg,#EDF5FF,#DCEBFF);
75
+ display:flex;
76
+ align-items:center;
77
+ justify-content:center;
78
+ font-size:22px;
79
+ box-shadow:
80
+ inset 0 1px 0 rgba(255,255,255,.8),
81
+ 0 6px 18px rgba(0,110,255,.12);
82
+ }
83
+
84
+ .vsdk-text{
85
+ min-width:0;
86
+ }
87
+
88
+ .vsdk-title{
89
+ display:flex;
90
+ align-items:center;
91
+ gap:8px;
92
+ flex-wrap:wrap;
93
+ font-size:18px;
94
+ font-weight:600;
95
+ color:#1F2329;
96
+ line-height:1.4;
97
+ }
98
+
99
+ .vsdk-badge{
100
+ padding:2px 8px;
101
+ border-radius:999px;
102
+ background:#EAF3FF;
103
+ color:#006EFF;
104
+ font-size:11px;
105
+ font-weight:600;
106
+ }
107
+
108
+ .vsdk-desc{
109
+ margin-top:6px;
110
+ font-size:13px;
111
+ line-height:1.7;
112
+ color:#4E5969;
113
+ }
114
+
115
+ .vsdk-card-right{
116
+ flex-shrink:0;
117
+ position:relative;
118
+ z-index:1;
119
+ }
120
+
121
+ .vsdk-cta{
122
+ display:inline-flex;
123
+ align-items:center;
124
+ justify-content:center;
125
+ min-width:112px;
126
+ height:40px;
127
+ padding:0 22px;
128
+ border-radius:8px;
129
+ background:#006EFF;
130
+ color:#FFFFFF;
131
+ text-decoration:none;
132
+ font-size:14px;
133
+ font-weight:600;
134
+ box-shadow:0 8px 20px rgba(0,110,255,.25);
135
+ transition:all .2s ease;
136
+ }
137
+
138
+ .vsdk-cta:hover{
139
+ background:#0052D9;
140
+ box-shadow:0 10px 24px rgba(0,110,255,.35);
141
+ }
142
+
143
+ @media (max-width:768px){
144
+
145
+ .vsdk-survey-card{
146
+ flex-direction:column;
147
+ align-items:flex-start;
148
+ }
149
+
150
+ .vsdk-card-left{
151
+ width:100%;
152
+ align-items:flex-start;
153
+ }
154
+
155
+ .vsdk-title{
156
+ font-size:16px;
157
+ }
158
+
159
+ .vsdk-desc{
160
+ font-size:12px;
161
+ }
162
+
163
+ .vsdk-card-right{
164
+ width:100%;
165
+ margin-top:14px;
166
+ }
167
+
168
+ .vsdk-cta{
169
+ width:100%;
170
+ }
171
+
172
+ }
173
+ </style>
174
+
175
+ <div class="vsdk-survey-card">
176
+
177
+ <div class="vsdk-card-left">
178
+
179
+ <div class="vsdk-ico">💡</div>
180
+
181
+ <div class="vsdk-text">
182
+
183
+ <div class="vsdk-title">
184
+ 有接入卡点?30 秒反馈
185
+ <span class="vsdk-badge">全部选填</span>
186
+ </div>
187
+
188
+ <div class="vsdk-desc">
189
+ 正在了解或评估视频会议 SDK?UI、功能、文档或套餐开通如有卡点,欢迎填写反馈。
190
+ </div>
191
+
192
+ </div>
193
+
194
+ </div>
195
+
196
+ <div class="vsdk-card-right">
197
+ <a class="vsdk-cta" href="https://wj.qq.com/s2/27395009/ac34/" target="_blank">
198
+ 填写反馈
199
+ </a>
200
+ </div>
201
+
202
+ </div>
203
+
204
+ ## 前提条件
205
+
206
+ ### 开通服务
207
+
208
+ 请参考 开通服务 领取 TUIRoomKit 体验版,并在 [应用管理](https://console.cloud.tencent.com/trtc) 页面获取以下信息:
209
+ - **SDKAppID**:应用标识(必填),腾讯云基于 SDKAppID 完成计费统计。
210
+
211
+ - **SDKSecretKey**:应用密钥,用于初始化配置文件的密钥信息。
212
+
213
+ ### 环境准备
214
+
215
+ > **说明:**
216
+ > HBuilderX 4.64 和 4.65 版本对 UTS 插件打包存在已知兼容性问题,建议使用 4.66 或更高版本。
217
+ >
218
+
219
+ - [HBuilderX](https://www.dcloud.io/hbuilderx.html):HBuilderX 是 **uni-app 官方**的集成开发环境(IDE),我们需要用它来导入、配置和运行我们的 Demo。
220
+
221
+ - 2个移动设备: Android 5.0 以上的设备 / iOS 13.0 及以上设备。
222
+
223
+ ## 快速接入
224
+
225
+ ### **步骤1:下载 TUIRoomKit 组件**
226
+
227
+ #### 1. 克隆项目源码
228
+ ``` bash
229
+ git clone
230
+ ```
231
+
232
+ #### 2. 导入 atomic-x 组件
233
+ - 将源码中 `TUIKit_uni-app/App/uni_modules` 目录下的 `tuikit-atomic-x` 文件夹,完整拷贝到您项目根目录下的 `uni_modules` 文件夹中。
234
+
235
+ - 将源码中 `TUIKit_uni-app/App/components` 下的文件,完整的拷贝到您项目的 `components` 文件夹中。
236
+
237
+ - 将源码中 `TUIKit_uni-app/App/static` 目录下的文件,完整拷贝到您项目根目录下的同名文件夹下。
238
+
239
+ #### 3. 拷贝创建房间,加入房间,房间主界面等页面
240
+ - 将源码中 `TUIKit_uni-app/App/pages` 目录下的文件,完整拷贝到您项目根目录下的同名文件夹中。
241
+
242
+ - 将源码中 `TUIKit_uni-app/App/debug` 文件夹拷贝到您项目的根目录下,这个目录提供有可以方便您在客户端快速生成的 **UserSig** 的快捷函数。
243
+
244
+ #### 4. 合并 App.vue 配置
245
+
246
+ **TUIKit_uni-app/App/App.vue** 文件中包含多人视频会议能力的初始化逻辑,因此您需要将 **TUIKit_uni-app/App/App.vue** 文件和您项目下的 **App.vue** 文件进行合并。
247
+
248
+ > **注意:**
249
+ >
250
+ > 不要直接覆盖 **App.vue** 文件! 打开源码中的 **TUIKit_uni-app/App/App.vue**, 将其 `<script>` 部分的 ts 内容追加到您自己项目的 **App.vue** 的 `<script>` 标签内。
251
+ >
252
+
253
+ ### 步骤2:工程配置
254
+ 1. 配置 `manifest.json`
255
+
256
+ 打开您项目的 **manifest.json** 文件,在 **app-plus** > **distribute** 节点下,确保添加了以下必要的权限:
257
+
258
+ - Android 平台(`android` 节点):在 `permissions` 数组中,请确保包含以下权限:
259
+
260
+ ``` json
261
+ "<uses-permission android:name=\"android.permission.CAMERA\"/>",
262
+ "<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />",
263
+ "<uses-permission android:name=\"android.permission.INTERNET\"/>",
264
+ "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
265
+ "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>"
266
+ ```
267
+ - iOS 平台(ios 节点):在 `privacyDescription` 对象中,请确保包含以下描述:
268
+
269
+ ``` json
270
+ "NSCameraUsageDescription" : "应用需要访问您的相机以进行多人音视频互动",
271
+ "NSMicrophoneUsageDescription" : "应用需要访问您的麦克风以进行多人音视频互动"
272
+ ```
273
+
274
+ 在 `UIBackgroundModes` 数组中,添加 `audio` 以支持后台播放音频。
275
+
276
+ ``` json
277
+ "UIBackgroundModes" : [ "audio" ]
278
+ ```
279
+ 2. 制作自定义基座。
280
+
281
+ > **说明:**
282
+ >
283
+ > 由于 TUIRoomKit 包含原生代码(UTS 插件),您**必须**制作自定义调试基座才能在真机上运行。
284
+ >
285
+
286
+ 1. 在 HBuilderX 顶部菜单选择**运行** > **运行到手机或模拟器** > **制作自定义调试基座**。
287
+
288
+ 2. 制作成功后,再次选择**运行** > **运行到手机或模拟器**,在弹窗中勾选**使用自定义调试基座**后运行到您的手机。
289
+
290
+ 具体操作指引参见 编译并运行 Demo。
291
+
292
+ ### 步骤3:登录
293
+
294
+ 集成完成后,您需要完成登录。在您项目中需要使用到多人视频会议能力的地方进行登录,这是**使用 TUIRoomKit 的关键步骤**,因为只有在登录成功后才能正常使用 TUIRoomKit 的各项功能,故请您耐心检查相关参数是否配置正确:
295
+ ``` typescript
296
+ import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
297
+
298
+ const { login } = useLoginState();
299
+
300
+ onMounted(() => {
301
+ login({
302
+ sdkAppID: 1400000001, // 请替换为开通服务控制台的 SDKAppID
303
+ userID: "your userID", // 请替换为您的 UserID
304
+ userSig: "xxxxxxxxxxx", // 您可以在控制台中计算一个 UserSig 并填在这个位置
305
+ });
306
+ });
307
+
308
+ ```
309
+
310
+ **登录接口参数说明**
311
+ | 参数 | 类型 | 说明 |
312
+ | --- | --- | --- |
313
+ | SDKAppID | Number | 从 <a href="https://console.cloud.tencent.com/trtc">TRTC 控制台 > 应用管理</a> 获取。 |
314
+ | userID | String | 当前用户的唯一 ID,仅包含英文字母、数字、连字符和下划线。 |
315
+ | userSig | String | 用于腾讯云鉴权的票据。请注意:<br>- 开发环境:您可以采用本地 <code>GenerateTestUserSig.genTestSig</code> 函数生成 UserSig 或者通过 <a href="https://console.cloud.tencent.com/im/tool-usersig">UserSig 辅助工具</a> 生成临时的 UserSig。<br>- 生产环境:为了防止密钥泄露,请务必采用服务端生成 UserSig 的方式。详细信息请参见 <a href="https://cloud.tencent.com/document/product/647/17275#formal">服务端生成 UserSig</a>。<br>更多信息请参见 <a href="https://cloud.tencent.com/document/product/647/17275">如何计算及使用 UserSig</a>。 |
316
+
317
+ ### 步骤4:注册多人视频会议主页面
318
+
319
+ 现在,您需要在 `pages.json` 文件中告诉您的应用,这个新页面是存在的。
320
+
321
+ 打开您项目根目录下的 `pages.json` 文件,在 `"pages"` 数组中,添加以下对象来注册多人视频会议主页面。
322
+ ``` json
323
+ {
324
+ "pages": [
325
+ // ... 您项目已有的其他页面配置
326
+ {
327
+ "path": "pages/scenes/room/main/index",
328
+ "style": {
329
+ "navigationBarTitleText": "",
330
+ "disableSwipeBack": true, // 禁止右滑返回,防止会中误操作退出
331
+ "app-plus": {
332
+ "titleNView": false // 隐藏原生导航栏,使用页面内的自定义导航
333
+ }
334
+ }
335
+ }
336
+ ]
337
+ // ... 其他配置
338
+ }
339
+ ```
340
+
341
+ ### 步骤5:跳转多人视频会议主页面
342
+
343
+ #### 创建房间
344
+
345
+ 在您需要创建多人视频会议的地方(具体由您的业务决定,在其点击事件里执行),调用 `uni.navigateTo` 或 `uni.redirectTo` 方法,即可进入多人视频会议主页面。
346
+ ``` typescript
347
+ // 示例:在一个按钮的点击事件中
348
+ function startBroadcast() {
349
+ const roomID = '123456'; //房间id
350
+ const roomName = '123456'; //房间名称
351
+ const query = [
352
+ 'mode=create',
353
+ `roomID=${encodeURIComponent(roomID)}`,
354
+ `roomName=${encodeURIComponent(roomName)}`,
355
+ 'autoEnableCamera=1', //进房是否开启摄像头(1 开启, 0 关闭)
356
+ 'autoEnableMicrophone=1', //进房是否开启麦克风(1 开启, 0 关闭)
357
+ 'autoEnableSpeaker=1', //进房是否开启扬声器(1 开启, 0 关闭)
358
+ ].join('&');
359
+ uni.navigateTo({ url: `/pages/scenes/room/main/index?${query}` }); // URL 对应 pages.json 中配置的 path
360
+ }
361
+ ```
362
+
363
+ > **说明:**
364
+ > **navigateTo** 与 **redirectTo**
365
+ >
366
+ > - `uni.navigateTo`:保留当前页面,跳转到新页面,用户可以从多人视频会议主页返回到上一页。适用于创建房间前可以取消的场景。
367
+ > - `uni.redirectTo`:关闭当前页面,跳转到新页面,用户无法返回。适用于支持人直接进入主流程的场景,不需要保存上个界面, 您可以根据自己的业务需求选择使用。
368
+
369
+ #### 加入房间
370
+
371
+ 在您需要加入多人视频会议的地方(具体由您的业务决定,在其点击事件里执行),调用 `uni.navigateTo` 或 `uni.redirectTo` 方法,即可进入多人视频会议主页面。
372
+ ``` typescript
373
+ // 示例:在一个按钮的点击事件中
374
+ function startBroadcast() {
375
+ const roomID = '123456'; //房间id
376
+ const query = [
377
+ 'mode=join',
378
+ `roomID=${encodeURIComponent(roomID)}`,
379
+ 'autoEnableCamera=1', //进房是否开启摄像头(1 开启, 0 关闭)
380
+ 'autoEnableMicrophone=1', //进房是否开启麦克风(1 开启, 0 关闭)
381
+ 'autoEnableSpeaker=1', //进房是否开启扬声器(1 开启, 0 关闭)
382
+ ].join('&');
383
+ uni.navigateTo({ url: `/pages/scenes/room/main/index?${query}` }); // URL 对应 pages.json 中配置的 path
384
+ }
385
+ ```
386
+
387
+ ## 定制您的 UI
388
+
389
+ ### 替换主界面底部栏,顶部栏和视频流用户信息界面图标
390
+
391
+ TUIRoomKit 用到的所有图标都存放于 `static/images` 目录下,部分示例如下,您可以根据您的诉求来替换目录下的图标。
392
+
393
+ 顶部栏:
394
+
395
+ |图标路径|详细描述|
396
+ |---------|---------|
397
+ |/static/images/room/room_switch_camera.png|顶部操作栏切换摄像头图标。|
398
+ |/static/images/room/room_speakerphone.png|顶部操作栏扬声器图标。|
399
+ |/static/images/room/room_earpiece.png|顶部操作栏听筒图标。|
400
+
401
+ 底部栏:
402
+
403
+ |图标路径|详细描述|
404
+ |---------|---------|
405
+ |/static/images/room/room_member.png|底部操作栏成员图标。|
406
+ |/static/images/room/room_mic_on.png|底部操作栏麦克风开启图标。|
407
+ |/static/images/room/room_mic_off.png|底部操作栏麦克风关闭图标。|
408
+ |/static/images/room/room_camera_on.png|底部操作栏摄像头开启图标。|
409
+ |/static/images/room/room_camera_off.png|底部操作栏摄像头关闭图标。|
410
+
411
+ 视频流区域用户状态信息:
412
+
413
+ |图标路径|详细描述|
414
+ |---------|---------|
415
+ |/static/images/room/room_video_view_mic_on.png|视频流用户麦克风开启图标。|
416
+ |/static/images/room/room_video_view_mic_off.png|视频流用户麦克风关闭图标。|
417
+ |/static/images/room/room_video_view_owner.png|视频流用户主持人角色图标。|
418
+ |/static/images/room/room_video_view_admin.png|底部操作栏管理员角色图标。|
419
+
420
+ ### 设置字体的大小/颜色
421
+
422
+ uni-app 官方对 **nvue** 页面限制字体的大小和颜色只能在 `text` 标签上设置,对于您想修改的文案,直接修改其 `css` 样式即可,示例如下
423
+
424
+ 以 “解除静音” 文字为例:
425
+ ``` typescript
426
+ <template>
427
+ <text class="bottom-text">解除静音</text>
428
+ </template>
429
+
430
+ <style>
431
+ .bottom-text {
432
+ color: #FFFFFF;
433
+ font-size: 20rpx;
434
+ margin-top: 6rpx;
435
+ text-overflow: ellipsis;
436
+ }
437
+ </style>
438
+ ```
439
+
440
+ 修改其 css 样式:
441
+ ``` typescript
442
+ <template>
443
+ <text class="bottom-text">开启音频</text>
444
+ </template>
445
+
446
+ <style>
447
+ .bottom-text {
448
+ color: red;
449
+ font-size: 24rpx;
450
+ margin-top: 6rpx;
451
+ text-overflow: ellipsis;
452
+ }
453
+ </style>
454
+
455
+ ```
456
+
457
+ 最终效果:
458
+
459
+ ### 设置按钮的大小
460
+
461
+ 设置按钮的大小,也可以直接通过修改 `css` 属性来进行设置,示例如下:
462
+
463
+ 以底部操作栏麦克风按钮为例:
464
+ ``` typescript
465
+ <template>
466
+ <image class="bottom-icon" src="/static/images/room/room_mic_on.png" mode="aspectFit"/>
467
+ <text class="bottom-text">解除静音</text>
468
+ </template>
469
+
470
+ <style>
471
+ .bottom-icon {
472
+ width: 48rpx;
473
+ height: 48rpx;
474
+ }
475
+ </style>
476
+ ```
477
+
478
+ 设置对应的 `css` 属性:
479
+ ``` typescript
480
+ <template>
481
+ <image class="bottom-icon" src="/static/images/room/room_mic_off.png" mode="aspectFit"/>
482
+ <text class="bottom-text">解除静音</text>
483
+ </template>
484
+
485
+ <style>
486
+ .bottom-icon {
487
+ width: 70rpx;
488
+ height: 70rpx;
489
+ }
490
+ </style>
491
+
492
+ ```
493
+
494
+ 最终效果:
495
+
496
+ ### 隐藏按钮
497
+
498
+ 隐藏按钮可以通过注释代码的方式来进行直接隐藏,示例如下
499
+
500
+ 以底部操作栏的麦克风按钮为例:
501
+ ``` typescript
502
+ <!-- 底部操作栏 -->
503
+ <view class="bottom-bar">
504
+ <MembersButton />
505
+ <!-- <MicButton /> --> <!-- 隐藏麦克风图标 -->
506
+ <CameraButton />
507
+ </view>
508
+ ```
509
+
510
+ 将其注释掉即可实现隐藏按钮。
511
+
512
+ ### 新增按钮
513
+
514
+ 在您需要新增的位置,插入对应的按钮实现。
515
+
516
+ 以底部栏新增“更多”按钮为例:
517
+ ``` typescript
518
+ <template>
519
+ ......
520
+ <!-- 底部操作栏 -->
521
+ <view class="bottom-bar">
522
+ ......
523
+ <view class="action-button-item">
524
+ <image class="bottom-icon" src="/static/images/more.png" mode="aspectFit" />
525
+ <text class="bottom-text">更多</text>
526
+ </view>
527
+ </view>
528
+ </template>
529
+
530
+ <style>
531
+ .bottom-icon {
532
+ width: 48rpx;
533
+ height: 48rpx;
534
+ }
535
+ .bottom-text {
536
+ color: #FFFFFF;
537
+ font-size: 20rpx;
538
+ margin-top: 6rpx;
539
+ text-overflow: ellipsis;
540
+ text-align: center;
541
+ }
542
+ </style>
543
+ ```
544
+
545
+ ## 常见问题
546
+
547
+ #### **Q:该 TUIKit 插件是否支持编译到 H5 或微信小程序?**
548
+
549
+ A:**不支持。**由于新版 TUIKit 基于 **UTS (Uni-app Type Script)** 插件架构开发,深度依赖 Android 和 iOS 的原生能力(如原生渲染引擎、本地数据库、音视频编解码),因此仅支持打包为 **App (Android/iOS)**。
550
+
551
+ #### **Q:我的现有项目全是** `.vue` **页面(Webview 渲染),能直接集成吗?**
552
+
553
+ A:**可以混用,但需要注意页面模式。**
554
+
555
+ nvue 页面和 vue 页面可以互相跳转,但是 vue 页面的子组件不建议是 nvue 组件。TUIKit 的 UI 组件是 nvue 组件,因此使用 TUIKit 所在的**页面(pages)**必须也是 nvue 文件。
556
+
557
+ #### **Q:页面样式错乱、布局塌陷?**
558
+
559
+ A:**没有严格遵守 nvue 的 Flex 布局规范。**
560
+
561
+ nvue 页面中:
562
+ - 默认 `flex-direction` 是 `column`(纵向),而非 Web 的 `row`。
563
+
564
+ - 文本必须包裹在 `<text>` 组件中,不能直接写在 `<div>` 或 `<view>` 里。
565
+
566
+ - 不支持简写属性(例如 `margin: 10px 20px`),必须写全(`margin-top`, `margin-left` 等)。
567
+
568
+ #### **Q:**运行报错 "uni is not defined" 或组件无法加载?
569
+
570
+ A:请检查是否制作并使用了**自定义调试基座**。
571
+
572
+ 由于插件包含原生代码(Java/Objective-C),标准基座不包含这些原生库。
573
+ - **解决步骤:** 请严格按照文档“运行和测试-步骤2”操作,在 HBuilderX 中点击 **运行** > **运行到手机或模拟器** > **制作自定义调试基座**。制作完成后,运行时请务必选择**运行到 Android/iOS 基座**,并勾选“使用自定义基座”。
574
+
575
+ #### **Q:制作自定义基座时一直失败或卡顿怎么办?**
576
+
577
+ A:这通常是本地原生编译环境(Gradle 或 CocoaPods)配置问题导致的。
578
+ - **Android:** 请检查本地 JDK 版本是否兼容,以及网络是否能正常访问 Maven/Google 仓库。
579
+
580
+ - **iOS:** 请确保已安装 CocoaPods 且版本更新,同时检查网络环境是否能访问 GitHub 或 CDN 库。
581
+
@@ -0,0 +1,69 @@
1
+ TUIRoomKit 内置 AI 会议助手功能,为在线会议提供 AI 智能辅助。会议界面默认提供 AI 会议助手入口按钮,用户可通过该按钮使用以下核心功能:
2
+ - **AI 实时字幕:**在会议进行中,实时将语音讨论内容转化为文字字幕并显示在屏幕上,辅助沟通与理解。
3
+
4
+ - **AI 实时翻译:**开启 AI 实时字幕后,默认同步开启实时翻译功能。房主可设置翻译语言,具体支持的语言。
5
+
6
+ - **AI 实时会议记录:**在会议进行中,持续将语音讨论内容转录为文本记录,便于会后整理与回顾。
7
+
8
+ ## 前提条件
9
+
10
+ ### 1. 开通智能语音服务
11
+
12
+ 使用 AI 功能,会产生费用消耗,计费规则参考 AI 智能语音。
13
+
14
+ ### 2. 基础环境集成
15
+
16
+ 请参考 [快速接入](https://cloud.tencent.com/document/product/647/81962) 将 `@tencentcloud/roomkit-web-vue3` 集成到项目中,确保版本 `≥ 5.1.2`。
17
+
18
+ ## 显示或隐藏 AI 会议助手
19
+
20
+ AI 会议助手入口按钮默认显示在会议界面,无需额外配置即可使用。如需隐藏或重新显示该按钮,可调用 `conference.setWidgetVisible` 接口控制 `AIToolsWidget` 组件的可见性。
21
+
22
+ > **说明:**
23
+ > 入口按钮显示后不会自动开启转录任务,需由房主主动点击「AI 实时字幕」或「AI 实时会议记录」后,组件内部才会开启 AI 转录任务。
24
+ >
25
+
26
+ ``` typescript
27
+ <template>
28
+ <ConferenceMainView />
29
+ </template>
30
+
31
+ <script setup lang="ts">
32
+ import { conference, BuiltinWidget } from '@tencentcloud/roomkit-web-vue3';
33
+
34
+ // AI 会议助手入口按钮默认显示;如需隐藏,可将其可见性设为 false
35
+ conference.setWidgetVisible({ [BuiltinWidget.AIToolsWidget]: false });
36
+ </script>
37
+ ```
38
+
39
+ ## 关闭 AI 会议助手
40
+
41
+ 使用 **AI 会议助手**组件时,开发者无需手动关闭 AI 转录任务。组件内部已实现自动清理机制:
42
+ - **退出房间时**:自动停止 AI 转录任务。
43
+
44
+ - **资源释放**:自动清理相关内存资源。
45
+
46
+ ## 开发注意事项
47
+ - **版本依赖**:AI 会议助手功能需要 `@tencentcloud/roomkit-web-vue3` 版本 ≥ 5.1.2,请确保已安装符合要求的版本。
48
+
49
+ - **调用时机:**入口按钮默认显示,无需额外配置。如需通过 `conference.setWidgetVisible` 调整按钮的显示状态,请确保该代码在 `ConferenceMainView` 加载前执行。
50
+
51
+ - **计费逻辑:**AI 转录任务由房主主动开启,同一个房间只计费一次,普通成员使用不会重复计费。
52
+
53
+ - **网络要求:**AI 识别依赖稳定的上行网络,网络抖动可能导致字幕出现延迟或丢失。
54
+
55
+ ## 常见问题
56
+
57
+ ### 会议界面未出现“AI 会议助手”按钮?
58
+
59
+ **问题描述:**已集成 TUIRoomKit,但会议界面未出现“AI 会议助手”按钮。
60
+
61
+ **解决方案:**AI 会议助手入口按钮默认显示,若未出现请依次排查:1. 是否调用了 `conference.setWidgetVisible` 将 `AIToolsWidget` 设为了 `false`;2. 当前是否为直播(Webinar)房间,该场景暂不展示该按钮;3. `@tencentcloud/roomkit-web-vue3` 版本是否符合要求。
62
+
63
+ ### 房间内所有成员都能使用 AI 功能吗?
64
+
65
+ **功能说明**:转录任务仅房主可开启。房主点击开启 AI 转录任务后,房间内所有成员均可使用 AI 实时字幕与会议记录功能。
66
+
67
+ ### AI 功能是否会产生重复计费?
68
+
69
+ **计费说明**:不会重复计费。转录任务仅由房主开启一次,因此每个会议房间只会产生一次计费。若房主未开启转录任务,则不会开启转录,也不会产生相关费用。