TUILiveKit 主播开播页为直播场景提供开箱即用的全功能界面,支持快速搭建主播开播所需的核心能力,让您无需关注复杂 UI 与逻辑实现,即可高效集成直播开播流程。
功能概览
开播前预览:支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置;
连麦互动:支持直播过程中与观众 或 与其它直播间主播实时互动;
观众互动:支持弹幕、礼物等丰富直播互动形式。
开播前预览 | 连麦互动 | 观众互动 |
![]() | ![]() | ![]() |
快速接入
步骤 1. 开通服务
步骤 2. 代码集成
步骤 3. 添加主播页面
TUILiveRoomAnchorWidget 已集成了主播开播前预览、主播开播页,您只需要配置 TUILiveRoomAnchorWidget 的调用入口(具体由您的业务决定),执行如下操作,跳转到主播页面或将主播页面集成到自己的Widget树中:// 跳转到主播页面Navigator.push(context, MaterialPageRoute(builder: (context) {return TUILiveRoomAnchorWidget(roomId: roomId);}));
// --- 根据您的Widget树结构,选择以下一种方式集成 ---// [选项一] 作为唯一子Widget(单子树)// 适用于Container、Padding等通常只包含一个子Widget的容器Container(child: TUILiveRoomAnchorWidget(roomId: roomId) // 在此处集成主播页)// [选项二] 作为多个子Widget之一(多子树)// 适用于Column、Row、Stack等可以包含多个子Widget的布局Stack(children: [YourOtherWidget(), // 您的其他子WidgetTUILiveRoomAnchorWidget(roomId: roomId), // 在此处集成主播页YourOtherWidget(), // 您的其他子Widget])
自定义您的界面布局
TUILiveKit 支持灵活定制开播页与直播页的功能和样式,您可根据业务需求调整布局。
直播布局模板选择
TUILiveKit 提供 4 种直播布局模板,您可在主播开播页的 UI 交互「布局」入口 选择合适样式:

布局模板一览:
名称 | 动态宫格布局 | 浮动小窗布局 | 固定宫格布局 | 固定小窗布局 |
模板 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 重新生成本地化代码即可。图标定制
TUILiveKit UI所需的图片资源在
livekit/assets/images/ 目录下管理,您可以直接替换该目录下的 PNG 图片文件来快速修改自定义界面所需的图标。
下一步
恭喜您,现在您已经成功集成了 主播开播 。接下来,您可以实现观众观看、直播列表等功能,可参考下表:
常见问题
开播后无画面?
请前往手机设置 > App > 相机,检查摄像头权限是否开启,可参考如下示例:
iOS | Android |
![]() | ![]() |
点击开播按钮无法开播,提示“未登录”?








