@tencent-rtc/mcp 1.3.9 → 1.4.1

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

@@ -6,21 +6,15 @@ This documentation guides you through using the core component of the AtomicXCor
 
 The following diagram illustrates where **LiveCoreWidget** fits within your live streaming interface and its role in the view hierarchy:
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/989ce871f6d411f09fbf525400370dda.png)
-
-
 ## Preparations
 
 ### Step 1: Activate the Service
 
-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/bb11696df6d411f09d0352540097cba1.png)
-
-
 ### Step 2: Import AtomicXCore into Your Project
 1. **Component installation**: Please add the `atomic_x_core` dependency in your `pubspec.yaml` file and execute `flutter pub get`.
 
@@ -30,9 +24,6 @@ See [Activate Service](https://write.woa.com/document/141936672617742336) to obt
    ```
 2. **Configure project permissions:** Both Android and iOS projects require configuration.
 
-
-   
-
 【Android】
 
 Please add permission to use camera and microphone in the `android/app/src/main/AndroidManifest.xml` file.
@@ -69,19 +60,15 @@ end
 <string>TUILiveKit needs to access your mic permission. Recorded video will have sound when enabled.</string>
 ```
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/548e6c77f82711f093ec525400074c32.png)
-
-
-
 ### Step 3: Implement Login Logic
 
 Call `LoginStore.shared.login` in your project to complete login. **This is the key premise for using all functions of AtomicXCore.**
 
 > **Important:**
-> 
+>
 
 > It is recommended to call LoginStore.shared.login after successful log-in to your App's user account to ensure clear and consistent business logic.
-> 
+>
 
 ``` java
 import 'package:flutter/material.dart';
@@ -107,40 +94,11 @@ void main() async {
 ```
 
 **Logon API 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" >`sdkAppID`</td>
-
-<td rowspan="1" colSpan="1" >`int`</td>
-
-<td rowspan="1" colSpan="1" >Get this from [TRTC console](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.. To avoid multi-end login conflict, **do not use**`1`, `123`**or other simple IDs**.</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/89644530319802368).</td>
-</tr>
-</table>
-
+| **Parameter** | **Type** | **Note** |
+| --- | --- | --- |
+| `sdkAppID` | `int` | Get this from [TRTC console](https://console.trtc.io/app). |
+| `userID` | `String` | The unique ID for the current user. Must contain only English letters, numbers, hyphens, and underscores.. To avoid multi-end login conflict, **do not use**`1`, `123`**or other simple IDs**. |
+| `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. |
 
 ## Building a Basic Live Room
 
@@ -148,38 +106,34 @@ void main() async {
 
 The anchor starts live streaming process is as follows. You just need to perform the following steps to quickly build a live stream.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/332cea8bf6d711f09fbf525400370dda.png)
-
-
 > **Note:**
-> 
+>
 
 > For the business code of live stream publishing, you can also refer to the [live_room_anchor_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/live_stream/features/live_room_anchor_widget.dart) file in the TUILiveKit open-source project to understand the complete implementation logic.
-> 
+>
 
 1. **Initialize the Anchor live streaming view**
 
-
    On your Anchor page, create a `LiveCoreWidget` instance and control the live stream behavior through `LiveCoreController`.
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    /// YourAnchorPage represents your anchor starts live streaming page
    class YourAnchorPage extends StatefulWidget {
      final String liveId;
-   
+
      const YourAnchorPage({super.key, required this.liveId});
-   
+
      @override
      State<YourAnchorPage> createState() => _YourAnchorPageState();
    }
-   
+
    class _YourAnchorPageState extends State<YourAnchorPage> {
      // 1. Create a LiveCoreController instance
      late final LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
@@ -188,7 +142,7 @@ The anchor starts live streaming process is as follows. You just need to perform
        // 3. Set up live streaming ID
        _controller.setLiveID(widget.liveId);
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -205,26 +159,25 @@ The anchor starts live streaming process is as follows. You just need to perform
    ```
 2. **Turn on the camera and microphone**
 
-
    By calling the **DeviceStore**`openLocalCamera` and `openLocalMicrophone` APIs to turn on the camera and microphone, **no need to do additional configuration as LiveCoreWidget will auto preview the current camera's video stream**. Sample code:
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    /// YourAnchorPage represents your anchor starts live streaming page
    class YourAnchorPage extends StatefulWidget {
      final String liveId;
-   
+
      const YourAnchorPage({super.key, required this.liveId});
-   
+
      @override
      State<YourAnchorPage> createState() => _YourAnchorPageState();
    }
-   
+
    class _YourAnchorPageState extends State<YourAnchorPage> {
      late final LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
@@ -233,14 +186,14 @@ The anchor starts live streaming process is as follows. You just need to perform
        // Turn on the device
        _openDevices();
      }
-   
+
      void _openDevices() {
        // 1. Open front camera
        DeviceStore.shared.openLocalCamera(true);
        // 2. Turn on the microphone
        DeviceStore.shared.openLocalMicrophone();
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -255,26 +208,25 @@ The anchor starts live streaming process is as follows. You just need to perform
    ```
 3. **Start live streaming**
 
-
    By calling the **LiveListStore**`createLive` API to start video live streaming, sample code:
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    /// YourAnchorPage represents your anchor starts live streaming page
    class YourAnchorPage extends StatefulWidget {
      final String liveId;
-   
+
      const YourAnchorPage({super.key, required this.liveId});
-   
+
      @override
      State<YourAnchorPage> createState() => _YourAnchorPageState();
    }
-   
+
    class _YourAnchorPageState extends State<YourAnchorPage> {
      late final LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
@@ -282,12 +234,12 @@ The anchor starts live streaming process is as follows. You just need to perform
        _controller.setLiveID(widget.liveId);
        _openDevices();
      }
-   
+
      void _openDevices() {
        DeviceStore.shared.openLocalCamera(true);
        DeviceStore.shared.openLocalMicrophone();
      }
-   
+
      // Call the go live API to start live streaming
      Future<void> _startLive() async {
        // 1. Prepare the LiveInfo object
@@ -301,17 +253,17 @@ The anchor starts live streaming process is as follows. You just need to perform
          // Configure the anchor to always stay on the seat
          keepOwnerOnSeat: true,
        );
-   
+
        // 2. Call LiveListStore.shared.createLive to start live streaming
        final result = await LiveListStore.shared.createLive(liveInfo);
-   
+
        if (result.isSuccess) {
          debugPrint("startLive success");
        } else {
          debugPrint("startLive error: ${result.errorMessage}");
        }
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -339,201 +291,56 @@ The anchor starts live streaming process is as follows. You just need to perform
 
    **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 for 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 (`TakeSeatMode.free`: Free to Join the Podium, `TakeSeatMode.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" >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" >Tag list of categories in 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 for 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 (`TakeSeatMode.free`: Free to Join the Podium, `TakeSeatMode.apply`: Request to speak). |
+| `seatLayoutTemplateID` | `int` | Required | 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. | Tag list of categories in the live streaming room. |
+| `activityStatus` | `int` | Optional. | Live stream status. |
+| `isGiftEnabled` | `bool` | Optional. | Whether to enable the gift function (`true`: yes, `false`: no). |
 
 4. **End live streaming**
 
-
    After the live streaming ends, the Anchor can call the **LiveListStore**'s `endLive` API to end the live stream. The SDK will handle the logic of stopping streaming and room termination.
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    /// YourAnchorPage represents your anchor starts live streaming page
    class YourAnchorPage extends StatefulWidget {
      final String liveId;
-   
+
      const YourAnchorPage({super.key, required this.liveId});
-   
+
      @override
      State<YourAnchorPage> createState() => _YourAnchorPageState();
    }
-   
+
    class _YourAnchorPageState extends State<YourAnchorPage> {
      // ... Other code ...
-   
+
      End live streaming
      Future<void> _stopLive() async {
        final result = await LiveListStore.shared.endLive();
-   
+
        if (result.isSuccess) {
          debugPrint("endLive success");
        } else {
          debugPrint("endLive error: ${result.errorMessage}");
        }
      }
-   
+
      // ... Other code ...
    }
    ```
@@ -542,38 +349,34 @@ The anchor starts live streaming process is as follows. You just need to perform
 
 The audience viewing process is as follows. In just a few simple steps, you can achieve audience watching live.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100032457995/92e9b016f6d711f0b34b525400ecee81.png)
-
-
 > **Note:**
-> 
+>
 
 > For the business code of audience enter room to pull stream, you can also refer to the [audience_widget.dart](https://github.com/Tencent-RTC/TUIKit_Flutter/blob/main/live/livekit/lib/live_stream/features/audience/audience_widget.dart) file in the TUILiveKit open-source project to understand the complete implementation logic.
-> 
+>
 
 1. **Implement the audience pull stream page**
 
-
    On your audience page, create a `LiveCoreWidget` instance and control the live stream behavior through `LiveCoreController`.
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    /// YourAudiencePage represents your audience viewing webpage
    class YourAudiencePage extends StatefulWidget {
      final String liveId;
-   
+
      const YourAudiencePage({super.key, required this.liveId});
-   
+
      @override
      State<YourAudiencePage> createState() => _YourAudiencePageState();
    }
-   
+
    class _YourAudiencePageState extends State<YourAudiencePage> {
      // 1. Create a LiveCoreController instance
      late final LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
@@ -582,7 +385,7 @@ The audience viewing process is as follows. In just a few simple steps, you can
        // 3. Bind live streaming id
        _controller.setLiveID(widget.liveId);
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -598,26 +401,25 @@ The audience viewing process is as follows. In just a few simple steps, you can
    ```
 2. **Enter live room to watch**
 
-
    By calling the **LiveListStore**`joinLive` API to join the live stream, **no need to do additional configuration, LiveCoreWidget will autoplay the current room video stream**, sample code:
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    /// YourAudiencePage represents your audience viewing webpage
    class YourAudiencePage extends StatefulWidget {
      final String liveId;
-   
+
      const YourAudiencePage({super.key, required this.liveId});
-   
+
      @override
      State<YourAudiencePage> createState() => _YourAudiencePageState();
    }
-   
+
    class _YourAudiencePageState extends State<YourAudiencePage> {
      late final LiveCoreController _controller;
-   
+
      @override
      void initState() {
        super.initState();
@@ -626,12 +428,12 @@ The audience viewing process is as follows. In just a few simple steps, you can
        // Enter live room
        _joinLive();
      }
-   
+
      Future<void> _joinLive() async {
        // Call LiveListStore.shared.joinLive to enter live room
        // - liveId: same liveId as anchor starts live streaming
        final result = await LiveListStore.shared.joinLive(widget.liveId);
-   
+
        if (result.isSuccess) {
          debugPrint("joinLive success");
        } else {
@@ -640,7 +442,7 @@ The audience viewing process is as follows. In just a few simple steps, you can
          // if (mounted) Navigator.of(context).pop();
        }
      }
-   
+
      @override
      Widget build(BuildContext context) {
        return Scaffold(
@@ -655,37 +457,36 @@ The audience viewing process is as follows. In just a few simple steps, you can
    ```
 3. **Log out of live stream**
 
-
    When the audience exits the live streaming room, they need to call the **LiveListStore**'s `leaveLive` API to exit the live stream. The SDK will automatically stop pulling streams and leave the room.
 
    ``` java
    import 'package:flutter/material.dart';
    import 'package:atomic_x_core/atomicxcore.dart';
-   
+
    /// YourAudiencePage represents your audience viewing webpage
    class YourAudiencePage extends StatefulWidget {
      final String liveId;
-   
+
      const YourAudiencePage({super.key, required this.liveId});
-   
+
      @override
      State<YourAudiencePage> createState() => _YourAudiencePageState();
    }
-   
+
    class _YourAudiencePageState extends State<YourAudiencePage> {
      // ... Other code ...
-   
+
      End live stream
      Future<void> _leaveLive() async {
        final result = await LiveListStore.shared.leaveLive();
-   
+
        if (result.isSuccess) {
          debugPrint("leaveLive success");
        } else {
          debugPrint("leaveLive error: ${result.errorMessage}");
        }
      }
-   
+
      // ... Other code ...
    }
    ```
@@ -784,221 +585,39 @@ class _YourAudiencePageState extends State<YourAudiencePage> {
 
 ### Run and Test
 
-After integrating `LiveCoreWidget`, you will obtain a pure video rendering view with complete live streaming business capability but no interactive UI. You can refer to the next chapter [Enrich Live-Streaming Scenarios](https://write.woa.com/#.E4.B8.B0.E5.AF.8C.E7.9B.B4.E6.92.AD.E5.9C.BA.E6.99.AF) to refine live broadcasting scenarios.
-<table>
-<tr>
-<td rowspan="1" colSpan="1" ></td>
-
-<td rowspan="1" colSpan="1" >**Dynamic Grid Layout**</td>
-
-<td rowspan="1" colSpan="1" >**Floating Window Layout**</td>
-
-<td rowspan="1" colSpan="1" >**Fixed Grid Layout**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Template ID</td>
-
-<td rowspan="1" colSpan="1" >600</td>
-
-<td rowspan="1" colSpan="1" >601</td>
-
-<td rowspan="1" colSpan="1" >800</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Description</td>
-
-<td rowspan="1" colSpan="1" >Default layout; grid size adjusts dynamically based on number of co-hosts.</td>
-
-<td rowspan="1" colSpan="1" >Co-hosts are displayed as floating windows.</td>
-
-<td rowspan="1" colSpan="1" >Fixed number of co-hosts; each occupies a fixed grid.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Example</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100043650599/6a730a2ecc0d11f084a45254005ef0f7.png)</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100043650599/71c322e9cc0d11f084a45254005ef0f7.png)</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100043650599/a1855792cc0d11f0ae4f52540099c741.png)</td>
-</tr>
-</table>
-
+After integrating `LiveCoreWidget`, you will obtain a pure video rendering view with complete live streaming business capability but no interactive UI. You can refer to the next chapter Enrich Live-Streaming Scenarios to refine live broadcasting scenarios.
+|  | **Dynamic Grid Layout** | **Floating Window Layout** | **Fixed Grid Layout** |
+| --- | --- | --- | --- |
+| Template ID | 600 | 601 | 800 |
+| Description | Default layout; grid size adjusts dynamically based on number of co-hosts. | Co-hosts are displayed as floating windows. | Fixed number of co-hosts; each occupies a fixed grid. |
+| Example |  |  |  |
 
 ## Enrich Live Streaming Scenarios
 
 Once the basic live streaming functionality is in place, refer to the following guides to add interactive features to your live stream:
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Feature**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-
-<td rowspan="1" colSpan="1" >**Store**</td>
-
-<td rowspan="1" colSpan="1" >**Implementation Guide**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Enable Audience Audio/Video Co-hosting**</td>
-
-<td rowspan="1" colSpan="1" >Audience can apply to join the host and interact via real-time video.</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 Guide](https://write.woa.com/document/200455653984186368)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Enable Host Cross-room PK**</td>
-
-<td rowspan="1" colSpan="1" >Hosts from different rooms can connect for interaction or PK.</td>
-
-<td rowspan="1" colSpan="1" >[CoHostStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_host_store/CoHostStore-class.html) / [BattleStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_battle_store/BattleStore-class.html)</td>
-
-<td rowspan="1" colSpan="1" >[Implementation Guide](https://write.woa.com/document/200455659512819712)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Add Bullet Chat Feature**</td>
-
-<td rowspan="1" colSpan="1" >Audience can send and receive real-time text messages in the live room.</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 Guide](https://write.woa.com/document/200455665056206848)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Build a Gift Giving System**</td>
-
-<td rowspan="1" colSpan="1" >Audience can send virtual gifts to the host, increasing engagement and fun.</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 Guide](https://write.woa.com/document/195925512239050752)</td>
-</tr>
-</table>
-
+| **Feature** | **Description** | **Store** | **Implementation Guide** |
+| --- | --- | --- | --- |
+| **Enable Audience Audio/Video Co-hosting** | Audience can apply to join the host and interact via real-time video. | [CoGuestStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_guest_store/CoGuestStore-class.html) | Implementation Guide |
+| **Enable Host Cross-room PK** | Hosts from different rooms can connect for interaction or PK. | [CoHostStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_host_store/CoHostStore-class.html) / [BattleStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_battle_store/BattleStore-class.html) | Implementation Guide |
+| **Add Bullet Chat Feature** | Audience can send and receive real-time text messages in the live room. | [BarrageStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_barrage_barrage_store/BarrageStore-class.html) | Implementation Guide |
+| **Build a Gift Giving System** | Audience can send virtual gifts to the host, increasing engagement and fun. | [GiftStore](https://tencent-rtc.github.io/TUIKit_Flutter/api_gift_gift_store/GiftStore-class.html) | Implementation Guide |
 
 ## 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" >**LiveCoreWidget**</td>
-
-<td rowspan="1" colSpan="1" >The core view component for live video stream display and interaction: responsible for video stream rendering and view widget processing, supporting scenarios like live streaming, audience co-broadcasting, and anchor connection.</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: used to set up the live streaming 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" >**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 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" >**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, attendee 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: supports multiple layout templates (dynamic grid, etc.), initiate/accept/reject connection, and manage interactive co-broadcasting with 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: trigger 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 bullet screen 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 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 effect status, synchronize 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** |
+| --- | --- | --- |
+| **LiveCoreWidget** | The core view component for live video stream display and interaction: responsible for video stream rendering and view widget processing, supporting scenarios like live streaming, audience co-broadcasting, and anchor connection. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_view_live_live_core_widget/LiveCoreWidget-class.html) |
+| **LiveCoreController** | The controller of LiveCoreWidget: used to set up the live streaming 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) |
+| **LiveListStore** | Full lifecycle management of live streaming room: create/join/leave/terminate room, query room list, modify live information (name, notice), listen to live status (for example, being kicked out, ended). | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_live_list_store/LiveListStore-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, attendee 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: supports multiple layout templates (dynamic grid, etc.), initiate/accept/reject connection, and manage interactive co-broadcasting with Anchors. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_live_co_host_store/CoHostStore-class.html) |
+| **BattleStore** | Anchor PK battle: trigger 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 bullet screen 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 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 effect status, synchronize effect parameters. | [API documentation](https://tencent-rtc.github.io/TUIKit_Flutter/api_device_base_beauty_store/BaseBeautyStore-class.html) |
 
 ## FAQs
 
@@ -1011,7 +630,6 @@ Once the basic live streaming functionality is in place, refer to the following
 
 - **Check the network**: Please check whether the device network connection is normal.
 
-
 ### How to Request Permission in a Flutter Project?
 
 You can use the `permission_handler` plug-in to request camera and mic permission:
@@ -1036,6 +654,3 @@ void dispose() {
   super.dispose();
 }
 ```
-
-
-