tencent cloud

实时音视频

动态与公告
产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
产品简介
产品概述
基本概念
产品功能
产品优势
应用场景
性能数据
购买指南
计费概述
免费时长说明
月订阅
现收现付
TRTC 逾期与暂停政策
常见问题解答
退款说明
新手指引
Demo 体验
视频通话 SDK
组件介绍
开通服务
跑通 Demo
快速接入
离线唤醒
会话聊天
云端录制
AI 降噪
界面定制
Chat 集成通话能力
更多特性
无 UI 集成
服务端 API
客户端 API
解决方案
错误码表
发布日志
常见问题
视频会议 SDK
组件介绍(TUIRoomKit)
开通服务(TUIRoomKit)
跑通 Demo(TUIRoomKit)
快速接入(TUIRoomKit)
屏幕共享(TUIRoomKit)
预定会议(TUIRoomKit)
会中呼叫(TUIRoomKit)
界面定制(TUIRoomKit)
虚拟背景(TUIRoomKit)
会议控制(TUIRoomKit)
云端录制(TUIRoomKit)
AI 降噪(TUIRoomKit)
会中聊天(TUIRoomKit)
机器人推流(TUIRoomKit)
更多特性(TUIRoomKit)
客户端 API(TUIRoomKit)
服务端 API(TUIRoomKit)
常见问题(TUIRoomKit)
错误码 (TUIRoomKit)
SDK更新日志(TUIRoomKit)
直播与语聊 SDK
Live 视频直播计费说明
组件介绍
开通服务(TUILiveKit)
跑通 Demo
无 UI 集成
UI 自定义
直播监播
视频直播
语聊房
高级功能
客户端 API
服务端 API
错误码
发布日志
常见问题
RTC Engine
开通服务
SDK 下载
API-Example
接入指引
API-参考手册
高级功能
AI 集成
概述
MCP 配置
Skills 配置
集成指南
常见问题
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
控制台指南
应用管理
套餐包管理
用量统计
监控仪表盘
开发辅助
解决方案
实时合唱
常见问题
迁移指南
计费相关
功能相关
UserSig 相关
应对防火墙限制相关
缩减安装包体积相关
Andriod 与 iOS 相关
Web 端相关
Flutter 相关
Electron 相关
TRTCCalling Web 相关
音视频质量相关
其他问题
旧版文档
RTC RoomEngine SDK(旧)
集成 TUIRoom (Web)
集成 TUIRoom (Android)
集成 TUIRoom (iOS)
集成 TUIRoom (Flutter)
集成 TUIRoom (Electron)
TUIRoom API 查询
实现云端录制与回放(旧)
监控仪表盘计费(旧)
协议与策略
安全合规认证
安全白皮书
信息安全说明
服务等级协议
苹果隐私策略:PrivacyInfo.xcprivacy
TRTC 政策
隐私协议
数据处理和安全协议
词汇表

准备工作(Flutter)

PDF
Mode fokus
Ukuran font
Terakhir diperbarui: 2026-01-15 21:55:07

功能预览

TUILiveKit 是一个功能全面的直播组件,集成后可快速实现以下功能模块
主播准备页
主播开播页
直播列表
观众观看页













准备工作

开通服务

在使用 TUILiveKit 前,请先参考 开通服务,领取 TUILiveKit 体验版或开通专业版套餐。

环境要求

Flutter
Flutter 3.27.4 或更高版本。
Dart 3.6.2 或更高的版本。
Android 平台
Android 5.0(SDK API Level 21)及以上版本。
Gradle 7.0 及以上的版本。
Android 5.0 及以上的手机设备。
iOS 平台
Xcode 15 或更高版本。
iOS 13.0 或更高版本。
已安装 CocoaPods 环境。如果您尚未安装,请 点击查看 安装步骤。

代码集成

步骤 1:下载 TUILiveKit 组件

在工程的根目录下,通过命令行执行以下命令安装组件 tencent_live_uikit 插件。
flutter pub add tencent_live_uikit
安装命令执行成功后,控制台将输出如下信息:
Resolving dependencies...
Downloading packages...
......
+ tencent_live_uikit x.x.x
......
Changed xx dependencies!
xx packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

步骤 2:工程配置

Android
iOS
1. 如果需要编译运行在 Android 平台,由于我们在 SDK 内部使用了Java 的反射特性,需要将 SDK 中的部分类加入不混淆名单。
首先,需要在工程的 android/app/build.gradle 文件中配置并开启混淆规则:
android {
......
buildTypes {
release {
......
// 配置并开启混淆规则
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
android/app/proguard-rules.pro 文件中添加以下代码,如果该文件不存在则新建一个文件:
-keep class com.tencent.** { *; }
2. 在工程的 android/app/build.gradle 文件中配置开启 Multidex 支持。
android {
......
defaultConfig {
......
// 开启 Multidex 支持
multiDexEnabled true
}
}
3. (可选)如果您需要接入浮窗版直播页面,需要开启系统画中画特性。
请在 App 主工程的 AndroidManifest.xml 里设置 MainActivityandroid:supportsPictureInPicture 为 true:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application>
<activity
android:name=".MainActivity"
android:supportsPictureInPicture="true"
</activity>
</application>
</manifest>
1. iOS 工程编译 release 版本时,需要配置符号保留规则。使用 Xcode 打开工程,在 TARGETS 列表中选择 target(通常是 Runner),选择项目 > Build Settings > Deployment,将其下的 Strip Style 设置为 Non-Global Symbols ,以保留所需要的全局符号信息。此配置是必需的,否则可能在运行时出现异常,无法进入房间。
2. (可选)如果需要在 iOS 模拟器上调试,并且您使用的 Mac 电脑使用的是 Intel 芯片,请在工程的 ios/Podfile 文件中添加以下代码:
target 'xxxx' do
......
end
......

post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['VALID_ARCHS'] = 'arm64 arm64e x86_64'
config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'
end
end
end
3. 由于 TUILiveKit 会使用 iOS 的音视频功能,需要授权麦克风和摄像头的使用权限。
授权操作方法:在 iOS 工程的 Info.plist 的第一级<dict>目录下添加以下两项,分别对应麦克风和摄像头在系统弹出授权对话框时的提示信息。
<key>NSCameraUsageDescription</key>
<string>CallingApp需要访问您的相机权限,开启后录制的视频才会有画面</string>
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp需要访问您的麦克风权限,开启后录制的视频才会有声音</string>
完成以上添加后,在 ios/Podfile 中添加以下预处理器定义,用于启用相机与麦克风权限。
post_install do |installer|
installer.pods_project.targets.each do |target|
flutter_additional_ios_build_settings(target)
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_MICROPHONE=1',
'PERMISSION_CAMERA=1',
]
end
end
end
4. (可选)如果您需要接入浮窗版直播页面,需要开启系统画中画特性。
请在 Xcode 工程配置里,开启画中画:


步骤 3:配置页面导航和多语言功能

为了确保 TUILiveKit 能够正常管理页面导航和显示多语言界面,需要在 Flutter 应用框架中进行以下配置:
navigatorObservers 中添加 TUILiveKitNavigatorObserver.instance,用于监听页面路由变化和管理组件生命周期。
localizationsDelegates 中添加相关本地化代理,确保界面文案能够根据系统语言正确显示。
以 MaterialApp 框架为例,示例代码如下:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// 您自己的APP主类
class XXX extends StatelessWidget {
const XXX({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
// 添加 TUILiveKit 导航观察者,用于监听页面路由变化和生命周期管理
navigatorObservers: [TUILiveKitNavigatorObserver.instance],
// 添加本地化代理,支持多语言文案显示
localizationsDelegates: [
...LiveKitLocalizations.localizationsDelegates,
...BarrageLocalizations.localizationsDelegates,
...GiftLocalizations.localizationsDelegates],
// 您APP的其他配置
......
);
}
}
配置后,组件将支持多语言并能正确处理页面跳转。

完成登录

代码集成完成后,您需要调用 TUILogin.login 完成登录,这是使用 TUILiveKit 的关键步骤,因为只有在登录成功后才能正常使用 TUILiveKit 的各项功能,请确保相关参数配置正确:
说明:
在实际项目场景下,强烈推荐 您在完成自己的用户身份验证等相关登录操作后,再调用 TUILiveKit 的登录服务。这样可以避免因过早调用登录服务,导致业务逻辑混乱或数据不一致的问题,同时也能更好地适配您项目中现有的用户管理和权限控制体系。
import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';
......

login() async {
await TUILogin.instance.login(
1400000001, // 请替换为开通服务控制台的 SDKAppID
"denny", // 请替换为您的 UserID
"xxxxxxxxxxx", // 您可以在控制台中计算一个 UserSig 并填在这个位置
TUICallback(
onError: (code, message) {
print("TUILogin login fail, {code:$code, message:$message}");
},
onSuccess: () async {
print("TUILogin login success");
},
),
);
}
登录接口参数说明:
参数
类型
说明
SDKAppID
Int
userID
String
当前用户的唯一 ID,仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突,请勿使用 1123 等简单 ID
userSig
String
用于腾讯云鉴权的票据。请注意:
开发环境:您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境:为了防止密钥泄露,请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig
更多信息请参见 如何计算及使用 UserSig

(可选)浮窗版直播间配置

默认 AppMaterialApp 首页是在 rootNavigator 上显示。如果您希望直播间支持浮窗功能(即在直播过程中可以最小化直播窗口,悬浮在其他页面上方继续观看),需要在 rootNavigator 上添加一层二级导航器 secondaryNavigator,把首页移到 secondaryNavigator 上。直播页面的 Overlay 将会放在 secondaryNavigator 上展示。secondaryNavigator 用于承载 Overlay,并常驻 App,以实现悬浮窗的效果。
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
import 'package:tencent_live_uikit/common/widget/global.dart';

// 您自己的 App 主类
class XXX extends StatelessWidget {
const XXX({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
// 首页配置
home: Navigator(
// Global.secondaryNavigatorKey 是 TUILiveKit 提供的用于管理浮窗页面的全局导航器 Key。
key: Global.secondaryNavigatorKey,
onGenerateRoute: (settings) => MaterialPageRoute(
settings: const RouteSettings(name: 'home_widget'),
builder: (BuildContext context) {
// HomeWidget 是您自己的应用首页 Widget,请替换为您实际的首页类
return const HomeWidget();
},
),
),
// 您 App 的其他配置
......
);
}
}
此步骤是进入浮窗版页面的必要配置,完整流程请参考 添加浮窗版主播页面添加浮窗版观众观看页面 。如果您不需要接入浮窗版页面,请跳过此步骤。

下一步

恭喜您,现在您已经成功集成了视频直播组件并完成了登录。接下来,您可以实现主播开播观众观看直播列表等功能,可参考下表:
功能
描述
集成指引
主播开播
主播开播全流程功能,包括开播前的准备和开播后的各种互动。
观众观看
实现观众进入主播的直播间后观看直播,实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。
直播列表
展示直播列表界面和功能,包含直播列表、房间信息展示功能。

常见问题

每次进房都需要调用登录吗?

不需要。通常您只需要完成一次 TUILogin.login 调用即可,我们建议您将 TUILogin.loginTUILogin.logout 与自己的登录业务关联。

iOS release下运行或打包后无法进入房间?

请参考 工程配置 中 iOS 部分第 1 步:在 Xcode 中,在 TARGETS 列表中选择您的应用 target(通常是 Runner),选择项目 > Build Settings > Deployment,将其下的 Strip Style 设置为Non-Global Symbols ,以保留所需要的全局符号信息,否则可能在运行时出现异常,无法进入房间。

联系我们

如果您在接入或使用过程中有任何疑问或者建议,欢迎加入 Telegram 技术交流群组,或 联系我们 获取支持。

Bantuan dan Dukungan

Apakah halaman ini membantu?

masukan