主播开播(Flutter)

最近更新时间:2025-09-18 11:20:02

我的收藏
TUILiveKit 主播开播页为直播场景提供开箱即用的全功能界面,支持快速搭建主播开播所需的核心能力,让您无需关注复杂 UI 与逻辑实现,即可高效集成直播开播流程。

功能概览

开播前预览:支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置;
连麦互动:支持直播过程中与观众 或 与其它直播间主播实时互动;
观众互动:支持弹幕、礼物等丰富直播互动形式。
开播前预览
连麦互动
观众互动










快速接入

步骤 1. 开通服务

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

步骤 2. 代码集成

参考 准备工作 接入 TUILiveKit。

步骤 3. 添加主播页面

TUILiveRoomAnchorWidget 已集成了主播开播前预览、主播开播页,您只需要配置 TUILiveRoomAnchorWidget 的调用入口(具体由您的业务决定),执行如下操作,跳转到主播页面或将主播页面集成到自己的Widget树中:
直接跳转
集成到 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(), // 您的其他子Widget
TUILiveRoomAnchorWidget(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






点击开播按钮无法开播,提示“未登录”?

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