TUILiveKit 的观众观看页为用户提供了丰富且便捷的直播观看与互动功能，能快速集成到您的应用中，满足观众多样化的需求。
功能概览
直播观看：清晰、流畅观看主播实时直播画面。
互动连麦：申请连麦，与主播进行音视频互动。
直播信息：查看直播间标题、简介，及在线观众列表等信息。
直播互动：送礼物（有动画特效，主播接收提示）、点赞（有动画及实时统计）、发弹幕互动。
直播观看 | 互动连麦 | 直播信息 | 直播互动 |
 |
 |  |  |
快速接入
步骤1：开通服务
步骤2：代码集成
步骤3：添加观众观看页面
TUILiveRoomAudienceWidget 已内置了直播场景的观众端完整 UI 与业务逻辑，该组件不支持浮窗模式，如需浮窗功能请转到 添加浮窗版观众观看页面。您只需要配置 TUILiveRoomAudienceWidget 的调用入口（具体由您的业务决定），执行如下操作，拉起观众观看页面或将观众观看页面集成到自己的 Widget 树中：import 'package:tencent_live_uikit/tencent_live_uikit.dart';// 跳转到观众观看页面Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {final roomId = "test_live_room_id";return TUILiveRoomAudienceWidget(roomId: roomId);}));
// --- 根据您的Widget树结构，选择以下一种方式集成 ---// [选项一] 作为唯一子Widget（单子树）// 适用于Container、Padding等通常只包含一个子Widget的容器Container(child: TUILiveRoomAudienceWidget(roomId: roomId) // 在此处集成观众观看页)// [选项二] 作为多个子Widget之一（多子树）// 适用于Column、Row、Stack等可以包含多个子Widget的布局Stack(children: [YourOtherWidget(), // 您的其他子WidgetTUILiveRoomAudienceWidget(roomId: roomId), // 在此处集成观众观看页YourOtherWidget(), // 您的其他子Widget])
步骤4：（可选）添加浮窗版观看页面
TUILiveRoomAudienceOverlay 是支持浮窗模式的观看页面。在观看直播期间，可以切换到 应用内 和 应用外（即画中画） 2 种场景的浮窗模式。TUILiveRoomAudienceOverlay 是基于 Flutter 官方 API Overlay 和 原生画中画实现的，具体接入流程如下：1. App 工程配置开启系统画中画特性
2. App 新增二级导航器
3. 跳转浮窗版观看页面
在您需要观众进房的调用入口（具体由您的业务决定），执行如下操作，跳转到观看页面。
import 'package:tencent_live_uikit/tencent_live_uikit.dart';// 跳转到观看页面Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {final roomId = "test_live_room_id";return TUILiveRoomAudienceOverlay(roomId: roomId);}));
说明：
1.
TUILiveRoomAudienceOverlay 不支持作为子 widget 嵌入到容器类 widget （例如：Container、Stack 等），只能作为独立页面跳转。因为内部使用了 Overlay，LiveKit 需要操控整个 Overlay 页面来切换浮窗模式。2. iOS 端仅支持普通观众进入应用外浮窗模式。
进入应用内浮窗模式
点击观看页面右上角的浮窗按钮，进入浮窗模式，效果如图所示：
进入应用外浮窗模式
依次点击观看页面右下角的更多 > 画中画，打开画中画开关。然后，您的 App 退到后台时，将自动进入到系统画中画模式，效果如图所示：
自定义您的界面布局
文案定制
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 图片文件来快速修改自定义界面所需的图标。
重新构建并运行应用，即可看到更新的图标。
下一步
恭喜您，现在您已经成功集成了观众观看功能。接下来，您可以实现主播开播、直播列表等功能，可参考下表：
常见问题
观众选择视频连麦后，视频画面显示黑屏？
请前往手机设置 > App > 相机，检查摄像头权限是否开启，可参考下图：
iOS | Android |
 |  |
观众发送弹幕时，直播间内其他观众看不到弹幕内容？
原因 1： 先检查网络连接，确保观众设备网络正常。
原因 2： 该观众被主播禁言，无法发送弹幕。
原因 3：观众的弹幕内容涉及 关键词屏蔽，请确认观众发送的弹幕内容是否符合直播间规则。
App 退到后台无法进入应用外浮窗（画中画）模式？
如果是 Android 平台，在您打开画中画开关后，还会自动检测 App 的系统画中画模式开关状态，如果没有打开，App 会自动跳转到设置页面，请您允许进入画中画模式：
弹窗无法展示或被遮挡？
如果您接入了
TUILiveRoomAudienceOverlay，请确保弹窗（BottomSheet、Dialog等）的 context 来自于 rootNavigator（建议使用 Global.appContext()）。由于直播页面 Overlay 是在 secondaryNavigator 上，如果弹窗的 context 来自于 secondaryNavigator，那么弹窗将会被 Overlay 遮挡。因为同一个 Navigator 上，Overlay 的层级比普通页面要高，这样 Overlay 才能浮在普通页面的上层。
