准备工作(Flutter)

最近更新时间:2025-09-08 22:59:42

我的收藏

功能预览

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













准备工作

开通服务

在使用 TUILiveKit 前,您需要在 TRTC 控制台 开通相关服务,并领取体验版或者开通付费版。

开发环境

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

步骤 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 文件,并在 proguard-rules.pro 文件中添加以下代码:
-keep class com.tencent.** { *; }
2. 在工程的 android/app/build.gradle 文件中配置开启 Multidex 支持。
android {
......
defaultConfig {
......
multiDexEnabled true
}
}
1. 使用 Xcode 打开您的工程,选择项目 > 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

步骤 3:设置 navigatorObservers 和 localizationsDelegates

在 Flutter 应用框架的 navigatorObservers 中添加 TUILiveKitNavigatorObserver.instance,localizationsDelegates中添加 LiveKitLocalizations.localizationsDelegates,以 MaterialApp 框架为例,代码如下:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

......

class XXX extends StatelessWidget {
const XXX({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
navigatorObservers: [TUILiveKitNavigatorObserver.instance],
localizationsDelegates: [
...LiveKitLocalizations.localizationsDelegates
...BarrageLocalizations.localizationsDelegates,
...GiftLocalizations.localizationsDelegates],
......
);
}
}

完成登录

集成完成后,您需要通过调用 TUICore 接口完成登录。这是使用 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,仅包含英文字母、数字、连字符和下划线。
userSig
String
用于腾讯云鉴权的票据。请注意:
开发环境:您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境:为了防止密钥泄露,请务必采用服务端生成 UserSig 的方式。详细信息请参见 服务端生成 UserSig
更多信息请参见 如何计算及使用 UserSig

接入直播功能

恭喜您,现在您已经成功集成了视频直播组件并完成了登录。接下来,您可以开始接入 主播开播观众观看 功能或实现其他直播功能。