观众观看（Flutter）
Download
聚焦模式
字号
TUILiveKit 语聊房为纯音频直播场景提供了开箱即用的全功能界面。它支持快速搭建观众观看、上麦互动所需的核心能力，让您无需关注复杂的 UI 与麦位管理逻辑。功能概览
收听直播： 清晰、流畅地收听主播的实时音频直播。
上麦互动： 申请上麦，与主播进行音频连麦互动。
直播间信息： 查看直播间公告，及在线观众列表等信息。
观众互动： 支持弹幕、礼物、点赞等丰富的直播互动形式。
收听直播 | 上麦互动 | 直播间信息 | 观众互动 |
 |  |  |  |
快速接入
步骤1：开通服务
步骤2：组件集成
步骤3：添加观众观看页面
TUIVoiceRoomOverlay 已内置了语聊房场景的观众端完整 UI 与业务逻辑，支持浮窗模式。在观看直播期间，可以切换到应用内浮窗模式。TUIVoiceRoomOverlay 是基于 Flutter 官方 API Overlay 实现的，具体接入流程如下：import 'package:tencent_live_uikit/tencent_live_uikit.dart';// 跳转到观看页面Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {final roomId = "test_voice_room_id";returnTUIVoiceRoomOverlay(roomId: roomId, behavior: RoomBehavior.join);}));
说明：
TUIVoiceRoomOverlay 不支持作为子 widget 嵌入到容器类 widget （例如：Container、Stack 等），只能作为独立页面跳转。因为内部使用了 Overlay，LiveKit 需要操控整个 Overlay 页面来切换浮窗模式。语聊场景不支持应用外浮窗模式。
TUIVoiceRoomOverlay 参数说明
参数名 | 类型 | 描述 | |
roomId | | String | 全局唯一的直播间 ID。 |
behavior | | RoomBehavior | 进房行为： autoCreate：自动创建直播间并进房。prepareCreate：先进入开播前预览页，用户点击开始直播后创建直播间并进房。join：观众进房。 |
params | | RoomParams | 主播开播参数，详见下一节。 观众进房（behavior 为 join）时无需配置此参数。 |
RoomParams 参数说明：
参数名 | 类型 | 描述 |
maxSeatCount | int | 直播间最大麦位数。 |
seatMode | TUISeatMode | 观众的上麦模式： applyToTake：观众需要申请，主播同意后上麦。freeToTake：观众自由上麦，无需主播同意。 |
浮窗模式效果
点击观看页面右上角的浮窗按钮，进入浮窗模式，效果如图所示：
自定义界面布局
文案定制
TUILiveKit 使用 ARB 文件和 Flutter 标准国际化方案来管理 UI 文案显示。您可以直接编辑
livekit/lib/common/language/i10n/ 目录下的 ARB 文件来修改需要调整的文案：
livekit_en.arb：英文文案。livekit_zh.arb：简体中文文案。livekit_zh_Hant.arb：繁体中文文案。修改后通过命令行执行
flutter gen-l10n 重新生成本地化代码即可。生成成功后，livekit/lib/common/language/gen/ 目录里的代码文件将会刷新。图标定制
TUILiveKit UI 所需的图片资源在
livekit/assets/images/ 目录下管理，您可以直接替换该目录下的 PNG 图片文件来快速修改自定义界面所需的图标。
重新构建并运行应用，即可看到更新的图标。
下一步
恭喜您，现在您已经成功集成了观众观看功能。接下来，您可以实现主播开播、直播列表和礼物系统等功能，可参考下表：
常见问题
观众发送弹幕时，直播间内其他观众看不到弹幕内容？
原因 1： 先检查网络连接，确保观众设备网络正常。
原因 2： 该观众被主播禁言，无法发送弹幕。
原因 3：观众的弹幕内容涉及关键词屏蔽，请确认观众发送的弹幕内容是否符合直播间规则。
文档反馈