主播开播（Flutter）
Download
聚焦模式
字号
TUILiveKit 主播开播页为直播场景提供开箱即用的全功能界面，支持快速搭建主播开播所需的核心能力，让您无需关注复杂 UI 与逻辑实现，即可高效集成直播开播流程。
功能概览
开播前预览：支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置；
连麦互动：支持直播过程中与观众 或 与其他直播间主播实时互动；
观众互动：支持弹幕、礼物等丰富直播互动形式。
开播前预览 | 连麦互动 | 观众互动 |
 |  |  |
快速接入
步骤1：开通服务
步骤2：代码集成
步骤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);}));
说明：
TUILiveRoomAnchorOverlay 不支持作为子 widget 嵌入到容器类 widget （例如：Container、Stack 等），只能作为独立页面跳转。因为内部使用了 Overlay，LiveKit 需要操控整个 Overlay 页面来切换浮窗模式。iOS 端仅支持普通观众进入应用外浮窗模式。
进入应用内浮窗模式
点击主播页面右上角的浮窗按钮，进入浮窗模式，效果如图所示：
进入应用外浮窗模式
依次点击主播页面右下角的更多 > 画中画，打开画中画开关。然后，您的 App 退到后台时，将自动进入到系统画中画模式，效果如图所示：
自定义您的界面布局
TUILiveKit 支持灵活定制开播页与直播页的功能和样式，您可根据业务需求调整布局。
直播布局模板选择
TUILiveKit 提供 4 种直播布局模板，您可在主播开播页的布局入口选择合适样式：
布局模板一览：
名称 | 动态宫格布局 | 浮动小窗布局 | 固定宫格布局 | 固定小窗布局 |
模板 ID | 600 | 601 | 800 | 801 |
描述 | 默认布局，可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定，每个嘉宾占据一个固定宫格。 | 连麦人数固定，嘉宾以固定小窗形式显示。 |
预览 |  |  |  |  |
文案定制
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 |
 |  |
开播提示“未登录”？
App 退后台无法进入应用外浮窗（画中画）模式？
如果是 Android 平台，在您打开画中画开关后，还会自动检测 App 的系统画中画模式开关状态，如果没有打开，App 会自动跳转到设置页面，请您允许进入画中画模式：
文档反馈