@tencent-rtc/mcp 1.6.4 → 1.6.6

package/resource/integration/livekit/preset/live/android/live-audience-integration.md

@@ -0,0 +1,129 @@
+**TUILiveKit**'s audience viewing page provides users with various and convenient live streaming and interaction features, enabling quick integration into your application to meet diverse audience needs.
+
+## Feature Overview
+- **Live streaming:** Clear and smooth viewing of the host's real-time live stream.
+
+- **Interactive co-guest:** Apply for mic connection to interact with the host via audio and video.
+
+- **Live information:** View the live streaming room title, description, and audience list, etc.
+
+- **Live interactive:** Send a gift (with animation effects and host notification), like (with animation and real-time statistics), and interact via bullet screen.
+
+| <strong>Live Streaming</strong> | <strong>Interactive co-guest</strong> | <strong>Live Information</strong> | <strong>Live Interactive</strong> |
+| --- | --- | --- | --- |
+|  | ### |  |  |
+
+## Quick Start
+
+### Step 1. Activate the Service
+
+Refer to the Activate Service document to get the `TUILiveKit` trial version or activate the paid version.
+
+### Step 2. Code Integration
+
+Refer to Preparations guide to integrate the TUILiveKit SDK.
+
+### Step 3. Add an Audience Viewing view
+
+In your viewer watching **Activity**, initialize and add the `AudienceView` viewer watching view.
+
+【Kotlin】
+``` java
+
+import android.os.Bundle
+import android.util.Log
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.audienceview.AudienceView
+import com.trtc.uikit.livekit.features.audienceview.AudienceViewDefine.AudienceViewListener
+import io.trtc.tuikit.atomicxcore.api.live.LiveInfo
+
+class AudienceActivity : AppCompatActivity() {
+    lateinit var audienceView: AudienceView
+    lateinit var listener: AudienceViewListener
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1. Create AudienceView
+        audienceView = AudienceView(this)
+        val roomId = "live_1236666"
+        // 2. Initialize AudienceView
+        audienceView.init(this, roomId)
+
+        // 3. (Optional) Add AudienceContainerView event listeners
+        listener = object : AudienceViewListener {
+
+            override fun onLiveEnded(roomId: String, ownerName: String, ownerAvatarUrl: String) {
+                finishAndRemoveTask()
+            }
+
+            override fun onClickFloatWindow() {
+                // Picture-in-picture button click event. You can handle this event according to your business needs. Here's a code example: Clicking the picture-in-picture button will switch the current page to picture-in-picture mode.
+                enterPictureInPictureMode()
+            }
+
+            override fun onClickCloseButton(liveInfo: LiveInfo) {
+                Log.i("TAG", "onClickCloseButton liveInfo: $liveInfo")
+                finishAndRemoveTask()
+            }
+        }
+        audienceView.addListener(listener)
+        // 4. Add AudienceContainerView to the interface
+        setContentView(audienceView)
+    }
+
+    override fun onDestroy() {
+        // 5. (Optional) If you added event listeners, you need to remove the listeners when the page is destroyed.
+        audienceView.removeListener(listener)
+        super.onDestroy()
+    }
+}
+```
+
+### Step 4. Navigate to the **Audience Viewing** view
+
+Usually in the live stream list, use the following code example when you need to jump to the viewer watching page:
+
+【Kotlin】
+``` java
+fun startActivity(context: Context) {
+    val intent = Intent(context, YourAudienceActivity::class.java)
+    context.startActivity(intent)
+}
+```
+
+## Customize Your UI Layout
+
+### Customize the `AudienceView` Feature Area
+- Customize the audience interface by referring to the Core Audience Page Modify the UI styles and add your business components in AudienceView.
+
+- Customize video-slot widgets by referring to Adjust Live Streaming Widgets. Modify the UI of nameplates, avatar decorations, and other elements on the video slot in AudienceView.
+
+### Text Customization (String Resources)
+
+TUILiveKit uses standard **Android XML resource files** to manage the text displayed in the UI. You can directly modify the strings that need adjustment via the XML file:
+
+### Icon Customization (Drawable Resources)
+
+TUILiveKit uses the standard **Android drawable resource** folder to manage the image resources for the UI. You can quickly change the custom icons by replacing the resource files. When replacing, ensure that the new file names are consistent with the original file names.
+
+## Next Steps
+
+Congratulations! You have successfully integrated **Audience Viewing**. Next, you can implement features such as **host streaming**, **live stream list** and **gift system**. Please refer to the table below:
+| <strong>Feature</strong> | <strong>Description</strong> | <strong>Integration Guide</strong> |
+| --- | --- | --- |
+| <strong>Host Streaming</strong> | The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions. | Host Streaming |
+| <strong>Live Stream List</strong> | Display the live stream list interface and features, including the live stream list and room information display. | Live Stream List |
+| <strong>Gift System</strong> | Support custom gift asset configuration, billing system integration, and gift-sending in PK scenarios. | Gift System |
+
+## FAQs
+
+### Why is the video screen black when a viewer selects video co-hosting?
+
+Please go to **App Info > Permissions > Camera** and check if the **camera permission** is enabled. Refer to the image below:
+
+### Why can't other viewers in the live room see the barrage content sent by a viewer?
+- **Reason 1**: First check the network connection to ensure the viewer's device network is normal.
+
+- **Reason 2**: The viewer has been **muted (banned)** by the host and cannot send barrage.
+
+- **Reason 3**: The viewer's barrage content involves **keyword blocking**. Please confirm whether the content sent by the viewer complies with the live room rules.

package/resource/integration/livekit/preset/live/android/live-host-integration.md

@@ -0,0 +1,219 @@
+TUILiveKit’s host go-live page delivers a **fully featured, ready-to-use interface** for live streaming scenarios. It streamlines the process of building essential host live streaming functionality, allowing you to integrate the go-live workflow efficiently without the complexity of custom UI or logic development.
+
+## Feature Overview
+- **Pre-Live Preview:** Enables hosts to personalize settings before going live, including room name, cover image, video preview, beauty filter adjustment, audio effects, and layout templates.
+
+- **Co-hosting Interaction:** Facilitates real-time collaboration between the host and audience, as well as with other hosts in separate live rooms during the stream.
+
+- **Audience Engagement:** Provides interactive features such as live comments and virtual gifts to enhance audience participation.
+
+- **Live Room Management:** Displays the list of online users and offers tools for managing the live room, including muting and removing users.
+
+   |**Pre-stream Setup**|**Co-Host Interaction**|**Audience Interaction**|**Live Room Management**|
+   |---------|---------|---------|---------|
+   |||||
+
+## Quick Integration
+
+### Step 1. Activate the Service
+
+Refer to the Activate Service document to get the `TUILiveKit` trial version or activate the paid version.
+
+### Step 2. Integrate the SDK
+
+Refer to Preparations guide to integrate the `TUILiveKit` SDK.
+
+### Step 3. Add the Pre-Live Preparation Page
+
+The `AnchorPrepareView` component provides built-in camera preview, audio and layout settings, and other configuration options. Instantiate and display `AnchorPrepareView` as shown below:
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener
+
+class AnchorActivity : AppCompatActivity() {
+    private val TAG = "AnchorActivity"
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    private val anchorPrepareViewListener = object : AnchorPrepareViewListener {
+        override fun onClickStartButton() {
+            // Click the "Start Live Stream" button on the preview screen to trigger
+        }
+
+        override fun onClickBackButton() {
+            // Triggered by clicking the back button in the preview interface
+            finishAndRemoveTask()
+        }
+    }
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1. Create and initialize AnchorPrepareView
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1236666", null)
+        anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener)
+
+        // 2. Add AnchorPrepareView to the UI
+        setContentView(anchorPrepareView)
+    }
+}
+```
+
+### Step 4. Add the Host Streaming Page
+
+The `AnchorView` component includes audio/video streaming, audience co-hosting, live interaction, and live room management. Instantiate and display `AnchorView` as shown below:
+
+【Kotlin】
+``` java
+
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener
+import com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatus
+import com.trtc.uikit.livekit.features.anchorview.AnchorState
+import com.trtc.uikit.livekit.features.anchorview.AnchorView
+import com.trtc.uikit.livekit.features.anchorview.AnchorViewListener
+import com.trtc.uikit.livekit.features.anchorview.RoomBehavior
+import io.trtc.tuikit.atomicxcore.api.live.LiveInfo
+import io.trtc.tuikit.atomicxcore.api.live.SeatLayoutTemplate
+
+class AnchorActivity : AppCompatActivity() {
+    private val TAG = "AnchorActivity"
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    private val anchorPrepareViewListener = object : AnchorPrepareViewListener {
+        override fun onClickStartButton() {
+            // Complete the switch from the preparation page to the streamer's live broadcast page.
+            initAnchorView()
+        }
+
+        override fun onClickBackButton() {
+            finishAndRemoveTask()
+        }
+    }
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1. Create and initialize AnchorPrepareView
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1236666", null)
+        anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener)
+
+        // 2. Add AnchorPrepareView to the UI
+        setContentView(anchorPrepareView)
+    }
+
+    val anchorViewListener = object : AnchorViewListener {
+        override fun onEndLiving(state: AnchorState) {
+            finishAndRemoveTask()
+        }
+
+        override fun onClickFloatWindow() {
+        }
+    }
+
+    fun initAnchorView() {
+        // 1. Create AnchorView
+        val anchorView = AnchorView(this)
+
+        // 2. Initialize AnchorView, where liveInfo is the live stream information and anchorPrepareView is your preparation page before starting your broadcast.
+        val liveInfo = LiveInfo()
+        liveInfo.liveID = "live_1236666"
+        liveInfo.liveName = anchorPrepareView.getState()?.roomName?.value ?: ""
+        liveInfo.isPublicVisible = anchorPrepareView.getState()?.liveMode?.value == LiveStreamPrivacyStatus.PUBLIC
+        liveInfo.coverURL = anchorPrepareView.getState()?.coverURL?.value ?: ""
+        liveInfo.seatTemplate = SeatLayoutTemplate.VideoDynamicGrid9Seats
+
+        // Entering a room:
+        //     RoomBehavior.CREATE_ROOM: The streamer creates a room
+        //     RoomBehavior.ENTER_ROOM: The streamer enters a live stream room created by the server-side REST API
+        anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null)
+        anchorView.addAnchorViewListener(anchorViewListener)
+
+        // 3. Add AnchorView to the page
+        setContentView(anchorView)
+    }
+}
+```
+
+## Customize Your UI Layout
+
+TUILiveKit offers flexible customization for go-live and streaming pages. Adjust layouts and feature visibility to match your business requirements.
+
+### Select a Live Streaming Layout Template
+
+TUILiveKit provides **four live streaming layout templates**. Use the **"Layout"** option on the host go-live page to choose your preferred style.
+
+#### Layout Template Overview
+
+|Layout Type|**Dynamic Grid Layout**|**Floating Window Layout**|**Fixed Grid Layout**|**Fixed Floating Window Layout**|
+|---------|---------|---------|---------|---------|
+|Template ID|`VideoDynamicGrid9Seats`|`VideoDynamicFloat7Seats`|`VideoFixedGrid9Seats`|`VideoFixedFloat7Seats`|
+|Description|Default layout. Grid size adjusts dynamically based on the number of co-hosts.|Co-hosts are displayed as floating windows.|Fixed number of co-hosts, each guest occupies a dedicated grid slot.|Fixed number of co-hosts, guests shown in fixed floating windows.|
+|Preview|||||
+
+### Customize the Preparation Page
+
+Use the API from the `prepareView` instance created in Step 3 to control the visibility of the operation area or individual features on the preparation page.
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+
+class AnchorActivity : AppCompatActivity() {
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1235858", null)
+
+        // 1. Customize the feature area - for example: hide the entire feature menu
+        anchorPrepareView.disableFeatureMenu(true)
+
+        setContentView(anchorPrepareView)
+    }
+}
+```
+
+|**API**|**Description**|
+|---------|---------|
+|`disableFeatureMenu(true)`|Hide the entire feature menu|
+|`disableMenuBeautyButton(true)`|Hide the beauty filter button|
+|`disableMenuAudioEffectButton(true)`|Hide the audio effect button|
+|`disableMenuSwitchCameraButton(true)`|Hide the camera switch button|
+
+### Customize the Host Streaming Page UI
+- See the Host Core Page documentation to customize the host UI in `AnchorView` and add custom business modules.
+
+- See Adjust Video Live Widgets to modify video slot widgets (such as updating name or avatar) in `AnchorView`.
+
+### Customize Texts
+
+TUILiveKit uses Android-standard `XML` resource files to manage UI text. Modify any required text directly in the XML files.
+
+### Customize Icons
+
+TUILiveKit manages UI image assets in the Android `drawable` resource folder. To update interface icons, replace the resource files with your custom icons—ensure file names remain unchanged.
+
+## Next Steps
+
+Once you’ve integrated the **host go-live** feature, you can add additional capabilities such as **audience viewing**, **live stream list**, and **gift system**. See below for integration guides:
+
+|**Feature**|**Description**|**Integration Guide**|
+|---------|---------|---------|
+|**Audience Viewing**|Allows audience members to join the host’s live room to watch the stream. Supports audience co-hosting, live room info, online audience list, live comments, and more.|Audience Viewing|
+|**Live Stream List**|Displays the live stream list page and features, including the stream list and room details.|Live Stream List|
+|**Gift System**|Supports custom gift asset configuration, billing integration, PK mode interaction, and more.|Gift System|
+
+## FAQs
+
+### No video after going live?
+
+Navigate to **App Info > Permissions > Camera** and ensure camera access is enabled. See the screenshot below:
+
+### Unable to go live after clicking the go-live button and seeing a "Not Logged In" prompt?
+
+See the Login Guide and confirm your login functionality is integrated.

package/resource/integration/livekit/preset/live/android/live-list-integration.md

@@ -0,0 +1,261 @@
+## Feature Preview
+
+This document provides a detailed introduction to the **Live Stream List Page** in TUILiveKit. You can directly integrate our pre-built live stream list page into your existing project, or deeply customize the page style, layout, and features according to your specific needs.
+- **Double-Column Waterfall Flow**: Default view, simultaneously displaying previews for 2 live rooms.
+
+- **Single-Column Waterfall Flow**: Default view, simultaneously displaying a preview for 1 live room.
+
+| <strong>Double-Column Waterfall Flow</strong> | <strong>Single-Column Waterfall Flow</strong> |
+| --- | --- |
+|  | ### |
+
+   > **Note:**
+   >
+   > When previewing live room screens, the preview duration is counted into the viewer's audio/video duration. For detailed billing information, please refer to [Pricing](https://www.tencentcloud.com/document/product/647/66078).
+   >
+
+## Quick Start
+
+### Step 1. Activate the Service
+
+Refer to the Activate Service document to enable the Free trial or official package.
+
+### Step 2. Code Integration
+
+Refer to Preparations guide to integrate the TUILiveKit SDK.
+
+### Step 3. Add the Live Stream List Page
+
+The **LiveListView** component is a dedicated view for displaying the live stream list. It automatically pulls the live room list, supports different display styles (**single-column** and **double-column**).
+
+【Kotlin】
+``` java
+import android.content.Context
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.livelist.LiveListView
+import com.trtc.uikit.livekit.features.livelist.Style
+
+class YourActivity : AppCompatActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1. Create and initialize waterfall layout view
+        val view = createLiveListView(this)
+        // 2. Add the created LiveListView to your Activity or Fragment
+        setContentView(view)
+    }
+
+    fun createLiveListView(context: Context): LiveListView {
+        val liveListView = LiveListView(context)
+        // This code is a two-column waterfall layout initialization example. If you need to use a single column waterfall layout, change the initialization code to liveListView.init(this, Style.SINGLE_COLUMN)
+        liveListView.init(this, Style.DOUBLE_COLUMN)
+        return liveListView
+    }
+}
+```
+
+【Java】
+``` java
+import android.content.Context;
+import android.os.Bundle;
+
+import androidx.appcompat.app.AppCompatActivity;
+
+import com.trtc.uikit.livekit.features.livelist.LiveListView;
+import com.trtc.uikit.livekit.features.livelist.Style;
+
+public class YourActivity extends AppCompatActivity {
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        // 1. Create and initialize waterfall layout view
+        LiveListView view = createLiveListView(this);
+        // 2. Add the created LiveListView to your Activity or Fragment
+        setContentView(view);
+    }
+
+    private LiveListView createLiveListView(Context context) {
+        LiveListView liveListView = new LiveListView(context);
+        // This code is a two-column waterfall layout initialization example. If you need to use a single column waterfall layout, change the initialization code to liveListView.init(this, Style.SINGLE_COLUMN, null, null);
+        liveListView.init(this, Style.DOUBLE_COLUMN, null, null);
+        return liveListView;
+    }
+}
+```
+
+### Step 4. Navigate to the Audience Viewing Page
+
+You can customize the page navigation by setting a click listener. For audience viewing page implementation, see Audience Viewing:
+
+**Example Code**:
+
+【Kotlin】
+``` java
+fun createLiveListView(context: Context): LiveListView {
+    val liveListView = LiveListView(context)
+    // This code is a two-column waterfall layout initialization example. If you need to use a single column waterfall layout, change the initialization code to liveListView.init(this, Style.SINGLE_COLUMN)
+    liveListView.init(this, Style.DOUBLE_COLUMN)
+
+    liveListView.setOnItemClickListener { view, liveInfo ->
+        click live list item to redirect to audience viewing page
+        val intent = Intent(context, YourAudienceActivity::class.java)
+        intent.putExtra("liveId", liveInfo.roomId)
+        context.startActivity(intent)
+    }
+    return liveListView
+}
+```
+
+【Java】
+``` java
+private LiveListView createLiveListView(Context context) {
+    LiveListView liveListView = new LiveListView(context);
+    // This code is a two-column waterfall layout initialization example. If you need to use a single column waterfall layout, change the initialization code to liveListView.init(this, Style.SINGLE_COLUMN, null, null);
+    liveListView.init(this, Style.DOUBLE_COLUMN, null, null);
+
+    liveListView.setOnItemClickListener((view, liveInfo) -> {
+        click live list item to redirect to audience viewing page
+        Intent intent = new Intent(context, YourAudienceActivity.class);
+        intent.putExtra("liveId", liveInfo.roomId);
+        context.startActivity(intent);
+    });
+    return liveListView;
+}
+```
+
+## Customize Your UI Layout
+
+**TUILiveKit** provides flexible interfaces to customize the live list waterfall component. You can customize the data source and list item styles according to your business needs.
+
+### Customize Data Source
+
+If your backend has a separate live list data, you can customize the data source by implementing the `LiveListDataSource` interface instead of using the component's default list data.
+
+【Kotlin】
+``` java
+// 1. Import dependency
+import com.trtc.uikit.livekit.features.livelist.LiveListDataSource;
+
+// 2. Customize the data source by implementing LiveListDataSource
+val dataSource = object : LiveListDataSource {
+    override fun fetchLiveList(param: FetchLiveListParam,callback: LiveListCallback) {
+        // Connect to your own business backend and return data to the UI component in the following format
+        val liveInfoList = mutableListOf<TUILiveListManager.LiveInfo>()
+        val liveInfo = TUILiveListManager.LiveInfo().apply {
+            roomInfo = TUIRoomDefine.RoomInfo().apply {
+                roomId = "live_123456"
+                name = "live_123456"
+            }
+        }
+        liveInfoList.add(liveInfo)
+        val cursor = "aabbccdd"
+        callback.onSuccess(cursor, liveInfoList)
+    }
+}
+
+// 3. Import a custom dataSource during initialization
+liveListView.init(this, Style.DOUBLE_COLUMN, dataSource = dataSource)
+```
+
+【Java】
+``` java
+// 1. Import dependency
+import com.trtc.uikit.livekit.features.livelist.LiveListDataSource;
+
+// 2. Customize the data source by implementing LiveListDataSource
+LiveListDataSource dataSource = (param, callback) -> {
+    // Connect to your own business backend and return data to the UI component in the following format
+    List<TUILiveListManager.LiveInfo> liveInfoList = new ArrayList<>();
+    TUILiveListManager.LiveInfo liveInfo = new TUILiveListManager.LiveInfo();
+    liveInfo.roomInfo = new TUIRoomDefine.RoomInfo();
+    liveInfo.roomInfo.roomId = "live_123456";
+    liveInfo.roomInfo.name = "live_123456";
+    liveInfoList.add(liveInfo);
+    String cursor = "aabbccdd";
+    callback.onSuccess(cursor, liveInfoList);
+};
+
+// 3. Import a custom dataSource during initialization
+liveListView.init(this, Style.DOUBLE_COLUMN, null, dataSource);
+```
+
+### Custom View
+
+The bottom of the waterfall list items displays the video stream or live cover by default. If you need to customize the UI elements at the top of the list items (such as the host's avatar, live title, etc.), you can do so by implementing the `LiveListViewAdapter` interface.
+
+【Kotlin】
+``` java
+// 1. Import dependency
+import com.trtc.uikit.livekit.features.livelist.LiveListViewAdapter;
+
+// 2. Implement LiveListViewAdapter to customize widgets
+val liveListViewAdapter = object : LiveListViewAdapter {
+    override fun createLiveInfoView(liveInfo: TUILiveListManager.LiveInfo): View {
+        // Custom view
+        val widgetView = YourView(context)
+        widgetView.init(liveInfo)
+        return widgetView
+    }
+
+    override fun updateLiveInfoView(view: View, liveInfo: TUILiveListManager.LiveInfo) {
+        // Refresh the bound data in the view
+        val widgetView = view as YourView
+        widgetView.updateLiveInfoView(liveInfo)
+    }
+}
+
+// 3. Import a custom liveListViewAdapter during initialization
+liveListView.init(this, Style.DOUBLE_COLUMN, adapter = liveListViewAdapter)
+```
+
+【Java】
+``` java
+// 1. Import dependency
+import com.trtc.uikit.livekit.features.livelist.LiveListViewAdapter;
+
+// 2. Implement LiveListViewAdapter to customize widgets
+LiveListViewAdapter liveListViewAdapter = new LiveListViewAdapter() {
+    @Override
+    public View createLiveInfoView(TUILiveListManager.LiveInfo liveInfo) {
+        // Custom view
+        CustomView widgetView = new CustomView(context);
+        widgetView.init(liveInfo);
+        return widgetView;
+    }
+
+    @Override
+    public void updateLiveInfoView(View view, TUILiveListManager.LiveInfo liveInfo) {
+        // Refresh the bound data in the view
+        CustomView widgetView = (CustomView) view;
+        widgetView.updateLiveInfoView(liveInfo);
+    }
+};
+
+// 3. Import a custom liveListViewAdapter during initialization
+liveListView.init(this, Style.DOUBLE_COLUMN, liveListViewAdapter, null);
+```
+
+## Next Steps
+
+Congratulations! You have successfully integrated the **Live Stream List** feature. Next, you can implement features such as **Host Live Streaming** and **Audience Viewing**. Please refer to the table below:
+| <strong>Feature</strong> | <strong>Description</strong> | <strong>Integration Guide</strong> |
+| --- | --- | --- |
+| <strong>Host Streaming</strong> | The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions. | Host Streaming |
+| <strong>Audience Viewing</strong> | Audience can watch live streaming after entering the anchor's live streaming room, with features like audience mic connection, live room information, online audience, and bullet screen display. | Audience Viewing |
+
+## FAQs
+
+### What should I do if the page shows no live streams after integrating the live list feature?
+
+If you see a blank page, you need to check if you have completed the Complete Login. To test this feature, you can use two devices: one device to start a broadcast, and the other on the live list page to pull the list of ongoing live streams.
+
+### What is the difference between single-column and double-column waterfall flows?
+
+A single-column waterfall flow previews one live room at a time, while a double-column waterfall flow previews two live rooms simultaneously. You can choose the appropriate layout based on your design requirements.
+
+### Is there a charge for previewing live streams?
+
+Yes, the duration of previewing a live room is counted towards the audience's audio/video duration, which is a paid service. For detailed
+
+Pricing, you can refer to the relevant content in the documentation.