即时通信 IM 观众观看（Flutter）

注意：集成提示：

注意：这篇档介绍基于 UI 组件 的观众观看方式（含完整交互 UI）。若你需通过 Core SDK 自行搭建观众端界面，请参考 观众观看 (Core SDK)。

一、功能概览

·直播观看：清晰、流畅观看主播实时直播画面。

·互动连麦：申请连麦，与主播进行音视频互动。

·直播信息：查看直播间标题、简介，及在线观众列表等信息。

·直播互动：送礼物（有动画特效，主播接收提示）、点赞（有动画及实时统计）、发弹幕互动。

二、步骤1：开通服务

参考 开通服务 文档开通体验版或大规模直播版套餐。

三、步骤2：代码集成

参考 准备工作 接入 TUILiveKit。

四、步骤3：添加观众观看页面

TUILiveRoomAudienceOverlay 已内置了直播场景的观众端完整 UI 与业务逻辑，支持浮窗模式。在观看直播期间，可以切换到应用内和应用外（即画中画） 2 种场景的浮窗模式。TUILiveRoomAudienceOverlay 是基于 Flutter API Overlay 和 原生画中画实现的，具体接入流程如下：

五、1. App 工程配置开启系统画中画特性

参考 工程配置，开启系统画中画特性。

六、2. 跳转观看页面

在你需要观众进房的调用入口（具体由你的业务决定），执行如下操作，跳转到观看页面。

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);}));

注意：说明：

七、进入应用内浮窗模式

点击观看页面右上角的浮窗按钮，进入浮窗模式，效果如下：

八、进入应用外浮窗模式

依次点击观看页面右下角的更多 > 画中画，打开画中画开关。然后，你的 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 > 相机，检查摄像头权限是否开启，可参考下图：

十三、观众发送弹幕时，直播间内其他观众看不到弹幕内容？

·原因 1： 先检查网络连接，确保观众设备网络正常。

·原因 2： 该观众被主播禁言，无法发送弹幕。

·原因 3：观众的弹幕内容涉及 关键词屏蔽，请确认观众发送的弹幕内容是否符合直播间规则。

十四、App 退到后台无法进入应用外浮窗（画中画）模式？

参考 进入应用外浮窗模式，进入直播间后，开启了画中画开关。

如果是 Android 平台，在你打开画中画开关后，还会自动检测 App 的系统画中画模式开关状态，如果没有打开，App 会自动跳转到设置页面，请你允许进入画中画模式：