@tencent-rtc/mcp 1.3.9 → 1.4.1

package/resource/doc/livekit/{voice → core-sdk/voice}/flutter/voice-integration.md

@@ -3,61 +3,22 @@ This document guides you through building a voice chat room application with hos
 ## Core Concepts
 
 Before starting integration, please go through the following table to understand several core concepts related to `LiveSeatStore`:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Core Concepts**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Core Responsibilities and Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[LiveSeatStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/LiveSeatStore-class.html)</td>
-
-<td rowspan="1" colSpan="1" >`class`</td>
-
-<td rowspan="1" colSpan="1" >The core of seat management is responsible for managing ALL seat information and related operations in the room.<br>Expose the real-time microphone position list data stream through `liveSeatState.seatList`.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[LiveSeatState](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/LiveSeatState-class.html)</td>
-
-<td rowspan="1" colSpan="1" >`class`</td>
-
-<td rowspan="1" colSpan="1" >Represent the current status of the microphone position.<br>- `seatList` is a `ValueListenable<List<SeatInfo>>` type that stores the real-time status of the seat position list;<br>- `speakingUsers` signifies the person currently speaking and the corresponding volume.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[SeatInfo](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/SeatInfo-class.html)</td>
-
-<td rowspan="1" colSpan="1" >`class`</td>
-
-<td rowspan="1" colSpan="1" >The data model of one microphone position. The seat position list (`seatList`) pushed by `LiveSeatStore` consists of multiple `SeatInfo` objects. Key field:<br>- `index` (the index of the seat position).<br>- `isLocked` (whether the seat position is locked).<br>- `userInfo` (user information on the seat position. If the seat position is empty, this field is also an empty object).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >[SeatUserInfo](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/SeatUserInfo-class.html)</td>
-
-<td rowspan="1" colSpan="1" >`class`</td>
-
-<td rowspan="1" colSpan="1" >The detailed data model of the on-mic user. When a user successfully gets on mic, the `userInfo` field in `SeatInfo` will be filled with this user. Key field:<br>- `userID` (user's unique ID)<br>- `userName` (user's nickname)<br>- `avatarURL` (user's profile photo URL)<br>- `microphoneStatus` (Mic status)<br>- `cameraStatus` (Camera status).</td>
-</tr>
-</table>
-
+| **Core Concepts** | **Type** | **Core Responsibilities and Description** |
+| --- | --- | --- |
+| [LiveSeatStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/LiveSeatStore-class.html) | `class` | The core of seat management is responsible for managing ALL seat information and related operations in the room.<br>Expose the real-time microphone position list data stream through `liveSeatState.seatList`. |
+| [LiveSeatState](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/LiveSeatState-class.html) | `class` | Represent the current status of the microphone position.<br>- `seatList` is a `ValueListenable<List<SeatInfo>>` type that stores the real-time status of the seat position list;<br>- `speakingUsers` signifies the person currently speaking and the corresponding volume. |
+| [SeatInfo](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/SeatInfo-class.html) | `class` | The data model of one microphone position. The seat position list (`seatList`) pushed by `LiveSeatStore` consists of multiple `SeatInfo` objects. Key field:<br>- `index` (the index of the seat position).<br>- `isLocked` (whether the seat position is locked).<br>- `userInfo` (user information on the seat position. If the seat position is empty, this field is also an empty object). |
+| [SeatUserInfo](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/SeatUserInfo-class.html) | `class` | The detailed data model of the on-mic user. When a user successfully gets on mic, the `userInfo` field in `SeatInfo` will be filled with this user. Key field:<br>- `userID` (user's unique ID)<br>- `userName` (user's nickname)<br>- `avatarURL` (user's profile photo URL)<br>- `microphoneStatus` (Mic status)<br>- `cameraStatus` (Camera status). |
 
 ## Preparations
 
 ### Step 1: Activate the Services
 
-See [Activate Service](https://write.woa.com/document/141936672617742336) to obtain either the trial or paid version of the SDK.Then, go to [the Console](https://console.trtc.io/app) for application management, and get the following:
+See Activate Service to obtain either the trial or paid version of the SDK.Then, go to [the Console](https://console.trtc.io/app) for application management, and get the following:
 - `SDKAppID`: Application identifier (required). Tencent Cloud uses `SDKAppID` for billing and details.
 
 - `SDKSecretKey`: Application secret key, used to initialize the configuration file with secret information.
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/7b871950f80911f0af7a525400370dda.png)
-
-
 ### Step 2: Import AtomicXCore into Your Project
 1. **Install component**: Please add `atomic_x_core` dependency in your `pubspec.yaml` file, then execute `flutter pub get`.
 
@@ -67,9 +28,6 @@ See [Activate Service](https://write.woa.com/document/141936672617742336) to obt
    ```
 2. **Configure project permissions:** Android and iOS projects all are needed to configure permissions.
 
-
-   
-
 【Android】
 
 Add permission to use microphone in file `android/app/src/main/AndroidManifest.xml`.
@@ -102,19 +60,15 @@ end
 <string>TUILiveKit needs to access your microphone permission. Recorded video will have sound when enabled</string>
 ```
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/a868d77ef82611f08497525400380f7d.png)
-
-
-
 ### Step 3: Implement Login Logic
 
 Call `LoginStore.shared.login` in the project to complete login. **This is the key premise for using **`AtomicXCore`** all functions**.
 
 > **Important:**
-> 
+>
 
 > We recommend calling LoginStore.shared.login after successful log-in to your App's user account to ensure clear and consistent login service logic.
-> 
+>
 
 ``` java
 import 'package:flutter/material.dart';
@@ -142,40 +96,11 @@ void main() async {
 ```
 
 **Login API 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" >`sdkAppID`</td>
-
-<td rowspan="1" colSpan="1" >`Int`</td>
-
-<td rowspan="1" colSpan="1" >Get this from [TRTC console > Application management](https://console.trtc.io/app).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`userID`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >The unique ID for the current user. Must contain only English letters, numbers, hyphens, and underscores.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`userSig`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >A ticket for Tencent Cloud authentication. Please note:<br>- **Development Environment**: You can use the local `GenerateTestUserSig.genTestSig` function to generate a UserSig or generate a temporary UserSig via the [UserSig Generation Tool](https://console.trtc.io/usersig).<br>- **Production Environment**: To prevent key leakage, you must use a server-side method to generate UserSig. For details, see [Generating UserSig on the Server](https://write.woa.com/document/176189003854483456).<br>- For more information, see [How to Calculate and Use UserSig](https://write.woa.com/document/89644530319802368).</td>
-</tr>
-</table>
-
+| **Parameter** | **Type** | **Description** |
+| --- | --- | --- |
+| `sdkAppID` | `Int` | Get this from [TRTC console > Application management](https://console.trtc.io/app). |
+| `userID` | `String` | The unique ID for the current user. Must contain only English letters, numbers, hyphens, and underscores. |
+| `userSig` | `String` | A ticket for Tencent Cloud authentication. Please note:<br>- **Development Environment**: You can use the local `GenerateTestUserSig.genTestSig` function to generate a UserSig or generate a temporary UserSig via the [UserSig Generation Tool](https://console.trtc.io/usersig).<br>- **Production Environment**: To prevent key leakage, you must use a server-side method to generate UserSig. For details, see Generating UserSig on the Server.<br>- For more information, see How to Calculate and Use UserSig. |
 
 ## Building a Basic Voice Chat Room
 
@@ -308,177 +233,31 @@ class _YourAnchorPageState extends State<YourAnchorPage> {
 ```
 
 **LiveInfo parameter description:**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Parameter Name**</td>
-
-<td rowspan="1" colSpan="1" >**Type**</td>
-
-<td rowspan="1" colSpan="1" >**Attribute**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`liveID`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Unique identifier of the live streaming room.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`liveName`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Title of the live streaming room.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`notice`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Announcement information of the live streaming room.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`isMessageDisable`</td>
-
-<td rowspan="1" colSpan="1" >`bool`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Whether to mute (`true`: yes, `false`: no).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`isPublicVisible`</td>
-
-<td rowspan="1" colSpan="1" >`bool`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Whether publicly visible (`true`: yes, `false`: no).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`isSeatEnabled`</td>
-
-<td rowspan="1" colSpan="1" >`bool`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Whether to enable the seat feature (`true`: yes, `false`: no).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`keepOwnerOnSeat`</td>
-
-<td rowspan="1" colSpan="1" >`bool`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Whether to keep the room owner on the seat.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`maxSeatCount`</td>
-
-<td rowspan="1" colSpan="1" >`int`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Maximum number of microphones.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatMode`</td>
-
-<td rowspan="1" colSpan="1" >`TakeSeatMode`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Microphone mode (`free`: Free to Join the Podium, `apply`: request to speak).</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`seatLayoutTemplateID`</td>
-
-<td rowspan="1" colSpan="1" >`int`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Mic position layout template `ID.`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`coverURL`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >thumbnail URL of the live streaming room.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`backgroundURL`</td>
-
-<td rowspan="1" colSpan="1" >`String`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >background image URL of the live streaming room.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`categoryList`</td>
-
-<td rowspan="1" colSpan="1" >`List<int>`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Category tag list of the live streaming room.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`activityStatus`</td>
-
-<td rowspan="1" colSpan="1" >`int`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Live stream status.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`isGiftEnabled`</td>
-
-<td rowspan="1" colSpan="1" >`bool`</td>
-
-<td rowspan="1" colSpan="1" >Optional.</td>
-
-<td rowspan="1" colSpan="1" >Whether to enable the gift function (`true`: yes, `false`: no).</td>
-</tr>
-</table>
-
+| **Parameter Name** | **Type** | **Attribute** | **Description** |
+| --- | --- | --- | --- |
+| `liveID` | `String` | Required | Unique identifier of the live streaming room. |
+| `liveName` | `String` | Optional. | Title of the live streaming room. |
+| `notice` | `String` | Optional. | Announcement information of the live streaming room. |
+| `isMessageDisable` | `bool` | Optional. | Whether to mute (`true`: yes, `false`: no). |
+| `isPublicVisible` | `bool` | Optional. | Whether publicly visible (`true`: yes, `false`: no). |
+| `isSeatEnabled` | `bool` | Optional. | Whether to enable the seat feature (`true`: yes, `false`: no). |
+| `keepOwnerOnSeat` | `bool` | Optional. | Whether to keep the room owner on the seat. |
+| `maxSeatCount` | `int` | Optional. | Maximum number of microphones. |
+| `seatMode` | `TakeSeatMode` | Optional. | Microphone mode (`free`: Free to Join the Podium, `apply`: request to speak). |
+| `seatLayoutTemplateID` | `int` | Required | Mic position layout template `ID.` |
+| `coverURL` | `String` | Optional. | thumbnail URL of the live streaming room. |
+| `backgroundURL` | `String` | Optional. | background image URL of the live streaming room. |
+| `categoryList` | `List<int>` | Optional. | Category tag list of the live streaming room. |
+| `activityStatus` | `int` | Optional. | Live stream status. |
+| `isGiftEnabled` | `bool` | Optional. | Whether to enable the gift function (`true`: yes, `false`: no). |
 
 #### 4. Build a Mic Seat UI
 
 > **Note:**
-> 
+>
 
 > For the business code of the Mic Seat `UI` effect, see the [seat_grid_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/seat_grid_widget/seat_grid_widget.dart) file in the `TUILiveKit` open-source project to learn about the complete implementation logic.
-> 
-
+>
 
 Through the `LiveSeatStore` instance, listen to changes in `liveSeatState.seatList` to get seat data in real time for rendering your UI. You can listen to the data on the page (such as `YourAnchorPage` or `YourAudiencePage`) in the following ways:
 ``` java
@@ -655,7 +434,7 @@ class _YourAudiencePageState extends State<YourAudiencePage> {
 
 #### 3. Build a Mic Seat UI
 
-The process for the audience to build a Mic Seat UI is the same as that for the Anchor. Refer to [Build a Mic Seat UI](https://write.woa.com/#4.-.E6.9E.84.E5.BB.BA.E9.BA.A6.E4.BD.8D-ui-.E7.95.8C.E9.9D.A2).
+The process for the audience to build a Mic Seat UI is the same as that for the Anchor. Refer to Build a Mic Seat UI.
 
 #### 4. **Leave the Voice Chat Room**
 
@@ -678,10 +457,7 @@ class _YourAudiencePageState extends State<YourAudiencePage> {
 
 ### Run and Test
 
-After completing the above steps, you can complete a most basic voice chat live streaming scenario. You can refer to [various voice chat room scenarios](https://write.woa.com/#.E4.B8.B0.E5.AF.8C.E8.AF.AD.E8.81.8A.E6.88.BF.E5.9C.BA.E6.99.AF) to refine the voice chat scenario.
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/78e1635ef77811f0975c525400a31896.png)
-
+After completing the above steps, you can complete a most basic voice chat live streaming scenario. You can refer to various voice chat room scenarios to refine the voice chat scenario.
 
 ## Advanced Features
 
@@ -689,17 +465,13 @@ After completing the above steps, you can complete a most basic voice chat live
 
 In a voice chat room scenario, a common need is to display a wave animation on the avatar of an on-mic user when they speak, notifying all room users "who is speaking". `LiveSeatStore` provides the `speakingUsers` data stream, specialized for implementing this feature.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/7a699339f82611f0b6b3525400ecee81.png)
-
-
 #### Implementation
 
 > **Note:**
-> 
+>
 
 > When an Anchor speaks, a wave animation effect is shown. See the [seat_grid_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/seat_grid_widget/seat_grid_widget.dart) file in the `TUILiveKit` open-source project to learn about the complete implementation logic.
-> 
-
+>
 
 On `YourAnchorPage` or `YourAudiencePage`, listen for `speakingUsers` transition and refresh the "speaking" status. Sample code:
 ``` java
@@ -765,156 +537,27 @@ class YourSpeakingIndicatorWidget extends StatelessWidget {
 ## Enriching Voice Chat Room Scenario
 
 After completing the basic voice chat room features, you can refer to the following feature guide to add various interactive gameplay features to the voice chat room.
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Feature**</td>
-
-<td rowspan="1" colSpan="1" >**Feature Description**</td>
-
-<td rowspan="1" colSpan="1" >**Feature Stores**</td>
-
-<td rowspan="1" colSpan="1" >**Implementation Guide**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Audience Take Seat**</td>
-
-<td rowspan="1" colSpan="1" >Audience members can apply to take a seat and interact with the host in real time.</td>
-
-<td rowspan="1" colSpan="1" >[CoGuestStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_guest_store/CoGuestStore-class.html)</td>
-
-<td rowspan="1" colSpan="1" >[Implementation](https://write.woa.com/document/200555772867563520)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Add Barrage Chat**</td>
-
-<td rowspan="1" colSpan="1" >Room members can send and receive real-time text messages.</td>
-
-<td rowspan="1" colSpan="1" >[BarrageStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_barrage_barrage_store/BarrageStore-class.html)</td>
-
-<td rowspan="1" colSpan="1" >[Implementation](https://write.woa.com/document/200455584809943040)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Gift System**</td>
-
-<td rowspan="1" colSpan="1" >Audience can send virtual gifts to hosts to increase interaction and engagement.</td>
-
-<td rowspan="1" colSpan="1" >[GiftStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_gift_gift_store/GiftStore-class.html)</td>
-
-<td rowspan="1" colSpan="1" >[Implementation](https://write.woa.com/document/200455585142341632)</td>
-</tr>
-</table>
-
+| **Feature** | **Feature Description** | **Feature Stores** | **Implementation Guide** |
+| --- | --- | --- | --- |
+| **Audience Take Seat** | Audience members can apply to take a seat and interact with the host in real time. | [CoGuestStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_guest_store/CoGuestStore-class.html) | Implementation |
+| **Add Barrage Chat** | Room members can send and receive real-time text messages. | [BarrageStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_barrage_barrage_store/BarrageStore-class.html) | Implementation |
+| **Gift System** | Audience can send virtual gifts to hosts to increase interaction and engagement. | [GiftStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_gift_gift_store/GiftStore-class.html) | Implementation |
 
 ## API documentation
-<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" >**LiveListStore**</td>
-
-<td rowspan="1" colSpan="1" >Full lifecycle management of live streaming room: create/join/leave/terminate room, query room list, modify live information (name, notice), listen to live streaming status (for example, being kicked out, ended).</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_list_store/LiveListStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**LiveSeatStore**</td>
-
-<td rowspan="1" colSpan="1" >Core of seat management: manage seat list, Anchor status, and related operations (taking a seat, leaving a seat, removing user, locking seat, switching microphone on or off/camera), listen to seat events.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/LiveSeatStore-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, monitor device status in real time.</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" >**CoGuestStore**</td>
-
-<td rowspan="1" colSpan="1" >Audience co-broadcasting management: join microphone application/invite/grant/deny, member permission control (microphone/camera), state synchronization.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_guest_store/CoGuestStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**CoHostStore**</td>
-
-<td rowspan="1" colSpan="1" >Anchor cross-room connection: support for multiple layout templates (dynamic grid, etc.), initiate/accept/reject connection, and interactive management of co-broadcasting Anchors.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_host_store/CoHostStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**BattleStore**</td>
-
-<td rowspan="1" colSpan="1" >Anchor PK battle: initiate PK (duration configuration/competitor), manage PK status (start/end), 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>
-
-<tr>
-<td rowspan="1" colSpan="1" >**GiftStore**</td>
-
-<td rowspan="1" colSpan="1" >Gift interaction: get gift list, send/receive gifts, listen to gift events (including sender, gift details).</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_gift_gift_store/GiftStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**BarrageStore**</td>
-
-<td rowspan="1" colSpan="1" >Danmaku function: send text/custom barrage item, maintain bullet screen list, monitor danmaku status in real time.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_barrage_barrage_store/BarrageStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**LikeStore**</td>
-
-<td rowspan="1" colSpan="1" >Like interaction: send likes, listen to like events, sync total likes.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_like_store/LikeStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**LiveAudienceStore**</td>
-
-<td rowspan="1" colSpan="1" >Audience management: get real-time audience list (ID/name/avatar), check audience size, listen to Enter/Exit Event.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_audience_store/LiveAudienceStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**AudioEffectStore**</td>
-
-<td rowspan="1" colSpan="1" >Audio effects: voice-changing (child voice/male voice), reverberation (KTV), ear monitoring adjustment, switch special effects in real time.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_audio_effect_store/AudioEffectStore-class.html)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**BaseBeautyStore**</td>
-
-<td rowspan="1" colSpan="1" >Basic beauty filter: adjust skin smoothing/whitening/rosy (0-100 levels), reset beauty status, sync effect parameters.</td>
-
-<td rowspan="1" colSpan="1" >[API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_base_beauty_store/BaseBeautyStore-class.html)</td>
-</tr>
-</table>
-
+| **Store/Component** | **Feature Description** | **API Reference** |
+| --- | --- | --- |
+| **LiveListStore** | Full lifecycle management of live streaming room: create/join/leave/terminate room, query room list, modify live information (name, notice), listen to live streaming status (for example, being kicked out, ended). | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_list_store/LiveListStore-class.html) |
+| **LiveSeatStore** | Core of seat management: manage seat list, Anchor status, and related operations (taking a seat, leaving a seat, removing user, locking seat, switching microphone on or off/camera), listen to seat events. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_seat_store/LiveSeatStore-class.html) |
+| **DeviceStore** | Audio/Video device control: microphone (on/off, volume), camera (on/off, switchover, video quality), screen sharing, monitor device status in real time. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_device_store/DeviceStore-class.html) |
+| **CoGuestStore** | Audience co-broadcasting management: join microphone application/invite/grant/deny, member permission control (microphone/camera), state synchronization. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_guest_store/CoGuestStore-class.html) |
+| **CoHostStore** | Anchor cross-room connection: support for multiple layout templates (dynamic grid, etc.), initiate/accept/reject connection, and interactive management of co-broadcasting Anchors. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_host_store/CoHostStore-class.html) |
+| **BattleStore** | Anchor PK battle: initiate PK (duration configuration/competitor), manage PK status (start/end), synchronize score, listen to battle results. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_battle_store/BattleStore-class.html) |
+| **GiftStore** | Gift interaction: get gift list, send/receive gifts, listen to gift events (including sender, gift details). | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_gift_gift_store/GiftStore-class.html) |
+| **BarrageStore** | Danmaku function: send text/custom barrage item, maintain bullet screen list, monitor danmaku status in real time. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_barrage_barrage_store/BarrageStore-class.html) |
+| **LikeStore** | Like interaction: send likes, listen to like events, sync total likes. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_like_store/LikeStore-class.html) |
+| **LiveAudienceStore** | Audience management: get real-time audience list (ID/name/avatar), check audience size, listen to Enter/Exit Event. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_audience_store/LiveAudienceStore-class.html) |
+| **AudioEffectStore** | Audio effects: voice-changing (child voice/male voice), reverberation (KTV), ear monitoring adjustment, switch special effects in real time. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_audio_effect_store/AudioEffectStore-class.html) |
+| **BaseBeautyStore** | Basic beauty filter: adjust skin smoothing/whitening/rosy (0-100 levels), reset beauty status, sync effect parameters. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_base_beauty_store/BaseBeautyStore-class.html) |
 
 ## FAQs
 
@@ -925,12 +568,9 @@ After completing the basic voice chat room features, you can refer to the follow
 
 - **Check the network**: Please check whether the device network connection is normal.
 
-
 ### Microphone Position List Not Displayed or Refreshed
 - **Check Store initialization**: Please ensure you have already used the same `liveID` to correctly create the `LiveSeatStore` instance (`LiveSeatStore.create(liveID)`) before `createLive` or `joinLive`.
 
 - **Check data listening**: Please check whether you have used `addListener` correctly to listen to `liveSeatStore.liveSeatState.seatList`, and ensure to call `removeListener` in `dispose` to remove listener.
 
 - **Check API call**: Please ensure the `createLive` (room owner) or `joinLive` (listener) API has been successfully called (confirm when `isSuccess` in the callback result is `true`).
-
-