이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
AudienceListView

Component Overview
The audience list component mainly provides following features: display the real-time number of participants in the live broadcast, and show the online audience list in the live broadcast.
Audience List Component
Click Component to Display Online Audience Details Panel
Effect Display after Integration
﻿
﻿
﻿
﻿
﻿
﻿
Component Integration
Android
iOS
Flutter
1. Create a directory named com.trtc.uikit.livekit under the src/main/java directory in your project, and copy the common directory and component/audiencelist directory under the livekit directory on github to the com.trtc.uikit.livekit directory you created.
2. Copy the res-common and res-audience-list directories under the main directory on github to the src/main directory in your own project.
3. Add the following configuration in the android node of your build.gradle.kts or build.gradle file:
build.gradle.kts
build.gradle
sourceSets.getByName("main") {
    res.setSrcDirs(
        listOf(
            "src/main/res", "src/main/res-common", "src/main/res-audience-lis"
        )
    )
}
sourceSets {
    main {
        res.srcDirs = [
                'src/main/res',
                'src/main/res-common',
                'src/main/res-audience-lis',
        ]
    }
}
4. Use the global string replacement feature in Android Studio to globally replace  import com.trtc.uikit.livekit.R;  with your project's own R file. An example is as follows:
﻿
Import components using CocoaPods. The specific steps for importing components are as follows:
1. You need to download the AudienceList and Common folders on GitHub to your local system.
﻿
2. Add dependencies of pod 'TUIAudienceList' and pod 'TUILiveResources' in your Podfile.
Swift
target 'xxxx' do
  ...
  ...
  pod 'TUILiveResources', :path => '../Component/Common/TUILiveResources.podspec'
  // The path is the relative path between your Podfile file and TUILiveResources.podspec file.
  pod 'TUIAudienceList', :path => '../Component/AudienceList/TUIAudienceList.podspec'
  // The path is the relative path between your Podfile file and TUIAudienceList.podspec file.
end
If you don't have a Podfile file, first use the terminal to cd into the xxxx.xcodeproj directory, then create it with the following command:
pod init
3. In the terminal, first cd to the Podfile directory, then execute the following commands to install components.
pod install
4. Any issues you encounter during integration and use, feel free to give feedback.
1. reate a directory named livekit_component under the lib directory in your project, and copy the common directory and component/audience_list directory from the livekit/lib directory on github to the livekit_component directory you created.
2. Adjust the import directory and change the import path to a relative path within your own project.
Component Usage
Notes:
Since online audience information can only be obtained in the live streaming room. When using the audience list component, note the use limits and reuse it after successfully entering the live streaming room.
Creating Components
Android
iOS
Flutter
You have two ways to create a live streaming room information component, as follows:
1. Create in code
AudienceListView audienceListView = new AudienceListView(getContext());
2. Define in xml:
<com.trtc.uikit.livekit.component.audiencelist.AudienceListView
    android:id="@+id/audience_list_view"
    android:layout_width="135dp"
    android:layout_height="24dp"
    android:layout_gravity="end" />
import TUIAudienceList
﻿
let audienceListView = AudienceListView()
// ...Add audienceListView to your parent view here and adjust the layout
Note：
This operation needs to be executed after successfully entering the room. You need to set enterRoomSuccessNotifier.value to true after success.
final enterRoomSuccessNotifier = ValueNotifer(false);
// change enterRoomSuccessNotifier.value to true after enter room success
﻿
ValueListenableBuilder(
    valueListenable: enterRoomSuccessNotifier,
    builder: (context, enterRoomSuccess, _) {
      return Visibility(
        visible: enterRoomSuccess,
        child: AudienceListWidget(
          roomId: 'replace with your roomId',
        ),
      );
    }),
Component Initialization
Android
iOS
Flutter
After successfully entering the room, you can call the init method of the AudienceListView to bind data and events for the component.
Note:
This operation needs to be executed after successful room entry. The callback for room entry success will return a TUIRoomDefine.RoomInfo object.
audienceListView.init(roomInfo); 
After successfully entering the room, you can call the initialize method of the AudienceListView to bind data and events for the component.
Note:
Note: This operation needs to be executed after successful room entry. The callback for room entry success will return a TUIRoomInfo object.
audienceListView.initialize(roomInfo: roomInfo) 
For details, see Creating Components﻿
﻿
﻿
﻿
Audience List Component	Click Component to Display Online Audience Details Panel	Effect Display after Integration