@tencent-rtc/mcp 1.3.9 → 1.4.1

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

@@ -4,14 +4,11 @@
 
 A complete "anchor connection PK" usually consists of three core stages, and the overall process is as follows:
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/635c0bc0f76111f0b34b525400ecee81.png)
-
-
 ## Implementation Steps
 
 ### Step 1: Integrating the Component
 
-Refer to [Quick Connection](https://write.woa.com/document/200455640177692672) for seamless integration with **AtomicXCore** and complete **LiveCoreWidget** access.
+Refer to Quick Connection for seamless integration with **AtomicXCore** and complete **LiveCoreWidget** access.
 
 ### Step 2: Implementing Cross-Room Connection
 
@@ -20,51 +17,50 @@ The goal of this step is to have two Anchors appear in the same view, and we wil
 #### Inviter (Anchor A) Implementation
 1. **Initiate connection invitation**
 
-
    When Anchor A selects target Anchor B on the interface and initiates connecting line, call the `requestHostConnection` method.
 
    ``` java
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    // Anchor A's webpage
    class AnchorAPage extends StatefulWidget {
      final String liveId;
-   
+
      const AnchorAPage({Key? key, required this.liveId}) : super(key: key);
-   
+
      @override
      State<AnchorAPage> createState() => _AnchorAPageState();
    }
-   
+
    class _AnchorAPageState extends State<AnchorAPage> {
      late final CoHostStore _coHostStore;
      late final CoHostListener _coHostListener;
-   
+
      @override
      void initState() {
        super.initState();
        _coHostStore = CoHostStore.create(widget.liveId);
        _setupListeners();
      }
-   
+
      // User clicks the "connecting line" button and selected Anchor B
      Future<void> inviteHostB(String targetHostLiveId) async {
        final layout = CoHostLayoutTemplate.hostDynamicGrid; // Select a layout template
        const timeout = 30; // Invitation timeout duration (seconds)
-   
+
        final result = await _coHostStore.requestHostConnection(
          targetHostLiveID: targetHostLiveId,
          layoutTemplate: layout,
          timeout: timeout,
        );
-   
+
        if (result.isSuccess) {
          print('Connection invitation sent, waiting for peer to handle...');
        } else {
          print('Invitation sending failure: ${result.errorMessage}');
        }
      }
-   
+
      @override
      void dispose() {
        _coHostStore.removeCoHostListener(_coHostListener);
@@ -74,7 +70,6 @@ The goal of this step is to have two Anchors appear in the same view, and we wil
    ```
 2. **Listen for invitation result**
 
-
    Through `CoHostListener`, you can receive the Anchor B's processing result.
 
    ``` java
@@ -104,33 +99,32 @@ The goal of this step is to have two Anchors appear in the same view, and we wil
 #### Invitee (Anchor B) Implementation
 1. **Receive connection invitation**
 
-
    Through `CoHostListener`, Anchor B can listen to the invitation from Anchor A.
 
    ``` java
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    // Anchor B's webpage
    class AnchorBPage extends StatefulWidget {
      final String liveId;
-   
+
      const AnchorBPage({Key? key, required this.liveId}) : super(key: key);
-   
+
      @override
      State<AnchorBPage> createState() => _AnchorBPageState();
    }
-   
+
    class _AnchorBPageState extends State<AnchorBPage> {
      late final CoHostStore _coHostStore;
      late final CoHostListener _coHostListener;
-   
+
      @override
      void initState() {
        super.initState();
        _coHostStore = CoHostStore.create(widget.liveId);
        _setupListeners();
      }
-   
+
      // Set up monitoring during initialization
      void _setupListeners() {
        _coHostListener = CoHostListener(
@@ -141,7 +135,7 @@ The goal of this step is to have two Anchors appear in the same view, and we wil
        );
        _coHostStore.addCoHostListener(_coHostListener);
      }
-   
+
      @override
      void dispose() {
        _coHostStore.removeCoHostListener(_coHostListener);
@@ -151,7 +145,6 @@ The goal of this step is to have two Anchors appear in the same view, and we wil
    ```
 2. **Respond to connection invitation**
 
-
    When Anchor B makes a selection in the pop-up dialog box, call the method accordingly.
 
    ``` java
@@ -164,7 +157,7 @@ The goal of this step is to have two Anchors appear in the same view, and we wil
        print('Connection acceptance failure: ${result.errorMessage}');
      }
    }
-   
+
    Future<void> rejectInvitation(String fromHostLiveId) async {
      final result = await _coHostStore.rejectHostConnection(fromHostLiveId);
      if (result.isSuccess) {
@@ -182,14 +175,13 @@ Upon success of the connecting line, either party can initiate PK. This step wil
 #### Challenger (Such As Anchor A) Implementation
 1. **Initiate PK challenge**
 
-
    When Anchor A clicks the "PK" button, call the `requestBattle` method.
 
    ``` java
    // Part of _AnchorAPageState
    late final BattleStore _battleStore;
    late final BattleListener _battleListener;
-   
+
    @override
    void initState() {
      super.initState();
@@ -198,7 +190,7 @@ Upon success of the connecting line, either party can initiate PK. This step wil
      _setupListeners();
      _setupBattleListeners();
    }
-   
+
    Future<void> startPK(String opponentUserId) async {
      final config = BattleConfig(duration: 300); // PK lasts 5 minutes
      final result = await _battleStore.requestBattle(
@@ -206,7 +198,7 @@ Upon success of the connecting line, either party can initiate PK. This step wil
        userIDList: [opponentUserId],
        timeout: 30,
      );
-   
+
      if (result.isSuccess) {
        print('Battle request sent, battleID: ${result.battleID}');
      } else {
@@ -216,7 +208,6 @@ Upon success of the connecting line, either party can initiate PK. This step wil
    ```
 2. **Listen for PK status**
 
-
    Listen for key events such as PK start and end via `BattleListener`.
 
    ``` java
@@ -238,7 +229,7 @@ Upon success of the connecting line, either party can initiate PK. This step wil
      );
      _battleStore.addBattleListener(_battleListener);
    }
-   
+
    @override
    void dispose() {
      _coHostStore.removeCoHostListener(_coHostListener);
@@ -250,7 +241,6 @@ Upon success of the connecting line, either party can initiate PK. This step wil
 #### Challenger (Anchor B) Implementation
 1. **Accept PK challenge**
 
-
    Listen for PK invitation via `BattleListener`.
 
    ``` java
@@ -274,7 +264,6 @@ Upon success of the connecting line, either party can initiate PK. This step wil
    ```
 2. **Respond to PK challenge**
 
-
    When Anchor B makes a selection, call the appropriate method.
 
    ``` java
@@ -288,7 +277,7 @@ Upon success of the connecting line, either party can initiate PK. This step wil
        print('PK acceptance failure: ${result.errorMessage}');
      }
    }
-   
+
    // User click "Reject Challenge"
    Future<void> rejectPK(String battleId) async {
      final result = await _battleStore.rejectBattle(battleId);
@@ -302,10 +291,7 @@ Upon success of the connecting line, either party can initiate PK. This step wil
 
 ### Execution Effect
 
-After integrating the above feature implementation, perform the corresponding operation using Anchor A and Anchor B separately. The execution effect is as follows. You can refer to the next chapter [Refine UI Detail](https://write.woa.com/#.E5.AE.8C.E5.96.84-ui-.E7.BB.86.E8.8A.82) to customize UI logic.
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/71fcc39af76111f0ab675254001d6acc.png)
-
+After integrating the above feature implementation, perform the corresponding operation using Anchor A and Anchor B separately. The execution effect is as follows. You can refer to the next chapter Refine UI Detail to customize UI logic.
 
 ## Refine UI Detail
 
@@ -315,32 +301,28 @@ You can use the "slot" capacity provided by the `VideoWidgetBuilder` parameter o
 
 #### Effect
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/7c936e67f76111f0b34b525400ecee81.png)
-
-
 #### Implementation Method
 - **Step 1**: Create a foreground view (**CustomCoHostForegroundView**) to display user information above the video stream.
-   
 
    > **Note:**
-   > 
+   >
 
    > You can also refer to the [co_host_foreground_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/live_stream/features/decorations/co_host/co_host_foreground_widget.dart) and [co_host_background_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/live_stream/features/decorations/co_host/co_host_background_widget.dart) files in the TUILiveKit open-source project to understand the complete implementation logic.
-   > 
+   >
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:rtc_room_engine/rtc_room_engine.dart';
-   
+
    /// Custom connected host message floating view (foreground)
    class CustomCoHostForegroundView extends StatelessWidget {
      final SeatFullInfo seatInfo;
-   
+
      const CustomCoHostForegroundView({
-       Key? key, 
+       Key? key,
        required this.seatInfo,
      }) : super(key: key);
-   
+
      @override
      Widget build(BuildContext context) {
        return Container(
@@ -372,16 +354,16 @@ You can use the "slot" capacity provided by the `VideoWidgetBuilder` parameter o
    ``` java
    import 'package:flutter/material.dart';
    import 'package:rtc_room_engine/rtc_room_engine.dart';
-   
+
    /// Custom connected anchor avatar placeholder view (background)
    class CustomCoHostBackgroundView extends StatelessWidget {
      final SeatFullInfo seatInfo;
-   
+
      const CustomCoHostBackgroundView({
-       Key? key, 
+       Key? key,
        required this.seatInfo,
      }) : super(key: key);
-   
+
      @override
      Widget build(BuildContext context) {
        final avatarUrl = seatInfo.userInfo.avatarUrl;
@@ -419,7 +401,7 @@ You can use the "slot" capacity provided by the `VideoWidgetBuilder` parameter o
          ),
        );
      }
-   
+
      Widget _buildDefaultAvatar() {
        return Container(
          width: 60,
@@ -436,40 +418,40 @@ You can use the "slot" capacity provided by the `VideoWidgetBuilder` parameter o
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
    import 'package:rtc_room_engine/rtc_room_engine.dart';
-   
+
    /// Live streaming page with custom connection view
    class CustomCoHostLiveWidget extends StatefulWidget {
      final String liveId;
-   
+
      const CustomCoHostLiveWidget({
-       Key? key, 
+       Key? key,
        required this.liveId,
      }) : super(key: key);
-   
+
      @override
      State<CustomCoHostLiveWidget> createState() => _CustomCoHostLiveWidgetState();
    }
-   
+
    class _CustomCoHostLiveWidgetState extends State<CustomCoHostLiveWidget> {
      late LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
        _controller = LiveCoreController.create();
        _controller.setLiveID(widget.liveId);
      }
-   
+
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
-   
+
      /// Build a custom view for the connected host
      Widget _buildCoHostWidget(
-       BuildContext context, 
-       SeatFullInfo seatFullInfo, 
+       BuildContext context,
+       SeatFullInfo seatFullInfo,
        ViewLayer viewLayer,
      ) {
        if (viewLayer == ViewLayer.foreground) {
@@ -480,7 +462,7 @@ You can use the "slot" capacity provided by the `VideoWidgetBuilder` parameter o
          return CustomCoHostBackgroundView(seatInfo: seatFullInfo);
        }
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -496,56 +478,13 @@ You can use the "slot" capacity provided by the `VideoWidgetBuilder` parameter o
    ```
 
 #### **Parameter description:**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Parameter**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Note**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatFullInfo`</td>
-
-<td rowspan="1" colSpan="1" >`SeatFullInfo`</td>
-
-<td rowspan="1" colSpan="1" >Seat information object, containing the Anchor's detailed information</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatFullInfo.userInfo.userId`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Anchor's user ID</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatFullInfo.userInfo.userName`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Anchor's Nickname</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatFullInfo.userInfo.avatarUrl`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Anchor's profile photo URL</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`viewLayer`</td>
-
-<td rowspan="1" colSpan="1" >`ViewLayer`</td>
-
-<td rowspan="1" colSpan="1" >View hierarchy enumeration<br>`ViewLayer.foreground` refers to the pendant view in the foreground, always displayed on top of the video image.<br>`ViewLayer.background` refers to the pendant view in the background, located in the lower layer of the foreground view. It is only displayed when the corresponding user has no video stream (such as when the camera is off), usually used for displaying the default avatar or placeholder image.</td>
-</tr>
-</table>
-
+| **Parameter** | **Type** | **Note** |
+| --- | --- | --- |
+| `seatFullInfo` | `SeatFullInfo` | Seat information object, containing the Anchor's detailed information |
+| `seatFullInfo.userInfo.userId` | `String` | Anchor's user ID |
+| `seatFullInfo.userInfo.userName` | `String` | Anchor's Nickname |
+| `seatFullInfo.userInfo.avatarUrl` | `String` | Anchor's profile photo URL |
+| `viewLayer` | `ViewLayer` | View hierarchy enumeration<br>`ViewLayer.foreground` refers to the pendant view in the foreground, always displayed on top of the video image.<br>`ViewLayer.background` refers to the pendant view in the background, located in the lower layer of the foreground view. It is only displayed when the corresponding user has no video stream (such as when the camera is off), usually used for displaying the default avatar or placeholder image. |
 
 ### Implementing Score Display for PK User View
 
@@ -553,9 +492,6 @@ When the Anchor starts PK, you can mount a custom view on the other party's vide
 
 #### **Effect**
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/c3973bd3f76111f0ab675254001d6acc.png)
-
-
 #### Implementation Method
 - **Step 1**: Create a custom PK user view. You can refer to the [battle_member_info_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/live_stream/features/decorations/battle/battle_member_info_widget.dart) file in the TUILiveKit open-source project to learn about the complete implementation logic.
 
@@ -563,45 +499,45 @@ When the Anchor starts PK, you can mount a custom view on the other party's vide
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
    import 'package:rtc_room_engine/rtc_room_engine.dart';
-   
+
    /// Custom PK User View
    class CustomBattleUserView extends StatefulWidget {
      final String liveId;
      final TUIBattleUser battleUser;
-   
+
      const CustomBattleUserView({
        Key? key,
        required this.liveId,
        required this.battleUser,
      }) : super(key: key);
-   
+
      @override
      State<CustomBattleUserView> createState() => _CustomBattleUserViewState();
    }
-   
+
    class _CustomBattleUserViewState extends State<CustomBattleUserView> {
      late final BattleStore _battleStore;
      late final VoidCallback _scoreChangedListener = _onScoreChanged;
      int _score = 0;
-   
+
      @override
      void initState() {
        super.initState();
        _battleStore = BattleStore.create(widget.liveId);
        _subscribeBattleState();
      }
-   
+
      /// Subscribe to PK score changes
      void _subscribeBattleState() {
        _battleStore.battleState.battleScore.addListener(_scoreChangedListener);
        // Initialize the score
        _updateScore(_battleStore.battleState.battleScore.value);
      }
-   
+
      void _onScoreChanged() {
        _updateScore(_battleStore.battleState.battleScore.value);
      }
-   
+
      void _updateScore(Map<String, int> battleScore) {
        final score = battleScore[widget.battleUser.userId] ?? 0;
        if (mounted && score != _score) {
@@ -610,13 +546,13 @@ When the Anchor starts PK, you can mount a custom view on the other party's vide
          });
        }
      }
-   
+
      @override
      void dispose() {
        _battleStore.battleState.battleScore.removeListener(_scoreChangedListener);
        super.dispose();
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return IgnorePointer(
@@ -649,36 +585,36 @@ When the Anchor starts PK, you can mount a custom view on the other party's vide
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
    import 'package:rtc_room_engine/rtc_room_engine.dart';
-   
+
    Live streaming page with custom PK view
    class CustomBattleLiveWidget extends StatefulWidget {
      final String liveId;
-   
+
      const CustomBattleLiveWidget({
-       Key? key, 
+       Key? key,
        required this.liveId,
      }) : super(key: key);
-   
+
      @override
      State<CustomBattleLiveWidget> createState() => _CustomBattleLiveWidgetState();
    }
-   
+
    class _CustomBattleLiveWidgetState extends State<CustomBattleLiveWidget> {
      late LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
        _controller = LiveCoreController.create();
        _controller.setLiveID(widget.liveId);
      }
-   
+
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
-   
+
      /// Build Custom PK User View
      Widget _buildBattleWidget(BuildContext context, TUIBattleUser battleUser) {
        return CustomBattleUserView(
@@ -686,7 +622,7 @@ When the Anchor starts PK, you can mount a custom view on the other party's vide
          battleUser: battleUser,
        );
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -702,72 +638,19 @@ When the Anchor starts PK, you can mount a custom view on the other party's vide
    ```
 
 #### **Parameter description:**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Parameter**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Note**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser`</td>
-
-<td rowspan="1" colSpan="1" >`TUIBattleUser`</td>
-
-<td rowspan="1" colSpan="1" >PK user information 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 address.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`battleUser.score`</td>
-
-<td rowspan="1" colSpan="1" >`int`</td>
-
-<td rowspan="1" colSpan="1" >PK score.</td>
-</tr>
-</table>
-
+| **Parameter** | **Type** | **Note** |
+| --- | --- | --- |
+| `battleUser` | `TUIBattleUser` | PK user information 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 address. |
+| `battleUser.score` | `int` | PK score. |
 
 ### Displaying PK Status on Video Stream Image
 
 #### **Effect**
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/73387fddf76211f0859b52540097cba1.png)
-
-
 #### **Implementation Method**
 - **Step 1:** Create a custom PK global view **CustomBattleContainerView**. You can refer to the [battle_info_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/live_stream/features/decorations/battle/battle_info_widget.dart) file in the TUILiveKit open-source project to achieve the same effect.
 
@@ -776,42 +659,42 @@ When the Anchor starts PK, you can mount a custom view on the other party's vide
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    Live streaming page with custom PK container view
    class CustomBattleContainerLiveWidget extends StatefulWidget {
      final String liveId;
-   
+
      const CustomBattleContainerLiveWidget({
-       Key? key, 
+       Key? key,
        required this.liveId,
      }) : super(key: key);
-   
+
      @override
      State<CustomBattleContainerLiveWidget> createState() => _CustomBattleContainerLiveWidgetState();
    }
-   
+
    class _CustomBattleContainerLiveWidgetState extends State<CustomBattleContainerLiveWidget> {
      late LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
        _controller = LiveCoreController.create();
        _controller.setLiveID(widget.liveId);
      }
-   
+
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
-   
+
      /// Build PK Container View
      Widget _buildBattleContainerWidget(BuildContext context) {
        // CustomBattleContainerView is your custom PK global view
        return CustomBattleContainerView(liveId: widget.liveId);
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -839,7 +722,7 @@ class FullCustomLiveWidget extends StatefulWidget {
   final String liveId;
 
   const FullCustomLiveWidget({
-    Key? key, 
+    Key? key,
     required this.liveId,
   }) : super(key: key);
 
@@ -865,8 +748,8 @@ class _FullCustomLiveWidgetState extends State<FullCustomLiveWidget> {
 
   /// Build a custom view for the connected host
   Widget _buildCoHostWidget(
-    BuildContext context, 
-    SeatFullInfo seatFullInfo, 
+    BuildContext context,
+    SeatFullInfo seatFullInfo,
     ViewLayer viewLayer,
   ) {
     if (viewLayer == ViewLayer.foreground) {
@@ -912,178 +795,51 @@ class _FullCustomLiveWidgetState extends State<FullCustomLiveWidget> {
 In the **live streamer PK scenario**, the value of gifts received by the Anchor will be linked to the PK value (for example: when the audience sends a "rocket" gift, the Anchor's PK score increases by 500 points). You can easily implement real-time score updates in the live PK scenario through our REST API.
 
 > **Important Note:**
-> 
+>
 
 > The PK score system in the LiveKit backend uses pure numerical computation and cumulative mechanism. Therefore, you need to complete the PK score calculation before calling the update API based on your operational strategy and business requirement. See the following PK score calculation example:
-> 
-<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 CNY 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 CNY Gift → 400 Points</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Senior Gift</td>
-
-<td rowspan="1" colSpan="1" >Gift Value × 12</td>
-
-<td rowspan="1" colSpan="1" >100 CNY 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 CNY Gift → 1314 Points</td>
-</tr>
-</table>
-
-
+>
+| **Gift Type** | **Score Calculation Rule** | **Example** |
+| --- | --- | --- |
+| Basic Gift | Gift Value × 5 | 10 CNY Gift → 50 Points |
+| Intermediate Gift | Gift Value × 8 | 50 CNY Gift → 400 Points |
+| Senior Gift | Gift Value × 12 | 100 CNY Gift → 1200 Points |
+| Special Effect Gift | fixed high score | 520 CNY Gift → 1314 Points |
 
 #### REST API Call Process
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/7dbc23ccf76211f08586525400380f7d.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 about all public interfaces, attributes, and methods of [CoHostStore](https://pub.dev/documentation/atomic_x_core/latest/api_live_co_host_store/CoHostStore-class.html) and its related classes, see the official API documentation of the [AtomicXCore](https://tencent-rtc.github.io/TUIKit_Flutter/index.html) framework. The related Store used in this guide is as follows:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Store/Component**</td>
-
-<td rowspan="1" colSpan="1" >**Feature Description**</td>
-
-<td rowspan="1" colSpan="1" >**API Reference**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**LiveCoreWidget**</td>
-
-<td rowspan="1" colSpan="1" >The core view component for live video stream display and interaction: responsible for stream rendering and view widget processing, supporting scenarios such as anchor live streaming, audience mic connection, and cross-room connection with other anchors.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_view_live_live_core_widget/LiveCoreWidget-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**LiveCoreController**</td>
-
-<td rowspan="1" colSpan="1" >The controller of LiveCoreWidget: are used to set the live stream ID, control the preview, and perform other operations.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_view_live_live_core_widget/LiveCoreController-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**VideoWidgetBuilder**</td>
-
-<td rowspan="1" colSpan="1" >Video view adapter: used for custom pendant view of video stream in scenarios such as connected host, PK user, and PK containers.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_view_live_live_core_widget/VideoWidgetBuilder-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**DeviceStore**</td>
-
-<td rowspan="1" colSpan="1" >Audio/Video device control: microphone (on/off, volume), camera (on/off, switchover, video quality), screen sharing, and real-time monitoring of device status.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_device_store/DeviceStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**CoHostStore**</td>
-
-<td rowspan="1" colSpan="1" >Anchor cross-room connection: supports multiple layout templates (dynamic grid, etc.), initiate/accept/reject connection, and manage interactive Anchor connections.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_host_store/api_live_co_host_store-library.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**BattleStore**</td>
-
-<td rowspan="1" colSpan="1" >Anchor PK battle: trigger PK (duration configuration/competitor), manage PK status (started/ended), synchronize score, listen to battle results.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_battle_store/BattleStore-class.html)</td>
-</tr>
-</table>
-
+| **Store/Component** | **Feature Description** | **API Reference** |
+| --- | --- | --- |
+| **LiveCoreWidget** | The core view component for live video stream display and interaction: responsible for stream rendering and view widget processing, supporting scenarios such as anchor live streaming, audience mic connection, and cross-room connection with other anchors. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_view_live_live_core_widget/LiveCoreWidget-class.html) |
+| **LiveCoreController** | The controller of LiveCoreWidget: are used to set the live stream ID, control the preview, and perform other operations. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_view_live_live_core_widget/LiveCoreController-class.html) |
+| **VideoWidgetBuilder** | Video view adapter: used for custom pendant view of video stream in scenarios such as connected host, PK user, and PK containers. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_view_live_live_core_widget/VideoWidgetBuilder-class.html) |
+| **DeviceStore** | Audio/Video device control: microphone (on/off, volume), camera (on/off, switchover, video quality), screen sharing, and real-time monitoring of device status. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_device_store/DeviceStore-class.html) |
+| **CoHostStore** | Anchor cross-room connection: supports multiple layout templates (dynamic grid, etc.), initiate/accept/reject connection, and manage interactive Anchor connections. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_host_store/api_live_co_host_store-library.html) |
+| **BattleStore** | Anchor PK battle: trigger PK (duration configuration/competitor), manage PK status (started/ended), synchronize score, listen to battle results. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_battle_store/BattleStore-class.html) |
 
 ## FAQs
 
@@ -1092,7 +848,6 @@ For detailed information about all public interfaces, attributes, and methods of
 
 - Check the network connection is connected. The invitation signaling has a default timeout duration of 30 seconds.
 
-
 ### What to Do When Network Disconnection or App Crash Occurs during Connecting Line or PK for an Anchor?
 
 **CoHostStore** and **BattleStore** have internal heartbeat and timeout detection mechanisms. If one party exits abnormally, the other will receive notifications through events such as **onCoHostUserLeft** or **onUserExitBattle**. Based on these events, you can handle the UI, for example, prompt "The other party has gone offline" and end the interaction.
@@ -1106,8 +861,6 @@ Because REST API can satisfy both the **security, real-timeness, and scalability
 
 - **Flexible rule adaptation**: Just modify the backend configuration (such as adjusting the score corresponding to gifts or bonus points) to adapt to business changes, with no need to modify the frontend, reducing iteration cost.
 
-
 ### How to Manage the Lifecycle and Event of Custom Views Added Via `VideoWidgetBuilder`?
 
 **LiveCoreWidget** automatically manages the addition and removal of views returned by `coHostWidgetBuilder`, `battleWidgetBuilder`, and `battleContainerWidgetBuilder` callbacks, with no need for manual processing. If necessary to handle user interaction (such as click event) in custom views, just add the corresponding event when creating the view.
-