文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>视频直播>准备工作>准备工作（Flutter）

准备工作（Flutter）

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

我的收藏

本页目录：

功能预览

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

步骤 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 {
      ......
      // 开启 Multidex 支持
      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

为了确保 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的其他配置
      ......
    );
  }
}

完成登录

代码集成完成后，您需要完成登录，这是使用 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
从 控制台获取，国内站通常是以 140 或 160 开头的 10 位整数。
userID
String
当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，请勿使用 1、123 等简单 ID。
userSig
String
用于腾讯云鉴权的票据。请注意：
开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。

下一步

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

常见问题

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

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

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

请参考 工程配置 中 iOS 第一步：在Xcode中，选择项目 > Build Settings > Deployment，将其下的 Strip Style 设置为Non-Global Symbols ，以保留所需要的全局符号信息。

中国站
目录