@tencentcloud/sdk-mcp 1.1.3 → 1.1.6

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 (73) hide show
  1. package/README.md +5 -1
  2. package/index.js +2 -0
  3. package/index.js.map +1 -1
  4. package/libs/TLSSigAPIv2.d.ts +134 -0
  5. package/libs/TLSSigAPIv2.js +243 -0
  6. package/package.json +1 -1
  7. package/resource/doc/chatuikit/react/chat_window_integration.md +78 -0
  8. package/resource/doc/chatuikit/react/integration.md +9 -2
  9. package/resource/doc/chatuikit/vue/chat_window_integration.md +130 -0
  10. package/resource/doc/chatuikit/vue/integration.md +5 -44
  11. package/resource/doc/livekit/vue/components/barrage.md +3 -3
  12. package/resource/doc/livekit/vue/components/broadcast.md +603 -0
  13. package/resource/doc/livekit/vue/components/co-guest-panel.md +127 -0
  14. package/resource/doc/livekit/vue/components/live-audience-list.md +282 -0
  15. package/resource/doc/livekit/vue/components/live-list.md +5 -6
  16. package/resource/doc/livekit/vue/components/live-player.md +5 -6
  17. package/resource/doc/livekit/vue/components/live-scene-panel.md +193 -0
  18. package/resource/doc/livekit/vue/components/live-view.md +6 -6
  19. package/resource/doc/livekit/vue/components/stream-mixer.md +442 -0
  20. package/resource/doc/roomkit/{states → vue/states}/device-state.md +3 -3
  21. package/resource/doc/roomkit/{states → vue/states}/login-state.md +3 -3
  22. package/resource/doc/roomkit/{states → vue/states}/room-list-state.md +3 -3
  23. package/resource/doc/roomkit/{states → vue/states}/room-participant-state.md +3 -3
  24. package/resource/doc/rtcengine/web/how_to_integrated_web_rtc_engine.md +1 -0
  25. package/resource/doc/tuicallkit/vue/api_TUICallKit.md +3 -0
  26. package/resource/doc/tuicallkit/vue/how_to_integrated_vue_callkit.md +3 -0
  27. package/resource/doc/tuicallkit/vue/how_to_run_vue_callkit_demo.md +3 -0
  28. package/server-config.js +34 -0
  29. package/server-config.js.map +1 -0
  30. package/tools/chat/get-chat-faq.js +2 -3
  31. package/tools/chat/get-chat-faq.js.map +1 -1
  32. package/tools/chat/get-native-chat-integration.js +4 -4
  33. package/tools/chat/get-web-chat-component-detail.js +3 -3
  34. package/tools/chat/get-web-chat-integration.js +10 -10
  35. package/tools/chat/get-web-chat-integration.js.map +1 -1
  36. package/tools/chat/get-web-chat-uikit-init.js +2 -2
  37. package/tools/chat/get-web-chat-uikit-init.js.map +1 -1
  38. package/tools/chat/get-web-chat-window-integration.js +36 -0
  39. package/tools/chat/get-web-chat-window-integration.js.map +1 -0
  40. package/tools/common/get-usersig.js +30 -26
  41. package/tools/common/get-usersig.js.map +1 -1
  42. package/tools/common/record-prompt.js +5 -5
  43. package/tools/common/record-result.js +7 -6
  44. package/tools/common/record-result.js.map +1 -1
  45. package/tools/index.js +10 -5
  46. package/tools/index.js.map +1 -1
  47. package/tools/live/get-web-live-component-detail.js +4 -6
  48. package/tools/live/get-web-live-component-detail.js.map +1 -1
  49. package/tools/live/get-web-live-state-detail.js +6 -6
  50. package/tools/live/get-web-live-state-detail.js.map +1 -1
  51. package/tools/room/get-web-room-state-detail.js +6 -6
  52. package/tools/room/get-web-room-state-detail.js.map +1 -1
  53. package/tools/rtcengine/get-rtcengine-web-sdk-integration-guide.js +34 -0
  54. package/tools/rtcengine/get-rtcengine-web-sdk-integration-guide.js.map +1 -0
  55. package/tools/rtcengine/{get-rtcenigne-faq.js → get-trtc-web-sdk-faq.js} +5 -5
  56. package/tools/rtcengine/get-trtc-web-sdk-faq.js.map +1 -0
  57. package/tools/rtcengine/get-trtc-web-sdk-integration-guide.js +35 -0
  58. package/tools/rtcengine/get-trtc-web-sdk-integration-guide.js.map +1 -0
  59. package/utils/generate-usersig.js +7 -9
  60. package/utils/generate-usersig.js.map +1 -1
  61. package/utils/get-doc-content.js +0 -1
  62. package/utils/get-doc-content.js.map +1 -1
  63. package/utils/handle-component-name.js +53 -17
  64. package/utils/handle-component-name.js.map +1 -1
  65. package/utils/handle-state-name.js +29 -0
  66. package/utils/handle-state-name.js.map +1 -0
  67. package/libs/lib-generate-test-usersig-es.min.d.ts +0 -6
  68. package/libs/lib-generate-test-usersig-es.min.js +0 -2
  69. package/resource/doc/livekit/vue/components/states/live-state.md +0 -2656
  70. package/tools/rtcengine/get-rtcengine-integration-guide.js +0 -32
  71. package/tools/rtcengine/get-rtcengine-integration-guide.js.map +0 -1
  72. package/tools/rtcengine/get-rtcenigne-faq.js.map +0 -1
  73. /package/resource/doc/chatuikit/react/{login.md → init.md} +0 -0
@@ -1,4 +1,4 @@
1
- 本文对 TUILiveKit **直播视频组件(LiveView)** 进行了详细的介绍,您可以在已有项目中直接参考本文示例集成我们开发好的组件,也可以根据您的需求按照文档中的组件定制化部分对样式,布局进行深度的定制。
1
+ 本文对 TUILiveKit 组件中的 **直播视频组件(LiveView)** 进行了详细的介绍,您可以在已有项目中直接参考本文示例集成我们开发好的组件,也可以根据您的需求按照文档中的组件定制化部分对样式,布局进行深度的定制。
2
2
 
3
3
  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/1b766277b00211f09e195254007c27c5.png)
4
4
 
@@ -38,19 +38,19 @@
38
38
 
39
39
  【npm】
40
40
  ``` bash
41
- npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
41
+ npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
42
42
  ```
43
43
 
44
44
 
45
45
  【pnpm】
46
46
  ``` bash
47
- pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
47
+ pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
48
48
  ```
49
49
 
50
50
 
51
51
  【yarn】
52
52
  ``` bash
53
- yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
53
+ yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
54
54
  ```
55
55
 
56
56
  ### 步骤3:加入直播间并进行连麦
@@ -121,10 +121,10 @@ LiveView 提供了灵活的组件自定义插槽,该插槽支持您根据自
121
121
  </tr>
122
122
  </table>
123
123
 
124
- ``` java
124
+ ``` typescript
125
125
  // seatViewUI 插槽使用示例
126
126
  <LiveView>
127
- <CustomSeatViewUI #seatViewUI></CustomSeatViewUI>
127
+ <CustomStreamViewUI #streamViewUI></CustomStreamViewUI>
128
128
  </LiveView>
129
129
  ```
130
130
  1. `SeatInfo` 定义了直播房间中每个麦位的基本信息和状态:
@@ -0,0 +1,442 @@
1
+ 本文对 TUILiveKit 组件中的**视频源编辑画板(StreamMixer)**进行了详细的介绍,您可以在已有项目中直接参考本文示例集成我们开发好的组件,也可以根据您的需求按照文档中的组件定制化部分对样式,布局进行深度的定制。
2
+
3
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/39af62f299ef11f0bf2352540044a08e.png)
4
+
5
+
6
+ ## 核心功能
7
+ <table>
8
+ <tr>
9
+ <td rowspan="1" colSpan="1" >**功能分类**</td>
10
+
11
+ <td rowspan="1" colSpan="1" >**具体能力**</td>
12
+ </tr>
13
+
14
+ <tr>
15
+ <td rowspan="1" colSpan="1" >**实时预览**</td>
16
+
17
+ <td rowspan="1" colSpan="1" >提供所见即所得的编辑体验,主播可以直观地看到混流效果,支持对元素进行旋转、移动、缩放、镜像、层级调整等操作</td>
18
+ </tr>
19
+
20
+ <tr>
21
+ <td rowspan="1" colSpan="1" >**模板布局**</td>
22
+
23
+ <td rowspan="1" colSpan="1" >内置多种直播间布局模板,支持自动适配不同连麦场景,包括九宫格、1v6、浮窗等,帮助您快速切换不同风格的直播画面。</td>
24
+ </tr>
25
+
26
+ <tr>
27
+ <td rowspan="1" colSpan="1" >**用户状态管理**</td>
28
+
29
+ <td rowspan="1" colSpan="1" >智能感知连麦用户的加入和退出,自动调整布局,无需手动干预,确保了直播过程的流畅性,为主播提供无缝体验。</td>
30
+ </tr>
31
+
32
+ <tr>
33
+ <td rowspan="1" colSpan="1" >**可定制化 UI**</td>
34
+
35
+ <td rowspan="1" colSpan="1" >为了满足多样化的业务场景,视频源编辑画板提供组件 UI 自定义插槽,让您能够完全掌控连麦用户的视频流区域,重写其 UI 展示,灵活定义连麦用户的头像、昵称、状态等信息,轻松打造符合您 UI 风格的独特视觉体验。</td>
36
+ </tr>
37
+ </table>
38
+
39
+
40
+ ## 组件接入
41
+
42
+ ### 步骤1:环境配置及开通服务
43
+
44
+ 在进行快速接入之前,您需要参见 [准备工作](https://write.woa.com/document/185222107981008896),满足相关环境配置及开通对应服务。
45
+
46
+ ### 步骤2: 安装依赖
47
+
48
+
49
+
50
+
51
+ 【npm】
52
+ ``` bash
53
+ npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
54
+ ```
55
+
56
+
57
+ 【pnpm】
58
+ ``` bash
59
+ pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
60
+ ```
61
+
62
+
63
+ 【yarn】
64
+ ``` bash
65
+ yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
66
+ ```
67
+
68
+ ### 步骤3:加入直播间
69
+
70
+ 在您的项目中引入并使用**视频源编辑画板**,可直接复制如下代码示例至您的项目中加入对应直播间。
71
+ ``` typescript
72
+ <template>
73
+ <UIKitProvider theme="dark" language="zh-CN">
74
+ <div class="app">
75
+ <LiveScenePanel class="live-scene-panel" />
76
+ <StreamMixer class="live-stream-mixer" />
77
+ </div>
78
+ </UIKitProvider>
79
+ </template>
80
+
81
+ <script setup lang="ts">
82
+ import { onMounted } from 'vue';
83
+ import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
84
+ import { LiveScenePanel, StreamMixer, useLoginState, useLiveState, useCoGuestState } from 'tuikit-atomicx-vue3';
85
+
86
+ const { login } = useLoginState();
87
+ const { createLive } = useLiveState();
88
+ const { sendCoGuestRequest } = useCoGuestState();
89
+
90
+ async function initLogin() {
91
+ try {
92
+ await login({
93
+ sdkAppId: 0, // SDKAppID, 可以参考步骤 1 获取
94
+ userId: '', // UserID, 可以参考步骤 1 获取
95
+ userSig: '', // userSig, 可以参考步骤 1 获取
96
+ });
97
+ } catch (error) {
98
+ console.error('登录失败:', error);
99
+ }
100
+ }
101
+
102
+ onMounted(async () => {
103
+ await initLogin();
104
+ await createLive({ // 主播创建直播间之后, StreamMixer 自动将本地合图画面推流到直播间
105
+ liveId: `live_${loginUserInfo.value.userId}`,
106
+ liveName: `${loginUserInfo.value?.userName} 的直播间`,
107
+ });
108
+ await sendCoGuestRequest(); // 观众端通过调用相应方法即可加入直播间并根据需要上下麦,观众成功上麦之后,StreamMixer 自动播放实时音视频流
109
+ });
110
+ </script>
111
+
112
+ <style>.app {width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center}</style>
113
+ ```
114
+ ``` bash
115
+ npm run dev
116
+ ```
117
+
118
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/395ffe7b99ef11f09936525400e889b2.gif)
119
+
120
+
121
+ ## 组件定制化
122
+
123
+ **视频源编辑画板**提供了灵活的组件自定义插槽,该插槽支持您根据自己需求调整头像、昵称、状态等元素的样式与布局,也支持定制视频流区域连麦 UI。下列分别给出插槽使用示例
124
+
125
+ ### 组件插槽
126
+ <table>
127
+ <tr>
128
+ <td rowspan="1" colSpan="1" >**名称**</td>
129
+
130
+ <td rowspan="1" colSpan="1" >**参数**</td>
131
+
132
+ <td rowspan="1" colSpan="1" >**说明**</td>
133
+ </tr>
134
+
135
+ <tr>
136
+ <td rowspan="1" colSpan="1" >seatViewUI</td>
137
+
138
+ <td rowspan="1" colSpan="1" >seatInfo: SeatInfo</td>
139
+
140
+ <td rowspan="1" colSpan="1" >自定义麦位的显示 UI</td>
141
+ </tr>
142
+ </table>
143
+
144
+ ``` java
145
+ // seatViewUI 插槽使用示例
146
+ <StreamMixer>
147
+ <CustomSeatViewUI #seatViewUI></CustomSeatViewUI>
148
+ </StreamMixer>
149
+ ```
150
+ 1. `SeatInfo` 定义了直播房间中每个麦位的基本信息和状态:
151
+
152
+ <table>
153
+ <tr>
154
+ <td rowspan="1" colSpan="1" >参数</td>
155
+
156
+ <td rowspan="1" colSpan="1" >类型</td>
157
+
158
+ <td rowspan="1" colSpan="1" >属性</td>
159
+
160
+ <td rowspan="1" colSpan="1" >说明</td>
161
+ </tr>
162
+
163
+ <tr>
164
+ <td rowspan="1" colSpan="1" >index</td>
165
+
166
+ <td rowspan="1" colSpan="1" >number</td>
167
+
168
+ <td rowspan="1" colSpan="1" >必填</td>
169
+
170
+ <td rowspan="1" colSpan="1" >麦位的索引号,从0开始递增,用于标识麦位在房间中的位置。</td>
171
+ </tr>
172
+
173
+ <tr>
174
+ <td rowspan="1" colSpan="1" >isLocked</td>
175
+
176
+ <td rowspan="1" colSpan="1" >boolean</td>
177
+
178
+ <td rowspan="1" colSpan="1" >必填</td>
179
+
180
+ <td rowspan="1" colSpan="1" >麦位锁定状态,true 表示麦位被锁定,其他用户无法进入;false 表示麦位开放。</td>
181
+ </tr>
182
+
183
+ <tr>
184
+ <td rowspan="1" colSpan="1" >userInfo</td>
185
+
186
+ <td rowspan="1" colSpan="1" >SeatUserInfo</td>
187
+
188
+ <td rowspan="1" colSpan="1" >非必填</td>
189
+
190
+ <td rowspan="1" colSpan="1" >当前坐在该麦位上的用户信息,如果麦位为空则为 `undefined`。</td>
191
+ </tr>
192
+
193
+ <tr>
194
+ <td rowspan="1" colSpan="1" >region</td>
195
+
196
+ <td rowspan="1" colSpan="1" >RegionInfo</td>
197
+
198
+ <td rowspan="1" colSpan="1" >非必填</td>
199
+
200
+ <td rowspan="1" colSpan="1" >麦位在视频画布中的显示区域信息,用于多路视频布局。</td>
201
+ </tr>
202
+ </table>
203
+
204
+ ``` typescript
205
+ interface SeatInfo {
206
+ index: number; // 麦位索引
207
+ isLocked: boolean; // 麦位是否被锁定
208
+ userInfo?: SeatUserInfo; // 麦位上的用户信息(可选)
209
+ region?: RegionInfo; // 麦位在画布中的区域信息(可选)
210
+ }
211
+ ```
212
+ 2. `SeatUserInfo` 定义了直播房间中每个麦位上的用户详细信息:
213
+
214
+ <table>
215
+ <tr>
216
+ <td rowspan="1" colSpan="1" >参数</td>
217
+
218
+ <td rowspan="1" colSpan="1" >类型</td>
219
+
220
+ <td rowspan="1" colSpan="1" >属性</td>
221
+
222
+ <td rowspan="1" colSpan="1" >说明</td>
223
+ </tr>
224
+
225
+ <tr>
226
+ <td rowspan="1" colSpan="1" >roomId</td>
227
+
228
+ <td rowspan="1" colSpan="1" >string</td>
229
+
230
+ <td rowspan="1" colSpan="1" >必填</td>
231
+
232
+ <td rowspan="1" colSpan="1" >当前直播房间的唯一标识符,用于区分不同的直播房间。</td>
233
+ </tr>
234
+
235
+ <tr>
236
+ <td rowspan="1" colSpan="1" >userId</td>
237
+
238
+ <td rowspan="1" colSpan="1" >string</td>
239
+
240
+ <td rowspan="1" colSpan="1" >必填</td>
241
+
242
+ <td rowspan="1" colSpan="1" >用户的唯一标识符,在整个系统中保持唯一性。</td>
243
+ </tr>
244
+
245
+ <tr>
246
+ <td rowspan="1" colSpan="1" >userName</td>
247
+
248
+ <td rowspan="1" colSpan="1" >string</td>
249
+
250
+ <td rowspan="1" colSpan="1" >必填</td>
251
+
252
+ <td rowspan="1" colSpan="1" >用户在直播中显示的名称,支持中文、英文等字符。</td>
253
+ </tr>
254
+
255
+ <tr>
256
+ <td rowspan="1" colSpan="1" >avatarUrl</td>
257
+
258
+ <td rowspan="1" colSpan="1" >string</td>
259
+
260
+ <td rowspan="1" colSpan="1" >必填</td>
261
+
262
+ <td rowspan="1" colSpan="1" >用户头像的完整URL地址,支持 HTTPS 协议。</td>
263
+ </tr>
264
+
265
+ <tr>
266
+ <td rowspan="1" colSpan="1" >microphoneStatus</td>
267
+
268
+ <td rowspan="1" colSpan="1" >DeviceStatus</td>
269
+
270
+ <td rowspan="1" colSpan="1" >必填</td>
271
+
272
+ <td rowspan="1" colSpan="1" >麦克风的当前状态。</td>
273
+ </tr>
274
+
275
+ <tr>
276
+ <td rowspan="1" colSpan="1" >microphoneStatusReason</td>
277
+
278
+ <td rowspan="1" colSpan="1" >DeviceStatusReason</td>
279
+
280
+ <td rowspan="1" colSpan="1" >必填</td>
281
+
282
+ <td rowspan="1" colSpan="1" >麦克风状态变更的原因,用于区分是用户主动操作还是管理员操作。</td>
283
+ </tr>
284
+
285
+ <tr>
286
+ <td rowspan="1" colSpan="1" >cameraStatus</td>
287
+
288
+ <td rowspan="1" colSpan="1" >DeviceStatus</td>
289
+
290
+ <td rowspan="1" colSpan="1" >必填</td>
291
+
292
+ <td rowspan="1" colSpan="1" >摄像头的当前状态。</td>
293
+ </tr>
294
+
295
+ <tr>
296
+ <td rowspan="1" colSpan="1" >cameraStatusReason</td>
297
+
298
+ <td rowspan="1" colSpan="1" >DeviceStatusReason</td>
299
+
300
+ <td rowspan="1" colSpan="1" >必填</td>
301
+
302
+ <td rowspan="1" colSpan="1" >摄像头状态变更的原因,用于区分是用户主动操作还是管理员操作。</td>
303
+ </tr>
304
+ </table>
305
+
306
+ ``` typescript
307
+ interface SeatUserInfo {
308
+ roomId: string; // 直播房间ID
309
+ userId: string; // 用户唯一标识
310
+ userName: string; // 用户显示名称
311
+ avatarUrl: string; // 用户头像URL
312
+ microphoneStatus: DeviceStatus; // 麦克风状态
313
+ allowOpenMicrophone: boolean; // 是否允许打开麦克风
314
+ cameraStatus: DeviceStatus; // 摄像头状态
315
+ allowOpenCamera: boolean; // 是否允许打开摄像头
316
+ }
317
+
318
+ export type SeatUserInfo = {
319
+ liveId: string; // 直播房间ID
320
+ userId: string; // 用户唯一标识
321
+ userName: string; // 用户显示名称
322
+ avatarUrl: string; // 用户头像URL
323
+ microphoneStatus: DeviceStatus; // 麦克风状态
324
+ microphoneStatusReason: DeviceStatusReason; // 麦克风状态变更原因
325
+ cameraStatus: DeviceStatus; // 摄像头状态
326
+ cameraStatusReason: DeviceStatusReason; // 摄像头状态变更原因
327
+ }
328
+ ```
329
+ 3. `RegionInfo` 定义了麦位在视频画布中的显示区域和层级信息:
330
+
331
+ <table>
332
+ <tr>
333
+ <td rowspan="1" colSpan="1" >参数</td>
334
+
335
+ <td rowspan="1" colSpan="1" >类型</td>
336
+
337
+ <td rowspan="1" colSpan="1" >属性</td>
338
+
339
+ <td rowspan="1" colSpan="1" >说明</td>
340
+ </tr>
341
+
342
+ <tr>
343
+ <td rowspan="1" colSpan="1" >x</td>
344
+
345
+ <td rowspan="1" colSpan="1" >number</td>
346
+
347
+ <td rowspan="1" colSpan="1" >必填</td>
348
+
349
+ <td rowspan="1" colSpan="1" >区域左上角相对于画布左上角的X坐标(像素值)。</td>
350
+ </tr>
351
+
352
+ <tr>
353
+ <td rowspan="1" colSpan="1" >y</td>
354
+
355
+ <td rowspan="1" colSpan="1" >number</td>
356
+
357
+ <td rowspan="1" colSpan="1" >必填</td>
358
+
359
+ <td rowspan="1" colSpan="1" >区域左上角相对于画布左上角的Y坐标(像素值)。</td>
360
+ </tr>
361
+
362
+ <tr>
363
+ <td rowspan="1" colSpan="1" >w</td>
364
+
365
+ <td rowspan="1" colSpan="1" >number</td>
366
+
367
+ <td rowspan="1" colSpan="1" >必填</td>
368
+
369
+ <td rowspan="1" colSpan="1" >区域的宽度(像素值),必须大于0。</td>
370
+ </tr>
371
+
372
+ <tr>
373
+ <td rowspan="1" colSpan="1" >h</td>
374
+
375
+ <td rowspan="1" colSpan="1" >number</td>
376
+
377
+ <td rowspan="1" colSpan="1" >必填</td>
378
+
379
+ <td rowspan="1" colSpan="1" >区域的高度(像素值),必须大于0。</td>
380
+ </tr>
381
+
382
+ <tr>
383
+ <td rowspan="1" colSpan="1" >zOrder</td>
384
+
385
+ <td rowspan="1" colSpan="1" >number</td>
386
+
387
+ <td rowspan="1" colSpan="1" >必填</td>
388
+
389
+ <td rowspan="1" colSpan="1" >层级顺序,数值越大越靠前显示,用于处理重叠区域的显示优先级。</td>
390
+ </tr>
391
+ </table>
392
+
393
+ ``` typescript
394
+ interface RegionInfo {
395
+ x: number; // 区域左上角X坐标
396
+ y: number; // 区域左上角Y坐标
397
+ w: number; // 区域宽度
398
+ h: number; // 区域高度
399
+ zOrder: number; // 层级顺序
400
+ }
401
+ ```
402
+
403
+ ### 自定义插槽示例
404
+
405
+ 为了更好地让您体验及理解视频源编辑画板 组件的 seatViewUI 插槽定制化能力,我们提供了**直播连麦场景**示例场景供您参考,您可以参考上述**步骤3**将以下代码增量复制至您的项目中实现类似场景的效果。
406
+ ``` typescript
407
+ <template>
408
+ <StreamMixer>
409
+ <template #seatViewUI="{ userInfo }">
410
+ <div
411
+ class="live-stream-view"
412
+ :class="{ 'is-anchor': isAnchor(userInfo), 'is-guest': !isAnchor(userInfo) }"
413
+ >
414
+ <!-- 用户信息覆盖层 -->
415
+ <div class="user-overlay">
416
+ <div class="user-badge" :class="{ 'anchor-badge': isAnchor(userInfo) }">
417
+ {{ isAnchor(userInfo) ? '主播' : '观众' }}
418
+ </div>
419
+ <div class="user-name">{{ userInfo.userName }}</div>
420
+ <div class="device-status">
421
+ <span :class="['mic', userInfo.microphoneStatus]"></span>
422
+ <span :class="['camera', userInfo.cameraStatus]"></span>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </template>
427
+ </StreamMixer>
428
+ </template>
429
+
430
+ <script setup lang="ts">
431
+ import { StreamMixer } from 'tuikit-atomicx-vue3';
432
+ import type { SeatUserInfo } from 'tuikit-atomicx-vue3';
433
+
434
+ // 判断是否为主播(根据业务逻辑)
435
+ const isAnchor = (userInfo: SeatUserInfo) => {
436
+ // 这里可以根据用户ID、角色等判断
437
+ return userInfo.userId.includes('anchor') || userInfo.userName.includes('主播');
438
+ };
439
+ </script>
440
+
441
+ <style scoped>.live-stream-view{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}.live-stream-view.is-anchor{border:3px solid #ff6b35;box-shadow:0 0 20px rgba(255,107,53,.3)}.live-stream-view.is-guest{border:1px solid #ddd}.video-area{width:100%;height:100%;background:#000}.user-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:10px;color:#fff}.user-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;margin-bottom:5px;background:#666}.anchor-badge{background:#ff6b35;color:#fff}.user-name{font-weight:700;margin-bottom:5px}.device-status span{margin-right:5px;opacity:.8}.device-status .camera.Off,.device-status .mic.Off{opacity:.3}</style>
442
+ ```
@@ -5,15 +5,15 @@
5
5
  您可以选择以下任一方式安装依赖:
6
6
  【npm】
7
7
  ``` bash
8
- npm install tuikit-atomicx-vue3 --save
8
+ npm install tuikit-atomicx-vue3@latest --save
9
9
  ```
10
10
  【pnpm】
11
11
  ``` bash
12
- pnpm add tuikit-atomicx-vue3
12
+ pnpm add tuikit-atomicx-vue3@latest
13
13
  ```
14
14
  【yarn】
15
15
  ``` bash
16
- yarn add tuikit-atomicx-vue3
16
+ yarn add tuikit-atomicx-vue3@latest
17
17
  ```
18
18
 
19
19
  ## Enums
@@ -7,15 +7,15 @@ Room 组件登录 API 文档。
7
7
  您可以选择以下任一方式安装依赖:
8
8
  【npm】
9
9
  ``` bash
10
- npm install tuikit-atomicx-vue3 --save
10
+ npm install tuikit-atomicx-vue3@latest --save
11
11
  ```
12
12
  【pnpm】
13
13
  ``` bash
14
- pnpm add tuikit-atomicx-vue3
14
+ pnpm add tuikit-atomicx-vue3@latest
15
15
  ```
16
16
  【yarn】
17
17
  ``` bash
18
- yarn add tuikit-atomicx-vue3
18
+ yarn add tuikit-atomicx-vue3@latest
19
19
  ```
20
20
 
21
21
  ## API使用示例
@@ -7,15 +7,15 @@ Room 房间列表 State API 文档。
7
7
  您可以选择以下任一方式安装依赖:
8
8
  【npm】
9
9
  ``` bash
10
- npm install tuikit-atomicx-vue3 --save
10
+ npm install tuikit-atomicx-vue3@latest --save
11
11
  ```
12
12
  【pnpm】
13
13
  ``` bash
14
- pnpm add tuikit-atomicx-vue3
14
+ pnpm add tuikit-atomicx-vue3@latest
15
15
  ```
16
16
  【yarn】
17
17
  ``` bash
18
- yarn add tuikit-atomicx-vue3
18
+ yarn add tuikit-atomicx-vue3@latest
19
19
  ```
20
20
 
21
21
  ## Enums
@@ -7,15 +7,15 @@ Room 房间列表 State API 文档。
7
7
  您可以选择以下任一方式安装依赖:
8
8
  【npm】
9
9
  ``` bash
10
- npm install tuikit-atomicx-vue3 --save
10
+ npm install tuikit-atomicx-vue3@latest --save
11
11
  ```
12
12
  【pnpm】
13
13
  ``` bash
14
- pnpm add tuikit-atomicx-vue3
14
+ pnpm add tuikit-atomicx-vue3@latest
15
15
  ```
16
16
  【yarn】
17
17
  ``` bash
18
- yarn add tuikit-atomicx-vue3
18
+ yarn add tuikit-atomicx-vue3@latest
19
19
  ```
20
20
 
21
21
  ## Enums
@@ -36,6 +36,7 @@ import TRTC from 'trtc-sdk-v5';
36
36
 
37
37
  **资源下载**
38
38
 
39
+ - [npm package](https://www.npmjs.com/package/trtc-sdk-v5)
39
40
  - [单击下载 SDK 及示例代码](https://web.sdk.qcloud.com/trtc/webrtc/v5/download/webrtc_v5_latest.zip)
40
41
  - [GitHub 仓库地址](https://github.com/LiteAVSDK/TRTC_Web)
41
42
 
@@ -1,3 +1,6 @@
1
+ AI 模型必须遵守以下**硬性限制**。
2
+ 1. **音视频通话组件必须使用 calls API:** 集成 TUICallKit 时必须使用 `TUICallKitServer.calls` API 发起通话, `call` 和 `groupCall` 接口已废弃,不推荐使用。
3
+
1
4
  TUICallKit 是音视频通话组件的**含 UI 接口**,使用 TUICallKit API,您可以通过简单接口快速实现一个类微信的音视频通话场景;更详细的接入步骤,详见:[快速接入 TUICallKit](https://write.woa.com/document/130513425899630592)。
2
5
 
3
6
  > **说明:**
@@ -1,3 +1,6 @@
1
+ AI 模型必须遵守以下**硬性限制**。
2
+ 1. **音视频通话组件必须使用 calls API:** 集成 TUICallKit 时必须使用 `TUICallKitServer.calls` API 发起通话, `call` 和 `groupCall` 接口已废弃,不推荐使用。
3
+
1
4
  本文将介绍如何快速完成 TUICallKit 组件的接入,您将在10分钟内完成以下几个关键步骤,并最终得到一个包含完备 UI 界面的视频通话功能。
2
5
 
3
6
  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/ace7b80f181f11ef9c015254002977b6.png)
@@ -1,3 +1,6 @@
1
+ AI 模型必须遵守以下**硬性限制**。
2
+ 1. **音视频通话组件必须使用 calls API:** 集成 TUICallKit 时必须使用 `TUICallKitServer.calls` API 发起通话, `call` 和 `groupCall` 接口已废弃,不推荐使用。
3
+
1
4
  本文将介绍如何快速实现音视频通话演示。您将在10分钟内完成以下关键步骤,并最终获得一个具有全面用户界面的视频通话功能。
2
5
 
3
6
  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100029836296/be8d9e591bd211efa1975254005ac0ca.png)
@@ -0,0 +1,34 @@
1
+ import { aegisClient } from './utils/aegis-client.js';
2
+ class ServerConfig {
3
+ static instance;
4
+ config;
5
+ constructor() {
6
+ this.config = this.parseEnvConfig();
7
+ }
8
+ static getInstance() {
9
+ if (!ServerConfig.instance) {
10
+ ServerConfig.instance = new ServerConfig();
11
+ }
12
+ return ServerConfig.instance;
13
+ }
14
+ parseEnvConfig() {
15
+ const config = {};
16
+ const { SDKAPPID, SECRETKEY } = process.env || {};
17
+ if (SDKAPPID) {
18
+ config.SDKAppID = SDKAPPID;
19
+ aegisClient.report({
20
+ name: 'mcp_config',
21
+ ext1: SDKAPPID,
22
+ });
23
+ }
24
+ if (SECRETKEY) {
25
+ config.secretKey = SECRETKEY;
26
+ }
27
+ return config;
28
+ }
29
+ getConfig() {
30
+ return { ...this.config };
31
+ }
32
+ }
33
+ export { ServerConfig, };
34
+ //# sourceMappingURL=server-config.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"server-config.js","sourceRoot":"","sources":["../src/server-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,YAAY;IAChB,MAAM,CAAC,QAAQ,CAAe;IACtB,MAAM,CAAsB;IACpC;QACE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAEM,MAAM,CAAC,WAAW;QACvB,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;YAC3B,YAAY,CAAC,QAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;QAC7C,CAAC;QACD,OAAO,YAAY,CAAC,QAAQ,CAAC;IAC/B,CAAC;IAEO,cAAc;QACpB,MAAM,MAAM,GAAwB,EAAE,CAAC;QACvC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC;QAClD,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;YAC3B,WAAW,CAAC,MAAM,CAAC;gBACjB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,QAAQ;aACf,CAAC,CAAC;QACL,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;QAC/B,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAEM,SAAS;QACd,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAC5B,CAAC;CACF;AAED,OAAO,EACL,YAAY,GACb,CAAC"}
@@ -2,8 +2,8 @@ import { z } from 'zod';
2
2
  import { getDocContent } from '../../utils/get-doc-content.js';
3
3
  import { aegisClient } from '../../utils/aegis-client.js';
4
4
  const description = `
5
- This is a tool specifically designed to solve common problems with Chat applications. Through the tool, you can get the following: | 这是一个专门负责解决 Chat 聊天应用常见问题的工具,通过工具您可以获取以下内容:\n
6
- 1. Get answers to frequently asked questions about building chat apps on mobile (native), web, react, vue, and other related platforms or frameworks | 1. 可以获取到移动端(native)、web 端 react、vue 等相关平台或框架搭建聊天应用的常见问题解答 \n
5
+ This is a tool specifically designed to provide solutions to common problems encountered in chat applications. Users can access this tool when they need a solution to a problem. | 这是一个专门负责提供 Chat 聊天应用中常见问题解决方案的工具,当用户查询某个问题解决方案时,可以调用这个工具:\n
6
+ 1. Get answers to frequently asked questions about building chat apps on mobile (native), web, react, vue, and other related platforms or frameworks. | 1. 可以获取到移动端(native)、web 端 react、vue 等相关平台或框架搭建聊天应用的常见问题解答 \n
7
7
  `;
8
8
  function getResultText(params) {
9
9
  const { sdkAppId = '', question = '' } = params;
@@ -17,7 +17,6 @@ function getResultText(params) {
17
17
  const registryGetChatFaqTool = (mcpServer) => {
18
18
  mcpServer.tool('get_chat_faq', description, {
19
19
  question: z.string().describe('Please describe your issue. | 请描述你的问题'),
20
- sdkAppId: z.string().describe(`Your application's SDKAppID. | 您的应用的 SDKAppID`)
21
20
  }, (params) => ({
22
21
  content: [
23
22
  {
@@ -1 +1 @@
1
- {"version":3,"file":"get-chat-faq.js","sourceRoot":"","sources":["../../../src/tools/chat/get-chat-faq.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;CAGnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IAChD,WAAW,CAAC,MAAM,CAAC;QACjB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,sBAAsB,GAAG,CAAC,SAAoB,EAAE,EAAE;IACtD,SAAS,CAAC,IAAI,CACZ,cAAc,EACd,WAAW,EACX;QACE,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,uCAAuC,CAAC;QACtE,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,+CAA+C,CAAC;KAC/E,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
1
+ {"version":3,"file":"get-chat-faq.js","sourceRoot":"","sources":["../../../src/tools/chat/get-chat-faq.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,WAAW,GAAG;;;CAGnB,CAAC;AAEF,SAAS,aAAa,CAAC,MAA2B;IAChD,MAAM,EAAE,QAAQ,GAAG,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,MAAM,CAAC;IAChD,WAAW,CAAC,MAAM,CAAC;QACjB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IACH,OAAO,aAAa,CAAC,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,sBAAsB,GAAG,CAAC,SAAoB,EAAE,EAAE;IACtD,SAAS,CAAC,IAAI,CACZ,cAAc,EACd,WAAW,EACX;QACE,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,uCAAuC,CAAC;KACvE,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACd,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;aAC5B;SACF;KACF,CAAC,CAAC,CAAC;AACR,CAAC,CAAC;AACF,OAAO,EAAE,sBAAsB,EAAE,CAAC"}