即时通信 IM 主播开播（Flutter）

注意：集成提示：

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

一、功能概览

·开播前预览：支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置。

·连麦互动：支持直播过程中与观众 或 与其它直播间主播实时互动。

·观众互动：支持弹幕、礼物等丰富直播互动形式。

三、步骤1：开通服务

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

四、步骤2：代码集成

参考 准备工作 接入 TUILiveKit。

五、步骤3：添加主播页面

TUILiveRoomAnchorOverlay 内置了直播场景的主播端完整 UI 与业务逻辑，支持浮窗模式。在直播期间，可以切换到 应用内 和 应用外（即画中画） 2 种场景的浮窗模式。TUILiveRoomAnchorOverlay 是基于 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 TUILiveRoomAnchorOverlay(roomId: roomId);}));

注意：说明：

注意：1. TUILiveRoomAnchorOverlay 不支持作为子 widget 嵌入到容器类 widget （例如：Container、Stack 等），只能作为独立页面跳转。因为内部使用了 Overlay，LiveKit 需要操控整个 Overlay 页面来切换浮窗模式。

注意：2. iOS 端仅支持普通观众进入应用外浮窗模式。

八、进入应用内浮窗模式

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

九、进入应用外浮窗模式

依次点击主播页面右下角的更多 > 画中画，打开画中画开关。然后，你的 App 退后台时，将自动进入到系统画中画模式，效果如下：

十、AI 助手：知识咨询与代码集成

你在接入直播与语聊 SDK 过程中，可以通过 MCP 使用 AI 助手，快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台，答案基于产品文档。适用于查询 AtomicXCore SDK 和 UI 组件用法以及集成文档等场景，立即体验，提出你的第一个问题。

十一、自定义你的界面布局

TUILiveKit 支持灵活定制开播页与直播页的功能和样式，你可根据业务需求调整布局。

十二、直播布局模板选择

TUILiveKit 提供 4 种直播布局模板，你可在主播开播页的布局入口选择合适样式：

十三、布局模板一览：

十四、文案定制

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 > 相机，检查摄像头权限是否开启，可参考如下示例：

十九、开播提示“未登录”？

参考 登录指引， 确认已完成登录功能接入。

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

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

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