观众观看(Flutter)

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

我的收藏
TUILiveKit 的观众观看页为用户提供了丰富且便捷的直播观看与互动功能,能快速集成到您的应用中,满足观众多样化的需求。

功能概览

直播观看:清晰、流畅观看主播实时直播画面;
互动连麦:申请连麦,与主播进行音视频互动;
直播信息:查看直播间标题、简介,及在线观众列表等信息;
直播互动:送礼物(有动画特效,主播接收提示)、点赞(有动画及实时统计)、发弹幕互动。
直播观看
互动连麦
直播信息
直播互动















快速接入

步骤 1. 开通服务

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

步骤 2. 代码集成

参考 准备工作 接入 TUILiveKit。

步骤 3. 添加观众观看页面

在您需要观众进房的调用入口(具体由您的业务决定),执行如下操作,拉起观众观看页面或将观众观看页面集成到自己的Widget树中:
直接跳转
集成到 Widget 树
// 跳转到观众观看页面
Navigator.push(context, MaterialPageRoute(
builder: (context) {
return TUILiveRoomAudienceWidget(roomId: roomId);
}));
// --- 根据您的Widget树结构,选择以下一种方式集成 ---

// [选项一] 作为唯一子Widget(单子树)
// 适用于Container、Padding等通常只包含一个子Widget的容器
Container(
child: TUILiveRoomAudienceWidget(roomId: roomId) // 在此处集成观众观看页
)

// [选项二] 作为多个子Widget之一(多子树)
// 适用于Column、Row、Stack等可以包含多个子Widget的布局
Stack(
children: [
YourOtherWidget(), // 您的其他子Widget
TUILiveRoomAudienceWidget(roomId: roomId), // 在此处集成观众观看页
YourOtherWidget(), // 您的其他子Widget
])

自定义您的界面布局

文案定制

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






观众发送弹幕时,直播间内其他观众看不到弹幕内容?

原因 1: 先检查网络连接,确保观众设备网络正常。
原因 2: 该观众被主播禁言,无法发送弹幕。
原因 3:观众的弹幕内容涉及 关键词屏蔽,请确认观众发送的弹幕内容是否符合直播间规则。