@tencent-rtc/mcp 1.3.8 → 1.4.0

package/resource/doc/livekit/{live → core-sdk/live}/ios/live-host-interaction.md

@@ -9,14 +9,11 @@ A typical "Host Co-hosting PK" session consists of three main stages, as shown b
 
 3. **PK Battle**: Both hosts compete in a PK battle, with scores updated in real time.
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182498/096c93dec6df11f0a93d52540044a08e.png)
-
-
 ## Implementation
 
 ### Step 1: Component Integration
 
-Refer to [Quick Start](https://write.woa.com/document/194571606121816064) to integrate AtomicXCore and complete the setup of LiveCoreView.
+Refer to Quick Start to integrate AtomicXCore and complete the setup of LiveCoreView.
 
 ### Step 2: Implement Cross-Room Co-hosting
 
@@ -25,13 +22,12 @@ The goal of this step is to display the video streams of two hosts in the same v
 #### Inviter (Host A) Implementation
 1. **Initiate Co-hosting Invitation**
 
-
    When Host A selects Host B in the UI and initiates a co-hosting request, call the `requestHostConnection` method.
 
    ``` swift
    import AtomicXCore
    import Combine
-   
+
    // Host A's view controller
    class AnchorAViewController {
        private let liveId = "Host A's Room ID"
@@ -39,12 +35,12 @@ The goal of this step is to display the video streams of two hosts in the same v
        private lazy var coHostStore: CoHostStore = {
            return CoHostStore.create(liveID: self.liveId)
        }()
-   
+
        // User clicks the "Co-host" button and selects Host B
        func inviteHostB(targetHostLiveId: String) {
            let layout: CoHostLayoutTemplate = .hostDynamicGrid // Choose a layout template
            let timeout: TimeInterval = 30.0 // Invitation timeout
-   
+
            coHostStore.requestHostConnection(targetHost: targetHostLiveId,
                                              layoutTemplate: layout,
                                              timeout: timeout) { result in
@@ -60,7 +56,6 @@ The goal of this step is to display the video streams of two hosts in the same v
    ```
 2. **Listen for Invitation Result**
 
-
    Subscribe to `coHostEventPublisher` to receive Host B's response.
 
    ``` swift
@@ -86,17 +81,16 @@ The goal of this step is to display the video streams of two hosts in the same v
 #### Invitee (Host B) Implementation
 1. **Receive Co-hosting Invitation**
 
-
    Host B listens for invitations from Host A via `coHostEventPublisher`.
 
    ``` swift
    import AtomicXCore
    import Combine
-   
+
    // Host B's view controller
    class AnchorBViewController {
        // ... coHostStore and cancellables initialization ...
-   
+
        // Set up listener during initialization
        func setupListeners() {
            coHostStore.coHostEventPublisher
@@ -112,7 +106,6 @@ The goal of this step is to display the video streams of two hosts in the same v
    ```
 2. **Respond to Co-hosting Invitation**
 
-
    After Host B receives the invitation, prompt for “Accept” or “Reject” and call the appropriate method:
 
    ``` swift
@@ -120,7 +113,7 @@ The goal of this step is to display the video streams of two hosts in the same v
    func acceptInvitation(fromHostLiveId: String) {
        coHostStore.acceptHostConnection(fromHostLiveID: fromHostLiveId, completion: nil)
    }
-   
+
    func rejectInvitation(fromHostLiveId: String) {
        coHostStore.rejectHostConnection(fromHostLiveID: fromHostLiveId, completion: nil)
    }
@@ -133,13 +126,12 @@ After a successful co-hosting connection, either host can initiate a PK. Use [Ba
 #### Challenger (e.g., Host A) Implementation
 1. **Initiate PK Challenge**
 
-
    When Host A clicks the "PK" button, call the `requestBattle` method.
 
    ``` swift
    // Part of AnchorAViewController
    private lazy var battleStore: BattleStore = BattleStore.create(liveID: self.liveId)
-   
+
    func startPK(with opponentUserId: String) {
        var config = BattleConfig(duration: 300) // PK lasts 5 minutes
        battleStore.requestBattle(config: config, userIDList: [opponentUserId], timeout: 30.0, completion: nil)
@@ -147,7 +139,6 @@ After a successful co-hosting connection, either host can initiate a PK. Use [Ba
    ```
 2. **Listen for PK Status**
 
-
    Subscribe to `battleEventPublisher` to monitor key PK events such as start and end.
 
    ``` swift
@@ -169,7 +160,6 @@ After a successful co-hosting connection, either host can initiate a PK. Use [Ba
 #### Opponent (Host B) Implementation
 1. **Receive PK Challenge**
 
-
    Listen for PK invitations via `battleEventPublisher`.
 
    ``` swift
@@ -186,7 +176,6 @@ After a successful co-hosting connection, either host can initiate a PK. Use [Ba
    ```
 2. **Respond to PK Challenge**
 
-
    Prompt Host B for “Accept” or “Reject” and call the corresponding method:
 
    ``` swift
@@ -197,7 +186,7 @@ After a successful co-hosting connection, either host can initiate a PK. Use [Ba
            // ...
        }
    }
-   
+
    // User clicks "Reject Challenge"
    func rejectPK(battleId: String) {
        battleStore.rejectBattle(battleID: battleId) { result in
@@ -211,12 +200,10 @@ After a successful co-hosting connection, either host can initiate a PK. Use [Ba
 After the PK session, end the PK and disconnect co-hosting in sequence.
 1. **End PK Battle**
 
-
    PK typically ends automatically when the timer expires, but hosts can also end PK early. Use `exitBattle`:
-   
 
    > **Note****：**After PK ends, both hosts remain connected (side-by-side video streams). Only the PK progress bar and score panel are removed.
-   > 
+   >
 
    ``` swift
    func stopPK(battleId: String) {
@@ -233,7 +220,6 @@ After the PK session, end the PK and disconnect co-hosting in sequence.
    ```
 2. **Disconnect Cross-room Co-hosting**
 
-
    To return to solo live streaming, call `exitHostConnection`:
 
    ``` swift
@@ -251,7 +237,6 @@ After the PK session, end the PK and disconnect co-hosting in sequence.
    ```
 3. **Listen for End Events**
 
-
    Handle UI cleanup in event listeners for consistency:
 
    ``` swift
@@ -265,7 +250,7 @@ After the PK session, end the PK and disconnect co-hosting in sequence.
                }
            }
            .store(in: &cancellables)
-   
+
        // Listen for co-host disconnect event
        coHostStore.coHostEventPublisher
            .sink { [weak self] event in
@@ -280,10 +265,7 @@ After the PK session, end the PK and disconnect co-hosting in sequence.
 
 ### Run and Test
 
-After integrating the above features, use Host A and Host B to test the corresponding operations. The runtime effect is shown below. For UI customization, see [Refine UI Details](https://write.woa.com/#6fe270da-d3b3-4785-bdc2-53b59d6d9cc0).
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182498/1dbf6b48c6df11f0b011525400bf7822.png)
-
+After integrating the above features, use Host A and Host B to test the corresponding operations. The runtime effect is shown below. For UI customization, see Refine UI Details.
 
 ## Refine UI Details
 
@@ -293,23 +275,19 @@ Use the slot capability in the `LiveCoreView.VideoViewDelegate` interface to ove
 
 #### Implementation Example
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182498/242d5611c6df11f0b011525400bf7822.png)
-
-
 #### Implementation
 - **Step 1**: Create a foreground view `CustomSeatView` to display user information above the video stream.
-   
 
    > **Note：**
-   > 
+   >
 
    > You can also refer to the open-source TUILiveKit files [AnchorCoHostView.swift](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/live/Sources/Features/AnchorBoardcast/View/LivingView/Video/AnchorCoHostView.swift) and [AnchorEmptySeatView.swift](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/live/Sources/Features/AnchorBoardcast/View/LivingView/Video/AnchorEmptySeatView.swift) for complete implementation logic.
-   > 
+   >
 
    ``` swift
    import UIKit
    import SnapKit
-   
+
    // Custom floating user info view (foreground)
    class CustomSeatView: UIView {
       lazy var nameLabel: UILabel = {
@@ -318,7 +296,7 @@ Use the slot capability in the `LiveCoreView.VideoViewDelegate` interface to ove
            label.font = .systemFont(ofSize: 14)
            return label
        }()
-   
+
        override init(frame: CGRect) {
            super.init(frame: frame)
            backgroundColor = UIColor.black.withAlphaComponent(0.5)
@@ -335,7 +313,7 @@ Use the slot capability in the `LiveCoreView.VideoViewDelegate` interface to ove
    ``` swift
    import UIKit
    import SnapKit
-   
+
    // Custom avatar placeholder view (background)
    class CustomAvatarView: UIView {
        lazy var avatarImageView: UIImageView = {
@@ -343,7 +321,7 @@ Use the slot capability in the `LiveCoreView.VideoViewDelegate` interface to ove
            imageView.tintColor = .gray
            return imageView
        }()
-   
+
        override init(frame: CGRect) {
            super.init(frame: frame)
            backgroundColor = .clear
@@ -361,12 +339,12 @@ Use the slot capability in the `LiveCoreView.VideoViewDelegate` interface to ove
    ``` swift
    import AtomicXCore
    import RTCRoomEngine
-   
+
    // 1. In your view controller, conform to the VideoViewDelegate protocol
    class YourViewController: UIViewController, VideoViewDelegate {
-   
+
        // ... other code ...
-   
+
        // 2. Fully implement the protocol method, handling both viewLayer types
        func createCoHostView(seatInfo: TUISeatFullInfo, viewLayer: ViewLayer) -> UIView? {
            guard let userId = seatInfo.userId, !userId.isEmpty else {
@@ -386,72 +364,15 @@ Use the slot capability in the `LiveCoreView.VideoViewDelegate` interface to ove
    ```
 
 #### Parameter Description:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Parameter**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatInfo`</td>
-
-<td rowspan="1" colSpan="1" >`TUISeatFullInfo`</td>
-
-<td rowspan="1" colSpan="1" >Seat information object containing user details</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatInfo.userId`</td>
-
-<td rowspan="1" colSpan="1" >`String?`</td>
-
-<td rowspan="1" colSpan="1" >User ID on the seat</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatInfo.userName`</td>
-
-<td rowspan="1" colSpan="1" >`String?`</td>
-
-<td rowspan="1" colSpan="1" >User nickname on the seat</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatInfo.userAvatar`</td>
-
-<td rowspan="1" colSpan="1" >`String?`</td>
-
-<td rowspan="1" colSpan="1" >User avatar URL</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatInfo.userMicrophoneStatus`</td>
-
-<td rowspan="1" colSpan="1" >`TUIDeviceStatus`</td>
-
-<td rowspan="1" colSpan="1" >User microphone status</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatInfo.userCameraStatus`</td>
-
-<td rowspan="1" colSpan="1" >`TUIDeviceStatus`</td>
-
-<td rowspan="1" colSpan="1" >User camera status</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`viewLayer`</td>
-
-<td rowspan="1" colSpan="1" >`ViewLayer`</td>
-
-<td rowspan="1" colSpan="1" >View layer enum<br>- `.foreground`: Foreground widget view, always displayed on top of the video<br>- `.background`: Background widget view, under the foreground view, displayed only when the user has no video stream (e.g., camera off), typically used for the user's default avatar or a placeholder image</td>
-</tr>
-</table>
-
+| **Parameter** | **Type** | **Description** |
+| --- | --- | --- |
+| `seatInfo` | `TUISeatFullInfo` | Seat information object containing user details |
+| `seatInfo.userId` | `String?` | User ID on the seat |
+| `seatInfo.userName` | `String?` | User nickname on the seat |
+| `seatInfo.userAvatar` | `String?` | User avatar URL |
+| `seatInfo.userMicrophoneStatus` | `TUIDeviceStatus` | User microphone status |
+| `seatInfo.userCameraStatus` | `TUIDeviceStatus` | User camera status |
+| `viewLayer` | `ViewLayer` | View layer enum<br>- `.foreground`: Foreground widget view, always displayed on top of the video<br>- `.background`: Background widget view, under the foreground view, displayed only when the user has no video stream (e.g., camera off), typically used for the user's default avatar or a placeholder image |
 
 ### Displaying PK User Score on Video View
 
@@ -459,9 +380,6 @@ When the host starts a PK, you can attach a custom view to the opponent's video
 
 #### Implementation Example
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182498/2c75755dc6df11f0b011525400bf7822.png)
-
-
 #### Implementation
 - **Step 1**: Create a custom PK user view. For a complete implementation, refer to [AnchorBattleMemberInfoView.swift](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/live/Sources/Features/AnchorBoardcast/View/HostBattle/View/AnchorBattleMemberInfoView.swift).
 
@@ -469,7 +387,7 @@ When the host starts a PK, you can attach a custom view to the opponent's video
    import AtomicXCore
    import RTCRoomEngine
    import SnapKit
-   
+
    // Custom PK user view
    class CustomBattleUserView: UIView {
        private let scoreView: UIView = {
@@ -478,18 +396,18 @@ When the host starts a PK, you can attach a custom view to the opponent's video
            view.layer.cornerRadius = 12
            return view
        }()
-   
+
        private lazy var scoreLabel: UILabel = {
            let label = UILabel()
            label.textColor = .white
            label.font = .systemFont(ofSize: 14, weight: .bold)
            return label
        }()
-   
+
        private var userId: String
        private let battleStore: BattleStore
        private var cancellableSet: Set<AnyCancellable> = []
-   
+
        init(liveId: String, battleUser: TUIBattleUser) {
            self.userId = battleUser.userId
            self.battleStore = BattleStore.create(liveID: liveId)
@@ -499,7 +417,7 @@ When the host starts a PK, you can attach a custom view to the opponent's video
            setupUI()
            subscribeBattleState()
        }
-   
+
        private func setupUI() {
            addSubview(scoreView)
            scoreView.addSubview(scoreLabel)
@@ -512,7 +430,7 @@ When the host starts a PK, you can attach a custom view to the opponent's video
                make.trailing.equalToSuperview().offset(-5)
            }
        }
-   
+
        // Subscribe to PK score changes
        private func subscribeBattleState() {
            battleStore.state
@@ -532,83 +450,30 @@ When the host starts a PK, you can attach a custom view to the opponent's video
    ``` swift
    // 1. Let your view controller conform to the VideoViewDelegate protocol
    extension YourViewController: VideoViewDelegate {
-   
+
        public func createBattleView(battleUser: TUIBattleUser) -> UIView? {
            // CustomBattleUserView is your custom PK user info view
            let customView = CustomBattleUserView(liveId: liveId, battleUser: battleUser)
            return customView
        }
-   
+
    }
    ```
 
 #### Parameter Description:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Parameter**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser`</td>
-
-<td rowspan="1" colSpan="1" >`TUIBattleUser`</td>
-
-<td rowspan="1" colSpan="1" >PK user info object</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser.roomId`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >PK room ID</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser.userId`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >PK user ID</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser.userName`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >PK user nickname</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser.avatarUrl`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >PK user avatar URL</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser.score`</td>
-
-<td rowspan="1" colSpan="1" >`UInt`</td>
-
-<td rowspan="1" colSpan="1" >PK score</td>
-</tr>
-</table>
-
+| **Parameter** | **Type** | **Description** |
+| --- | --- | --- |
+| `battleUser` | `TUIBattleUser` | PK user info object |
+| `battleUser.roomId` | `String` | PK room ID |
+| `battleUser.userId` | `String` | PK user ID |
+| `battleUser.userName` | `String` | PK user nickname |
+| `battleUser.avatarUrl` | `String` | PK user avatar URL |
+| `battleUser.score` | `UInt` | PK score |
 
 ### Displaying PK Status on Video Stream
 
 #### Implementation Example
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182498/36561327c6df11f0a4a55254001c06ec.png)
-
-
 #### Implementation
 - **Step 1**: Create a custom PK global view (CustomBattleContainerView). For a complete implementation, refer to [AnchorBattleInfoView.swift](https://github.com/Tencent-RTC/TUIKit_iOS/blob/main/live/Sources/Features/AnchorBoardcast/View/HostBattle/View/AnchorBattleInfoView.swift).
 
@@ -630,162 +495,49 @@ When the host starts a PK, you can attach a custom view to the opponent's video
 In typical** live host PK scenarios,** the value of gifts received by the host is linked to the PK score (for example, when a viewer sends a "Rocket" gift, the host's PK score increases by 500 points). You can implement real-time PK score updates using our REST API.
 
 > Note：
-> 
+>
 
 > The PK score system in the LiveKit backend uses pure numeric calculation and accumulation. You must calculate the PK score according to your own business logic before calling the update API. See the following PK score calculation examples:
-> 
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Gift Type</td>
-
-<td rowspan="1" colSpan="1" >Score Calculation Rule</td>
-
-<td rowspan="1" colSpan="1" >Example</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Basic Gift</td>
-
-<td rowspan="1" colSpan="1" >Gift value × 5</td>
-
-<td rowspan="1" colSpan="1" >10 RMB gift → 50 points</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Intermediate Gift</td>
-
-<td rowspan="1" colSpan="1" >Gift value × 8</td>
-
-<td rowspan="1" colSpan="1" >50 RMB gift → 400 points</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Advanced Gift</td>
-
-<td rowspan="1" colSpan="1" >Gift value × 12</td>
-
-<td rowspan="1" colSpan="1" >100 RMB gift → 1200 points</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Special Effect Gift</td>
-
-<td rowspan="1" colSpan="1" >Fixed high score</td>
-
-<td rowspan="1" colSpan="1" >520 RMB gift → 1314 points</td>
-</tr>
-</table>
-
-
+>
+| Gift Type | Score Calculation Rule | Example |
+| --- | --- | --- |
+| Basic Gift | Gift value × 5 | 10 RMB gift → 50 points |
+| Intermediate Gift | Gift value × 8 | 50 RMB gift → 400 points |
+| Advanced Gift | Gift value × 12 | 100 RMB gift → 1200 points |
+| Special Effect Gift | Fixed high score | 520 RMB gift → 1314 points |
 
 #### REST API Call Flow
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027182498/4043ba3cc6df11f0b011525400bf7822.png)
-
-
 #### Key Process Description
 1. **Obtain PK Status:**
 
-  - **Callback Configuration**: Configure [PK Status Callback](https://write.woa.com/document/170203265552953344) to have the `LiveKit` backend actively notify your system when PK starts or ends.
+  - **Callback Configuration**: Configure PK Status Callback to have the `LiveKit` backend actively notify your system when PK starts or ends.
 
-  - **Active Query**: Your backend can call the [PK Status Query](https://write.woa.com/document/170220847572692992) API at any time to check the current PK status.
+  - **Active Query**: Your backend can call the PK Status Query API at any time to check the current PK status.
 
 2. **PK Score Calculation**: Your backend calculates the PK score increment based on your business rules.
 
-3. **PK Score Update**: Your backend calls the [Update PK Score](https://write.woa.com/document/170220034100383744) API to update the PK score in the LiveKit backend.
+3. **PK Score Update**: Your backend calls the Update PK Score API to update the PK score in the LiveKit backend.
 
 4. **LiveKit Backend Syncs to Client**: The backend automatically synchronizes the updated PK score to all clients.
 
-
 #### Involved REST API Endpoints
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**API**</td>
-
-<td rowspan="1" colSpan="1" >**Function Description**</td>
-
-<td rowspan="1" colSpan="1" >**Request Example**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Active API - Query PK Status</td>
-
-<td rowspan="1" colSpan="1" >Check whether the current room is in PK</td>
-
-<td rowspan="1" colSpan="1" >[Example](https://write.woa.com/document/170220847572692992)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Active API - Update PK Score</td>
-
-<td rowspan="1" colSpan="1" >Update the calculated PK score</td>
-
-<td rowspan="1" colSpan="1" >[Example](https://write.woa.com/document/170220034100383744)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Callback Configuration - PK Start Callback</td>
-
-<td rowspan="1" colSpan="1" >Receive real-time notification when PK starts</td>
-
-<td rowspan="1" colSpan="1" >[Example](https://write.woa.com/document/170203265552953344)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Callback Configuration - PK End Callback</td>
-
-<td rowspan="1" colSpan="1" >Receive real-time notification when PK ends</td>
-
-<td rowspan="1" colSpan="1" >[Example](https://write.woa.com/document/170221608179601408)</td>
-</tr>
-</table>
-
+| **API** | **Function Description** | **Request Example** |
+| --- | --- | --- |
+| Active API - Query PK Status | Check whether the current room is in PK | Example |
+| Active API - Update PK Score | Update the calculated PK score | Example |
+| Callback Configuration - PK Start Callback | Receive real-time notification when PK starts | Example |
+| Callback Configuration - PK End Callback | Receive real-time notification when PK ends | Example |
 
 ## API Documentation
 
 For detailed information on all public interfaces, properties, and methods of [CoHostStore](https://tencent-rtc.github.io/TUIKit_iOS/documentation/atomicxcore/cohoststore) and related classes, refer to the official API documentation included with the [AtomicXCore](https://tencent-rtc.github.io/TUIKit_iOS/documentation/atomicxcore) framework. The relevant stores used in this guide are as follows:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Store/Component**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-
-<td rowspan="1" colSpan="1" >**API Reference**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`LiveCoreView`</td>
-
-<td rowspan="1" colSpan="1" >Core view component for displaying and interacting with live video streams. Handles video rendering and view widgets, supports host streaming, audience co-hosting, host connections, and more.</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](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>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`DeviceStore`</td>
-
-<td rowspan="1" colSpan="1" >Controls audio/video devices: microphone (on/off, volume), camera (on/off, switch, quality), screen sharing, and real-time device status monitoring.</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](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>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`CoHostStore`</td>
-
-<td rowspan="1" colSpan="1" >Handles host cross-room connections: supports multiple layout templates (dynamic grid, etc.), initiates/accepts/rejects connections, and manages co-host interactions.</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](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>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`BattleStore`</td>
-
-<td rowspan="1" colSpan="1" >Manages host PK battles: initiate PK (set duration/opponent), manage PK status (start/end), synchronize scores, and listen for battle results.</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](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>
-</tr>
-</table>
-
+| **Store/Component** | **Description** | **API Reference** |
+| --- | --- | --- |
+| `LiveCoreView` | Core view component for displaying and interacting with live video streams. Handles video rendering and view widgets, supports host streaming, audience co-hosting, host connections, and more. | [API Documentation](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) |
+| `DeviceStore` | Controls audio/video devices: microphone (on/off, volume), camera (on/off, switch, quality), screen sharing, and real-time device status monitoring. | [API Documentation](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) |
+| `CoHostStore` | Handles host cross-room connections: supports multiple layout templates (dynamic grid, etc.), initiates/accepts/rejects connections, and manages co-host interactions. | [API Documentation](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` | Manages host PK battles: initiate PK (set duration/opponent), manage PK status (start/end), synchronize scores, and listen for battle results. | [API Documentation](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) |
 
 ## FAQs
 
@@ -794,7 +546,6 @@ For detailed information on all public interfaces, properties, and methods of [C
 
 - Check network stability. The invitation signaling has a default timeout of 30 seconds.
 
-
 ### What happens if one host disconnects from the network or the app crashes during co-hosting or PK?
 
 Both `CoHostStore` and `BattleStore` include built-in heartbeat and timeout detection. If one party exits abnormally, the other party is notified via events such as `onCoHostUserLeft` or `onUserExitBattle`. You can update the UI accordingly, for example, by displaying "The other party has disconnected" and ending the interaction.
@@ -808,8 +559,6 @@ The REST API meets the security, real-time, and scalability requirements for PK
 
 - **Flexible rule adaptation**: Backend configuration changes (such as adjusting gift-to-score mapping or bonus points) can be made without modifying the frontend, reducing iteration costs.
 
-
 ### How do I manage the lifecycle and events of custom views added via `VideoViewDelegate`?
 
 LiveCoreView automatically manages views returned by delegate methods, including adding and removing them. No manual lifecycle management is required.
-