@tencentcloud/sdk-mcp 1.3.2 → 1.3.4

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 (52) hide show
  1. package/package.json +1 -1
  2. package/resource/doc/livekit/live/android/live-audience-list.md +335 -0
  3. package/resource/doc/livekit/live/android/live-audio-effect.md +384 -0
  4. package/resource/doc/livekit/live/android/live-barrage.md +569 -0
  5. package/resource/doc/livekit/live/android/live-base-beauty.md +265 -0
  6. package/resource/doc/livekit/live/android/live-co-guest-interaction.md +600 -0
  7. package/resource/doc/livekit/live/android/live-gift.md +833 -0
  8. package/resource/doc/livekit/live/android/live-host-interaction.md +810 -0
  9. package/resource/doc/livekit/live/android/live-integration.md +883 -0
  10. package/resource/doc/livekit/live/android/live-live-list.md +657 -0
  11. package/resource/doc/livekit/live/android/workflow.md +189 -0
  12. package/tools/common/record-prompt.js +2 -2
  13. package/tools/common/record-prompt.js.map +1 -1
  14. package/tools/definitions/get_native_live_extra_features_def.js +109 -0
  15. package/tools/definitions/get_native_live_extra_features_def.js.map +1 -0
  16. package/tools/definitions/get_native_live_interaction_def.js +115 -0
  17. package/tools/definitions/get_native_live_interaction_def.js.map +1 -0
  18. package/tools/definitions/get_native_live_uikit_integration_def.js +50 -0
  19. package/tools/definitions/get_native_live_uikit_integration_def.js.map +1 -0
  20. package/tools/definitions/record_prompt_def.js +42 -11
  21. package/tools/definitions/record_prompt_def.js.map +1 -1
  22. package/tools/definitions/record_result_def.js +1 -1
  23. package/tools/index.js +6 -0
  24. package/tools/index.js.map +1 -1
  25. package/tools/live/get-native-live-uikit-integration.js +101 -0
  26. package/tools/live/get-native-live-uikit-integration.js.map +1 -0
  27. package/tools/live/get-web-live-component-detail.js +1 -1
  28. package/tools/live/get-web-live-component-detail.js.map +1 -1
  29. package/tools/live/get-web-live-state-detail.js +1 -1
  30. package/tools/live/get-web-live-state-detail.js.map +1 -1
  31. package/tools/live/get-web-live-uikit-integration.js +6 -6
  32. package/tools/live/get-web-live-uikit-integration.js.map +1 -1
  33. package/tools/live/get_native_live_extra_features.js +105 -0
  34. package/tools/live/get_native_live_extra_features.js.map +1 -0
  35. package/tools/live/get_native_live_interaction.js +101 -0
  36. package/tools/live/get_native_live_interaction.js.map +1 -0
  37. package/utils/generate-structured-result.js +1 -1
  38. package/utils/report-cls-client.js +1 -1
  39. package/utils/report-es-client.js +1 -1
  40. /package/resource/doc/livekit/{vue → live/vue}/components/barrage.md +0 -0
  41. /package/resource/doc/livekit/{vue → live/vue}/components/co-guest-panel.md +0 -0
  42. /package/resource/doc/livekit/{vue → live/vue}/components/live-audience-list.md +0 -0
  43. /package/resource/doc/livekit/{vue → live/vue}/components/live-scene-panel.md +0 -0
  44. /package/resource/doc/livekit/{vue → live/vue}/components/live-view.md +0 -0
  45. /package/resource/doc/livekit/{vue → live/vue}/components/stream-mixer.md +0 -0
  46. /package/resource/doc/livekit/{vue → live/vue}/faq.md +0 -0
  47. /package/resource/doc/livekit/{vue → live/vue}/live-list-integration.md +0 -0
  48. /package/resource/doc/livekit/{vue → live/vue}/live-player-desk-integration.md +0 -0
  49. /package/resource/doc/livekit/{vue → live/vue}/live-player-h5-integration.md +0 -0
  50. /package/resource/doc/livekit/{vue → live/vue}/live-pusher-integration.md +0 -0
  51. /package/resource/doc/livekit/{vue → live/vue}/states/live-state.md +0 -0
  52. /package/resource/doc/livekit/{vue → live/vue}/workflow.md +0 -0
@@ -0,0 +1,810 @@
1
+ **AtomicXCore** 提供了 [CoHostStore](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.live/-co-host-store/index.html) 和 [BattleStore](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.live/-battle-store/index.html) 两个核心模块,分别用于处理**跨房连线和 PK 对战**。本文档将指导您如何组合使用这两个工具,来完成直播场景下连线到 PK 的完整流程。
2
+
3
+ ## 核心场景
4
+
5
+ 一次完整的“主播连线 PK”通常包含三个核心阶段,其整体流程如下:
6
+
7
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032603567/596fcf27afc011f09c7d525400454e06.png)
8
+
9
+
10
+ ## 实现步骤
11
+
12
+ ### 步骤1:组件集成
13
+
14
+ 请参考 [开始直播](https://write.woa.com/document/191126372105478144) 集成 **AtomicXCore**,并完成 **LiveCoreView** 的接入。
15
+
16
+ ### 步骤2:实现跨房连线
17
+
18
+ 此步骤的目标是让两个主播的画面出现在同一个视图中,我们将使用 [CoHostStore](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.live/-co-host-store/index.html) 来完成。
19
+
20
+ #### 邀请方(主播 A)实现
21
+ 1. **发起连线邀请**
22
+
23
+
24
+ 当主播A在界面上选择目标主播B并发起连线时,调用 `requestHostConnection` 方法。
25
+
26
+ ``` kotlin
27
+ import androidx.appcompat.app.AppCompatActivity
28
+ import io.trtc.tuikit.atomicxcore.api.CompletionHandler
29
+ import io.trtc.tuikit.atomicxcore.api.live.CoHostLayoutTemplate
30
+ import io.trtc.tuikit.atomicxcore.api.live.CoHostStore
31
+
32
+ // 主播A的Activity
33
+ class AnchorAActivity : AppCompatActivity() {
34
+ private val liveId = "主播A的房间ID"
35
+ private val coHostStore = CoHostStore.create(liveId)
36
+
37
+ // 用户点击"连线"按钮,并选择了主播B
38
+ fun inviteHostB(targetHostLiveId: String) {
39
+ val layout = CoHostLayoutTemplate.HOST_DYNAMIC_GRID // 选择一个布局模板
40
+ val timeout = 30 // 邀请超时时间(秒)
41
+
42
+ coHostStore.requestHostConnection(
43
+ targetHostLiveID = targetHostLiveId,
44
+ layoutTemplate = layout,
45
+ timeout = timeout,
46
+ extraInfo = null,
47
+ completion = object : CompletionHandler {
48
+ override fun onSuccess() {
49
+ println("连线邀请已发送,等待对方处理...")
50
+ }
51
+
52
+ override fun onFailure(code: Int, desc: String) {
53
+ println("邀请发送失败: $desc")
54
+ }
55
+ }
56
+ )
57
+ }
58
+ }
59
+ ```
60
+ 2. **监听邀请结果**
61
+
62
+
63
+ 通过 `CoHostListener` 的回调方法,您可以接收到主播 B 的处理结果。
64
+
65
+ ``` java
66
+ import android.os.Bundle
67
+ import androidx.appcompat.app.AppCompatActivity
68
+ import io.trtc.tuikit.atomicxcore.api.live.CoHostListener
69
+ import io.trtc.tuikit.atomicxcore.api.live.CoHostStore
70
+ import io.trtc.tuikit.atomicxcore.api.live.SeatUserInfo
71
+
72
+ class AnchorAActivity : AppCompatActivity() {
73
+ private val liveId = "主播A的房间ID"
74
+ private val coHostStore = CoHostStore.create(liveId)
75
+ private val coHostListener = object : CoHostListener() {
76
+ override fun onCoHostRequestAccepted(invitee: SeatUserInfo) {
77
+ println("主播 ${invitee.userName} 同意了你的连线邀请")
78
+ }
79
+
80
+ override fun onCoHostRequestRejected(invitee: SeatUserInfo) {
81
+ println("主播 ${invitee.userName} 拒绝了你的邀请")
82
+ }
83
+
84
+ override fun onCoHostRequestTimeout(inviter: SeatUserInfo, invitee: SeatUserInfo) {
85
+ println("邀请超时,对方未回应")
86
+ }
87
+ }
88
+
89
+ override fun onCreate(savedInstanceState: Bundle?) {
90
+ super.onCreate(savedInstanceState)
91
+ setContentView(R.layout.activity_anchor_a)
92
+
93
+ // 初始化CoHostStore
94
+ coHostStore.addCoHostListener(coHostListener)
95
+ }
96
+ }
97
+ ```
98
+
99
+ #### 受邀方(主播 B)实现
100
+ 1. **接收连线邀请**
101
+
102
+
103
+ 通过 `CoHostListener`,主播B可以监听到来自主播A的邀请。
104
+
105
+ ``` kotlin
106
+ import androidx.appcompat.app.AppCompatActivity
107
+ import io.trtc.tuikit.atomicxcore.api.live.CoHostListener
108
+ import io.trtc.tuikit.atomicxcore.api.live.CoHostStore
109
+ import io.trtc.tuikit.atomicxcore.api.live.SeatUserInfo
110
+
111
+ // 主播B的Activity
112
+ class AnchorBActivity : AppCompatActivity() {
113
+ private val liveId = "主播B的房间ID"
114
+ private val coHostStore = CoHostStore.create(liveId)
115
+
116
+ private val coHostListener = object : CoHostListener() {
117
+ override fun onCoHostRequestReceived(inviter: SeatUserInfo, extensionInfo: String) {
118
+ println("收到主播 ${inviter.userName} 的连线邀请")
119
+ // 显示邀请对话框,响应联线邀请
120
+ // showInvitationDialog(inviter)
121
+ }
122
+ }
123
+ }
124
+ ```
125
+ 2. **响应连线邀请**
126
+
127
+
128
+ 当主播B在弹出的对话框中做出选择后,调用相应的方法。
129
+
130
+ ``` kotlin
131
+ // AnchorBActivity 的一部分
132
+ fun acceptInvitation(fromHostLiveId: String) {
133
+ coHostStore.acceptHostConnection(fromHostLiveID = fromHostLiveId, completion = null)
134
+ }
135
+
136
+ fun rejectInvitation(fromHostLiveId: String) {
137
+ coHostStore.rejectHostConnection(fromHostLiveID = fromHostLiveId, completion = null)
138
+ }
139
+ ```
140
+
141
+ ### 步骤3:实现主播 PK
142
+
143
+ 连线成功后,任意一方都可以发起 PK,此步骤我们将使用 [BattleStore](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.live/-battle-store/index.html) 来实现主播 PK。
144
+
145
+ #### 挑战方(例如主播 A)实现
146
+ 1. **发起 PK 挑战**
147
+
148
+
149
+ 当主播 A 点击** PK** 按钮时,调用 `requestBattle` 方法。
150
+
151
+ ``` kotlin
152
+ // AnchorAActivity 的一部分
153
+ class AnchorAActivity : AppCompatActivity() {
154
+ private val liveId = "主播A的房间ID"
155
+ private val battleStore = BattleStore.create(liveId)
156
+
157
+ fun startPK(opponentUserId: String) {
158
+ val config = BattleConfig(duration = 300) // PK持续5分钟
159
+ battleStore.requestBattle(
160
+ config = config,
161
+ userIDList = listOf(opponentUserId),
162
+ timeout = 30,
163
+ completion = null
164
+ )
165
+ }
166
+ }
167
+ ```
168
+ 2. **监听 PK 状态**
169
+
170
+
171
+ 通过 `BattleListener` 监听 PK 的开始、结束等关键事件。
172
+
173
+ ``` java
174
+ // AnchorAActivity 的一部分
175
+ class AnchorAActivity : AppCompatActivity() {
176
+ private val liveId = "主播A的房间ID"
177
+ private val battleStore = BattleStore.create(liveId)
178
+
179
+ private val battleListener = object : BattleListener() {
180
+ override fun onBattleStarted(
181
+ battleInfo: BattleInfo,
182
+ inviter: SeatUserInfo,
183
+ invitees: List<SeatUserInfo>
184
+ ) {
185
+ println("PK 开始")
186
+ }
187
+
188
+ override fun onBattleEnded(battleInfo: BattleInfo, reason: BattleEndedReason?) {
189
+ println("PK 结束")
190
+ }
191
+ }
192
+
193
+ override fun onCreate(savedInstanceState: Bundle?) {
194
+ super.onCreate(savedInstanceState)
195
+ // ... 其他初始化代码 ...
196
+ battleStore.addBattleListener(battleListener)
197
+ }
198
+ }
199
+ ```
200
+
201
+ #### 应战方(主播 B)实现
202
+ 1. **接收 PK 挑战**
203
+
204
+
205
+ 通过 `BattleListener` 监听到 PK 邀请。
206
+
207
+ ``` kotlin
208
+ // 在 AnchorBActivity 中添加
209
+ class AnchorBActivity : AppCompatActivity() {
210
+ private val liveId = "主播B的房间ID"
211
+ private val battleStore = BattleStore.create(liveId)
212
+
213
+ private val battleListener = object : BattleListener() {
214
+ override fun onBattleRequestReceived(battleID: String, inviter: SeatUserInfo, invitee: SeatUserInfo) {
215
+ println("收到主播 ${inviter.userName} 的PK挑战")
216
+ // 弹出对话框,让主播B选择"接受"或"拒绝"
217
+ // showPKChallengeDialog(battleID, inviter)
218
+ }
219
+ }
220
+
221
+ override fun onCreate(savedInstanceState: Bundle?) {
222
+ super.onCreate(savedInstanceState)
223
+ // ... 其他初始化代码 ...
224
+ battleStore.addBattleListener(battleListener)
225
+ }
226
+ }
227
+ ```
228
+ 2. **响应 PK 挑战**
229
+
230
+
231
+ 当主播 B 做出选择后,调用相应的方法。
232
+
233
+ ``` kotlin
234
+ // AnchorBActivity 的一部分
235
+ // 用户点击"接受挑战"
236
+ fun acceptPK(battleId: String) {
237
+ battleStore.acceptBattle(battleID = battleId, completion = null)
238
+ }
239
+
240
+ // 用户点击"拒绝挑战"
241
+ fun rejectPK(battleId: String) {
242
+ battleStore.rejectBattle(battleID = battleId, completion = null)
243
+ }
244
+ ```
245
+
246
+ ### 运行效果
247
+
248
+ 当您集成以上功能实现后,请分别使用主播 A 和主播 B 进行对应操作,运行效果如下,您可以参考下一章节 [完善 UI 细节](https://write.woa.com/#.E5.AE.8C.E5.96.84-ui-.E7.BB.86.E8.8A.82) 来定制您想要的 UI 逻辑。
249
+
250
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032603567/838a83afafcd11f0b28a5254005ef0f7.png)
251
+
252
+
253
+ ## 完善 UI 细节
254
+
255
+ 您可以通过 `VideoViewAdapter` 接口提供的"插槽"能力,在视频流画面上添加自定义视图,用于显示昵称、头像、PK 进度条等信息,或在他们关闭摄像头时提供占位图,以优化视觉体验。
256
+
257
+ ### 实现视频流画面的昵称显示
258
+
259
+ #### 实现效果
260
+
261
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032603567/8bc12d19afcd11f0943c5254007c27c5.png)
262
+
263
+
264
+ #### 实现方式
265
+ - **步骤1**:创建前景视图 (**CustomSeatView**),该视图用于在视频流上方显示用户信息。
266
+
267
+
268
+ > **提示:**
269
+ >
270
+
271
+ > 您也可以参考 TUILiveKit 开源项目中的 [widgets](https://github.com/Tencent-RTC/TUIKit_Android/tree/main/live/tuilivekit/src/main/java/com/trtc/uikit/livekit/features/anchorboardcast/view/cohost/widgets) 目录下文件来了解完整的实现逻辑。
272
+ >
273
+
274
+ ``` kotlin
275
+ import android.content.Context
276
+ import android.graphics.Color
277
+ import android.view.Gravity
278
+ import android.widget.LinearLayout
279
+ import android.widget.TextView
280
+
281
+ // 自定义的用户信息悬浮视图(前景)
282
+ class CustomSeatView(context: Context) : LinearLayout(context) {
283
+ private val nameLabel: TextView
284
+
285
+ init {
286
+ orientation = VERTICAL
287
+ setBackgroundColor(Color.parseColor("#80000000")) // 半透明黑色背景
288
+
289
+ nameLabel = TextView(context).apply {
290
+ setTextColor(Color.WHITE)
291
+ textSize = 14f
292
+ gravity = Gravity.CENTER
293
+ }
294
+
295
+ addView(nameLabel)
296
+ val layoutParams = nameLabel.layoutParams as LayoutParams
297
+ layoutParams.setMargins(5, 0, 5, 5)
298
+ }
299
+
300
+ fun setUserName(userName: String) {
301
+ nameLabel.text = userName
302
+ }
303
+ }
304
+ ```
305
+ - **步骤2**:创建背景视图 (**CustomAvatarView**),该视图用于在用户无视频流时作为占位图显示。
306
+
307
+ ``` kotlin
308
+ import android.content.Context
309
+ import android.graphics.Color
310
+ import android.view.Gravity
311
+ import android.widget.ImageView
312
+ import android.widget.LinearLayout
313
+
314
+ // 自定义的头像占位视图(背景)
315
+ class CustomAvatarView(context: Context) : LinearLayout(context) {
316
+ private val avatarImageView: ImageView
317
+
318
+ init {
319
+ orientation = VERTICAL
320
+ gravity = Gravity.CENTER
321
+ setBackgroundColor(Color.TRANSPARENT)
322
+
323
+ avatarImageView = ImageView(context).apply {
324
+ setColorFilter(Color.GRAY)
325
+ scaleType = ImageView.ScaleType.CENTER_CROP
326
+ }
327
+
328
+ addView(avatarImageView)
329
+ val layoutParams = avatarImageView.layoutParams as LayoutParams
330
+ layoutParams.width = 120 // 60dp
331
+ layoutParams.height = 120 // 60dp
332
+ }
333
+ }
334
+ ```
335
+ - **步骤3**:实现 `VideoViewAdapter.createCoHostView` 协议,根据 `viewLayer` 的值返回对应的视图。
336
+
337
+ ``` kotlin
338
+ import com.tencent.cloud.tuikit.engine.room.TUIRoomDefine
339
+ import android.view.View
340
+ import androidx.appcompat.app.AppCompatActivity
341
+ import io.trtc.tuikit.atomicxcore.api.view.VideoViewAdapter
342
+ import io.trtc.tuikit.atomicxcore.api.view.ViewLayer
343
+
344
+ // 1. 在您的Activity中,实现 VideoViewAdapter 接口
345
+ class YourActivity : AppCompatActivity(), VideoViewAdapter {
346
+
347
+ // ... 其他代码 ...
348
+
349
+ // 2. 完整实现接口方法,处理两种 viewLayer
350
+ override fun createCoHostView(coHostUser: TUIRoomDefine.SeatFullInfo?, viewLayer: ViewLayer?): View? {
351
+ val seatInfo = coHostUser ?: return null
352
+ val userId = seatInfo.userId
353
+ if (userId.isNullOrEmpty()) {
354
+ return null
355
+ }
356
+
357
+ return when (viewLayer) {
358
+ ViewLayer.FOREGROUND -> {
359
+ val seatView = CustomSeatView(this)
360
+ seatView.setUserName(seatInfo.userName ?: "")
361
+ seatView
362
+ }
363
+ ViewLayer.BACKGROUND -> {
364
+ val avatarView = CustomAvatarView(this)
365
+ // 您可以在这里通过 seatInfo.userAvatar 加载用户真实头像
366
+ avatarView
367
+ }
368
+ null -> null
369
+ }
370
+ }
371
+ }
372
+ ```
373
+
374
+ #### **参数说明**:
375
+ <table>
376
+ <tr>
377
+ <td rowspan="1" colSpan="1" >**参数**</td>
378
+
379
+ <td rowspan="1" colSpan="1" >**类型**</td>
380
+
381
+ <td rowspan="1" colSpan="1" >**说明**</td>
382
+ </tr>
383
+
384
+ <tr>
385
+ <td rowspan="1" colSpan="1" >`seatInfo`</td>
386
+
387
+ <td rowspan="1" colSpan="1" >`SeatFullInfo?`</td>
388
+
389
+ <td rowspan="1" colSpan="1" >麦位信息对象,包含麦上用户的详细信息</td>
390
+ </tr>
391
+
392
+ <tr>
393
+ <td rowspan="1" colSpan="1" >`seatInfo.userId`</td>
394
+
395
+ <td rowspan="1" colSpan="1" >`String`</td>
396
+
397
+ <td rowspan="1" colSpan="1" >麦上用户的 ID</td>
398
+ </tr>
399
+
400
+ <tr>
401
+ <td rowspan="1" colSpan="1" >`seatInfo.userName`</td>
402
+
403
+ <td rowspan="1" colSpan="1" >`String`</td>
404
+
405
+ <td rowspan="1" colSpan="1" >麦上用户的昵称</td>
406
+ </tr>
407
+
408
+ <tr>
409
+ <td rowspan="1" colSpan="1" >`seatInfo.userAvatar`</td>
410
+
411
+ <td rowspan="1" colSpan="1" >`String`</td>
412
+
413
+ <td rowspan="1" colSpan="1" >麦上用户的头像 URL</td>
414
+ </tr>
415
+
416
+ <tr>
417
+ <td rowspan="1" colSpan="1" >`seatInfo.userMicrophoneStatus`</td>
418
+
419
+ <td rowspan="1" colSpan="1" >`DeviceStatus`</td>
420
+
421
+ <td rowspan="1" colSpan="1" >麦上用户的麦克风状态</td>
422
+ </tr>
423
+
424
+ <tr>
425
+ <td rowspan="1" colSpan="1" >`seatInfo.userCameraStatus `</td>
426
+
427
+ <td rowspan="1" colSpan="1" >`DeviceStatus`</td>
428
+
429
+ <td rowspan="1" colSpan="1" >麦上用户的摄像头状态</td>
430
+ </tr>
431
+
432
+ <tr>
433
+ <td rowspan="1" colSpan="1" >`viewLayer`</td>
434
+
435
+ <td rowspan="1" colSpan="1" >`ViewLayer`</td>
436
+
437
+ <td rowspan="1" colSpan="1" >视图层级枚举<br>- `FOREGROUND` 表示前景挂件视图,始终显示在视频画面的最上层<br>- `BACKGROUND` 表示背景挂件视图,位于前景视图下层,仅在对应用户没有视频流(例如未开摄像头)的情况下显示,通常用于展示用户的默认头像或占位图</td>
438
+ </tr>
439
+ </table>
440
+
441
+
442
+ ### 实现 PK 用户视图的分数展示
443
+
444
+ 当主播开始 PK 后,可以在对方主播的视频画面上挂载自定义视图,通常用于展示该主播收到的礼物价值或其它 PK 相关信息。
445
+
446
+ #### **实现效果**
447
+
448
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032603567/a9a9233aafd911f0943c5254007c27c5.png)
449
+
450
+
451
+ #### 实现方式
452
+ - **步骤1**:创建自定义 PK 用户视图,您可以参考 TUILiveKit 开源项目中的 [BattleMemberInfoView.kt](https://github.com/Tencent-RTC/TUIKit_Android/blob/main/live/tuilivekit/src/main/java/com/trtc/uikit/livekit/features/anchorboardcast/view/battle/widgets/BattleMemberInfoView.kt) 文件来了解完整的实现逻辑。
453
+
454
+ ``` kotlin
455
+ import android.content.Context
456
+ import android.graphics.Color
457
+ import android.view.Gravity
458
+ import android.widget.LinearLayout
459
+ import android.widget.TextView
460
+ import com.tencent.cloud.tuikit.engine.extension.TUILiveBattleManager.BattleUser
461
+ import io.trtc.tuikit.atomicxcore.api.live.BattleStore
462
+ import kotlinx.coroutines.CoroutineScope
463
+ import kotlinx.coroutines.Dispatchers
464
+ import kotlinx.coroutines.launch
465
+
466
+ // 自定义PK 用户视图
467
+ class CustomBattleUserView(
468
+ context: Context,
469
+ private val liveId: String,
470
+ private val battleUser: BattleUser
471
+ ) : LinearLayout(context) {
472
+
473
+ private lateinit var scoreView: LinearLayout
474
+ private lateinit var scoreLabel: TextView
475
+ private val battleStore: BattleStore
476
+
477
+ init {
478
+ orientation = VERTICAL
479
+ gravity = Gravity.BOTTOM or Gravity.END
480
+ setBackgroundColor(Color.TRANSPARENT)
481
+ isClickable = false
482
+
483
+ battleStore = BattleStore.create(liveId)
484
+
485
+ // UI 布局
486
+ setupUI()
487
+ // 订阅分数变化
488
+ subscribeBattleState()
489
+ }
490
+
491
+ private fun setupUI() {
492
+ scoreView = LinearLayout(context).apply {
493
+ setBackgroundColor(Color.parseColor("#66000000"))
494
+ orientation = VERTICAL
495
+ gravity = Gravity.CENTER
496
+ }
497
+
498
+ scoreLabel = TextView(context).apply {
499
+ setTextColor(Color.WHITE)
500
+ textSize = 14f
501
+ gravity = Gravity.CENTER
502
+ }
503
+
504
+ scoreView.addView(scoreLabel)
505
+ addView(scoreView)
506
+
507
+ val layoutParams = scoreView.layoutParams as LayoutParams
508
+ layoutParams.width = LayoutParams.WRAP_CONTENT
509
+ layoutParams.height = 48 // 24dp
510
+ layoutParams.setMargins(0, 0, 10, 10)
511
+ }
512
+
513
+ // 订阅 PK 分数变化
514
+ private fun subscribeBattleState() {
515
+ CoroutineScope(Dispatchers.Main).launch {
516
+ battleStore.battleState.battleScore.collect { battleScore ->
517
+ val score = battleScore[battleUser.userId] ?: 0
518
+ // 更新 UI
519
+ scoreLabel.text = score.toString()
520
+ }
521
+ }
522
+ }
523
+ }
524
+ ```
525
+ - **步骤2**:实现 `VideoViewAdapter.createBattleView` 协议
526
+
527
+ ``` kotlin
528
+ // 1. 让您的Activity实现 VideoViewAdapter 接口
529
+ class YourActivity : AppCompatActivity(), VideoViewAdapter {
530
+
531
+ override fun createBattleView(battleUser: BattleUser?): View? {
532
+ battleUser ?: return null
533
+ // CustomBattleUserView 是您自定义的PK用户信息视图
534
+ return CustomBattleUserView(this, liveId, battleUser)
535
+ }
536
+
537
+ }
538
+ ```
539
+
540
+ #### **参数说明**:
541
+ <table>
542
+ <tr>
543
+ <td rowspan="1" colSpan="1" >**参数**</td>
544
+
545
+ <td rowspan="1" colSpan="1" >**类型**</td>
546
+
547
+ <td rowspan="1" colSpan="1" >**说明**</td>
548
+ </tr>
549
+
550
+ <tr>
551
+ <td rowspan="1" colSpan="1" >`battleUser`</td>
552
+
553
+ <td rowspan="1" colSpan="1" >`BattleUser?`</td>
554
+
555
+ <td rowspan="1" colSpan="1" >PK 用户信息对象</td>
556
+ </tr>
557
+
558
+ <tr>
559
+ <td rowspan="1" colSpan="1" >`battleUser.roomId`</td>
560
+
561
+ <td rowspan="1" colSpan="1" >`String`</td>
562
+
563
+ <td rowspan="1" colSpan="1" >PK 的房间 ID</td>
564
+ </tr>
565
+
566
+ <tr>
567
+ <td rowspan="1" colSpan="1" >`battleUser.userId`</td>
568
+
569
+ <td rowspan="1" colSpan="1" >`String`</td>
570
+
571
+ <td rowspan="1" colSpan="1" >PK 用户 ID</td>
572
+ </tr>
573
+
574
+ <tr>
575
+ <td rowspan="1" colSpan="1" >`battleUser.userName`</td>
576
+
577
+ <td rowspan="1" colSpan="1" >`String`</td>
578
+
579
+ <td rowspan="1" colSpan="1" >PK 用户昵称</td>
580
+ </tr>
581
+
582
+ <tr>
583
+ <td rowspan="1" colSpan="1" >`battleUser.avatarUrl`</td>
584
+
585
+ <td rowspan="1" colSpan="1" >`String`</td>
586
+
587
+ <td rowspan="1" colSpan="1" >PK 用户头像地址</td>
588
+ </tr>
589
+
590
+ <tr>
591
+ <td rowspan="1" colSpan="1" >`battleUser.score`</td>
592
+
593
+ <td rowspan="1" colSpan="1" >`int`</td>
594
+
595
+ <td rowspan="1" colSpan="1" >PK 分数</td>
596
+ </tr>
597
+ </table>
598
+
599
+
600
+ ### 实现视频流画面上的 PK 状态显示
601
+
602
+ #### **实现效果**
603
+
604
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032603567/2fb544d5afda11f082b4525400e889b2.png)
605
+
606
+
607
+ #### **实现方式**
608
+ - **步骤1:**创建自定义 PK 全局视图 **CustomBattleContainerView**,您可以参考 TUILiveKit 开源项目中的 [BattleInfoView.kt](https://github.com/Tencent-RTC/TUIKit_Android/blob/main/live/tuilivekit/src/main/java/com/trtc/uikit/livekit/features/anchorboardcast/view/battle/widgets/BattleInfoView.kt) 文件来实现,即可实现同样的效果。
609
+
610
+ - **步骤2**:实现 `VideoViewAdapter.createBattleContainerView` 协议。
611
+
612
+ ``` kotlin
613
+ // 让您的Activity实现 VideoViewAdapter 接口并设置适配器
614
+ class YourActivity : AppCompatActivity(), VideoViewAdapter {
615
+ override fun createBattleContainerView(): View? {
616
+ return CustomBattleContainerView(this)
617
+ }
618
+ }
619
+ ```
620
+
621
+ ## 功能进阶
622
+
623
+ ### 通过 REST API 实现 PK 分数更新
624
+
625
+ 通常在**直播主播 PK 场景**下,会将主播收到的礼物价值与 PK 数值挂钩(例如:观众送 "火箭" 礼物,主播 PK 分数增加 500 分),您可以通过我们的 REST API,轻松实现直播 PK 场景下的分数实时更新。
626
+
627
+ > **重要说明:**
628
+ >
629
+
630
+ > LiveKit 后台的 PK 分数系统采用纯数值计算和累加机制,所以您需要根据自身的运营策略和业务需求,在调用更新接口前完成 PK 分数的计算,您可以参考如下的 PK 分数计算示例:
631
+ >
632
+ <table>
633
+ <tr>
634
+ <td rowspan="1" colSpan="1" >礼物类型</td>
635
+
636
+ <td rowspan="1" colSpan="1" >分数计算规则</td>
637
+
638
+ <td rowspan="1" colSpan="1" >示例</td>
639
+ </tr>
640
+
641
+ <tr>
642
+ <td rowspan="1" colSpan="1" >​基础礼物​</td>
643
+
644
+ <td rowspan="1" colSpan="1" >礼物价值 × 5</td>
645
+
646
+ <td rowspan="1" colSpan="1" >10元礼物 → 50分</td>
647
+ </tr>
648
+
649
+ <tr>
650
+ <td rowspan="1" colSpan="1" >​中级礼物​</td>
651
+
652
+ <td rowspan="1" colSpan="1" >礼物价值 × 8</td>
653
+
654
+ <td rowspan="1" colSpan="1" >50元礼物 → 400分</td>
655
+ </tr>
656
+
657
+ <tr>
658
+ <td rowspan="1" colSpan="1" >​高级礼物​</td>
659
+
660
+ <td rowspan="1" colSpan="1" >礼物价值 × 12</td>
661
+
662
+ <td rowspan="1" colSpan="1" >100元礼物 → 1200分</td>
663
+ </tr>
664
+
665
+ <tr>
666
+ <td rowspan="1" colSpan="1" >​特效礼物​</td>
667
+
668
+ <td rowspan="1" colSpan="1" >固定高分数</td>
669
+
670
+ <td rowspan="1" colSpan="1" >520元礼物 → 1314分<br></td>
671
+ </tr>
672
+ </table>
673
+
674
+
675
+
676
+ #### REST API 调用流程
677
+
678
+ ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032603567/7cc3e8afafda11f0b28a5254005ef0f7.png)
679
+
680
+
681
+ #### 关键流程说明
682
+ 1. ​**获取 PK 状态​**:
683
+
684
+ - 回调配置​:您可以通过配置 [PK 状态回调](https://write.woa.com/document/170122621675196416),由 LiveKit 后台在 PK 开始、结束时,主动通知您的系统 PK 状态。
685
+
686
+ - 主动查询​:您的后台服务可主动调用 [PK 状态查询](https://write.woa.com/document/169572228815638528) 接口,随时查询当前 PK 状态。
687
+
688
+ 2. **PK分数计算**​:您的后台服务根据业务规则(如上述示例),计算 PK 分数增量。
689
+
690
+ 3. **PK分数更新​**:您的后台服务调用 [修改 PK 分数](https://write.woa.com/document/169571965752266752) 接口,向 LiveKit 后台更新 PK 分数。
691
+
692
+ 4. **LiveKit后台 同步客户端**​:LiveKit 后台自动将更新后的 PK 分数同步到所有客户端。
693
+
694
+
695
+ #### 涉及的 REST API 接口
696
+ <table>
697
+ <tr>
698
+ <td rowspan="1" colSpan="1" >接口</td>
699
+
700
+ <td rowspan="1" colSpan="1" >功能描述</td>
701
+
702
+ <td rowspan="1" colSpan="1" >请求示例</td>
703
+ </tr>
704
+
705
+ <tr>
706
+ <td rowspan="1" colSpan="1" >主动接口 - 查询 PK 状态</td>
707
+
708
+ <td rowspan="1" colSpan="1" >可根据此接口查询当前房间是否在 PK</td>
709
+
710
+ <td rowspan="1" colSpan="1" >[请求示例](https://write.woa.com/document/169572228815638528)</td>
711
+ </tr>
712
+
713
+ <tr>
714
+ <td rowspan="1" colSpan="1" >主动接口 - 修改 PK 分数</td>
715
+
716
+ <td rowspan="1" colSpan="1" >将计算后的 PK 数值通过此接口更新</td>
717
+
718
+ <td rowspan="1" colSpan="1" >[请求示例](https://write.woa.com/document/169571965752266752)</td>
719
+ </tr>
720
+
721
+ <tr>
722
+ <td rowspan="1" colSpan="1" >回调配置 - PK 开始时回调</td>
723
+
724
+ <td rowspan="1" colSpan="1" >客户后台可以通过该回调及时知晓 PK 开启</td>
725
+
726
+ <td rowspan="1" colSpan="1" >[回调示例](https://write.woa.com/document/170122621675196416)</td>
727
+ </tr>
728
+
729
+ <tr>
730
+ <td rowspan="1" colSpan="1" >回调配置 - PK 结束时回调</td>
731
+
732
+ <td rowspan="1" colSpan="1" >客户后台可以通过该回调及时知晓 PK 结束</td>
733
+
734
+ <td rowspan="1" colSpan="1" >[回调示例](https://write.woa.com/document/170123212271988736)</td>
735
+ </tr>
736
+ </table>
737
+
738
+
739
+ ## API 文档
740
+
741
+ 关于 [CoHostStore](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.live/-co-host-store/index.html) 及其相关类的所有公开接口、属性和方法的详细信息,请参阅随 [AtomicXCore](https://tencent-rtc.github.io/TUIKit_Android/index.html) 框架的官方 API 文档。本指南使用到的相关 Store 如下:
742
+ <table>
743
+ <tr>
744
+ <td rowspan="1" colSpan="1" >Store/Component</td>
745
+
746
+ <td rowspan="1" colSpan="1" >功能描述</td>
747
+
748
+ <td rowspan="1" colSpan="1" >API 文档</td>
749
+ </tr>
750
+
751
+ <tr>
752
+ <td rowspan="1" colSpan="1" >LiveCoreView</td>
753
+
754
+ <td rowspan="1" colSpan="1" >直播视频流展示与交互的核心视图组件:负责视频流渲染和视图挂件处理,支持主播直播、观众连麦、主播连线等场景。</td>
755
+
756
+ <td rowspan="1" colSpan="1" >[API 文档](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.view/-live-core-view/index.html)</td>
757
+ </tr>
758
+
759
+ <tr>
760
+ <td rowspan="1" colSpan="1" >DeviceStore</td>
761
+
762
+ <td rowspan="1" colSpan="1" >音视频设备控制:麦克风(开关 / 音量)、摄像头(开关 / 切换 / 画质)、屏幕共享,设备状态实时监听。</td>
763
+
764
+ <td rowspan="1" colSpan="1" >[API 文档](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.device/-device-store/index.html)</td>
765
+ </tr>
766
+
767
+ <tr>
768
+ <td rowspan="1" colSpan="1" >CoHostStore</td>
769
+
770
+ <td rowspan="1" colSpan="1" >主播跨房连线:支持多布局模板(动态网格等),发起 / 接受 / 拒绝连线,连麦主播互动管理。</td>
771
+
772
+ <td rowspan="1" colSpan="1" >[API 文档](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.live/-co-host-store/index.html)</td>
773
+ </tr>
774
+
775
+ <tr>
776
+ <td rowspan="1" colSpan="1" >BattleStore</td>
777
+
778
+ <td rowspan="1" colSpan="1" >主播 PK 对战:发起 PK(配置时长 / 对手),管理 PK 状态(开始 / 结束),同步分数,监听对战结果。</td>
779
+
780
+ <td rowspan="1" colSpan="1" >[API 文档](https://tencent-rtc.github.io/TUIKit_Android/-atomic-x%20-core%20-a-p-i/io.trtc.tuikit.atomicxcore.api.live/-battle-store/index.html)</td>
781
+ </tr>
782
+ </table>
783
+
784
+
785
+ ## 常见问题
786
+
787
+ ### **为什么发起了连线邀请,对方却没收到?**
788
+ - 请检查 **targetHostLiveId** 是否正确,并且对方直播间处于正常开播状态。
789
+
790
+ - 检查网络连接是否通畅,邀请信令有30秒的默认超时时间。
791
+
792
+
793
+ ### 连线或PK过程中,一方主播网络断开或App崩溃了怎么办?
794
+
795
+ **CoHostStore** 和 **BattleStore** 内部都有心跳和超时检测机制。如果一方异常退出,另一方会通过 **onCoHostUserLeft** 或 **onUserExitBattle** 等事件收到通知,您可以根据这些事件来处理UI,例如提示"对方已掉线"并结束互动。
796
+
797
+ ### 为什么 PK 分数只能通过 REST API 更新?
798
+
799
+ 因为 REST API 能同时满足 PK 分数的**安全性、实时性、扩展性**需求:
800
+ - **防篡改保公平**:需鉴权 + 数据校验,每笔更新可追溯来源(例如礼物行为),杜绝手动改分、刷分,保障竞技公平;
801
+
802
+ - **多端实时同步**:用标准化格式(例如 JSON)快速对接礼物、PK、展示系统,确保主播 / 观众 / 后台分数实时一致,无延迟;
803
+
804
+ - **灵活适配规则**:后端改配置(例如调整礼物对应分数、加成分数)即可适配业务变化,无需改前端,降低迭代成本。
805
+
806
+
807
+ ### 如何管理通过 `VideoViewAdapter` 添加的自定义视图的生命周期和事件?
808
+
809
+ **LiveCoreView** 会自动管理您通过适配器方法返回视图的添加和移除,您无需手动处理。如果需要在自定义视图中处理用户交互(例如点击事件),请在创建视图时为其添加相应的事件即可。
810
+