Audience Listening (Flutter)
Download
Focus Mode
Font Size
TUILiveKit Voice Chat Room provides a comprehensive, ready-to-use interface for pure audio live streaming scenarios. It allows you to quickly implement essential features such as audience listening and mic interaction, eliminating the need to manage complex UI or seat management logic yourself.Feature Overview
Listen to Live Streams: Hear the host’s real-time audio stream with clarity and low latency.
Co-guest: Request to join the mic and interact with the host via audio.
Live Information: View room announcements and see the list of online audience members.
Live Interaction: Engage with features such as bullet comments, gifts, and likes.
Listen to Live Streams | Co-guest | Live Information | Live Interaction |
 |  |  |  |
Quick Integration
Step 1. Activate the Service
Refer to the Activate Service document to enable the trial version or activate the Pro Edition package.
Step 2: Integrate the Component
Step 3: Add Audience Viewing Page
TUIVoiceRoomOverlay provides a complete audience UI and business logic for the voice room scenario, including support for floating window mode. While watching a live stream, users can switch to an in-app floating window. TUIVoiceRoomOverlay leverages Flutter's official Overlay API. To integrate, use the following code:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';// Navigate to the viewing pageNavigator.push(context, MaterialPageRoute(builder: (BuildContext context) {final roomId = "test_voice_room_id";returnTUIVoiceRoomOverlay(roomId: roomId, behavior: RoomBehavior.join);}));
Note:
TUIVoiceRoomOverlay cannot be embedded as a child widget in containers (such as Container, Stack, etc.); it must be opened as a standalone page. Since it uses Overlay internally, LiveKit needs full control of the Overlay page to switch floating window modes.Floating window mode is only supported inside the app for voice room scenarios.
After integration, calling this code will open the audience page and start streaming, as shown in the Listen to Live Streams image in the Feature Overview.
TUIVoiceRoomWidget Parameters
Parameter Name | Type | Description | |
roomId | | String | Globally unique live streaming room ID. |
behavior | | RoomBehavior | Enter Room behavior: autoCreate: Automatically create a live streaming room and enter room.prepareCreate: Enter the pre-live preview page first, then create and enter the live room after the user clicks Start Live.join: Audience enters the room. |
params | | RoomParams | Host live stream parameters. See next section. This parameter is not required when the audience enters the room ( behavior is join). |
RoomParams parameters:
Parameter Name | Type | Description |
maxSeatCount | int | Maximum number of seats in the live room. |
seatMode | TUISeatMode | Audience seat mode: applyToTake: Audience must apply and be approved by the host to take a seat.freeToTake: Audience can take a seat freely without host approval. |
Floating Window Mode Effect
Tap the floating window button at the top right of the viewing page to enter floating window mode, as shown below:
Custom UI Layout
TUILiveKit supports flexible customization of the host setup and live pages, allowing you to adjust the layout and hide/show functional modules based on your business requirements.
Text Customization (ARB)
TUILiveKit uses ARB files and the Flutter standard internationalization (i18n) solution to manage the UI text display. You can directly edit the ARB files in the
livekit/lib/common/language/i10n/ directory to modify the text:
livekit_en.arb: English Text.livekit_zh.arb: Simplified Chinese Text.livekit_zh_Hant.arb: Traditional Chinese Text.After editing, run
flutter gen-l10n in your terminal to regenerate localization code. The generated files will be updated in livekit/lib/common/language/gen/.Icon Customization
TUILiveKit’s UI image assets are stored in the
livekit/assets/images/ directory. To update icons, simply replace the PNG files in this folder.
Rebuild and run the application, and you will see the updated icon.
Next Steps
You have successfully integrated Audience Viewing feature. Next, you can add features like Host Live Streaming, Live Stream List, and Gift System. See the table below for details:
Feature | Description | Integration Guide |
Host Streaming | Complete host live streaming workflow, including pre-live preparation and interactive features after going live. | |
Live Stream List | Display the live room list UI and features, including room list and room information display. | |
Gift System | Support custom gift asset configuration, billing system integration, and gift-sending in PK scenarios. |
FAQs
Why can’t other audience members see live comments sent by an audience member?
There are 3 reasons you can refer to:
Check the network connection to ensure the audience member’s device is online.
The audience member has been muted by the host and cannot send live comments.
The live comments contain blocked keywords. Confirm that the comment complies with room rules.
Help and Support
Was this page helpful?
You can also Contact sales or Submit a Ticket for help.
Help us improve! Rate your documentation experience in 5 mins.
Feedback