即时通信 IM 准备工作（Flutter）

本章节主要指导你完成 TUILiveKit UI 组件库接入的环境配置。

注意：集成方案说明：

注意：这篇档提供的是 UI 组件库接入方案，包含视频直播、语聊房的完整 UI 界面与全套业务逻辑。如果你有极高的 UI 定制需求，需要采用 无 UI（Core SDK） 集成方式，请直接参考 Core SDK 快速开始。

一、功能预览

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 16 或更高版本。

·iOS 14.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：工程配置

AndroidiOS

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 里设置 MainActivity 的 android:supportsPictureInPicture 为 true：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <application> <activity android:name=".MainActivity" android:supportsPictureInPicture="true" </activity> </application></manifest>

4. 对齐插件版本。

在 android/app/settings.gradle 里，配置相关插件版本。

plugins { id "dev.flutter.flutter-plugin-loader" version "1.0.0" id "com.android.application" version "8.2.1" apply false id "org.jetbrains.kotlin.android" version "2.1.10" apply false}

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 endend3. 由于 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 endend4. 开启系统画中画特性。请在 Xcode 工程配置里，开启画中画：

八、步骤3：配置页面导航和多语言功能

为了确保 TUILiveKit 能够正常管理页面导航和显示多语言界面，需要在 Flutter 应用框架中进行以下配置：

·在 navigatorObservers 中添加 TUILiveKitNavigatorObserver.instance，用于监听页面路由变化和管理组件生命周期。

·在 localizationsDelegates 中添加相关本地化代理，确保界面文案能够根据系统语言正确显示。

以 MaterialApp 框架为例，示例代码如下：

import 'package:flutter/material.dart';import 'package:tencent_live_uikit/tencent_live_uikit.dart';import 'package:tuikit_atomic_x/atomicx.dart';// 你自己的APP主类class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState();}class _MyAppState extends State<MyApp> { late final ThemeState _themeState; @override void initState() { super.initState(); _themeState = ThemeState(); _themeState.setThemeMode(ThemeType.dark); } @override Widget build(BuildContext context) { return ComponentTheme( themeState: _themeState, child: MaterialApp( // 添加 TUILiveKit 导航观察者，用于监听页面路由变化和生命周期管理 navigatorObservers: [TUILiveKitNavigatorObserver.instance], // 添加本地化代理，支持多语言文案显示 localizationsDelegates: [ …LiveKitLocalizations.localizationsDelegates, …BarrageLocalizations.localizationsDelegates, …GiftLocalizations.localizationsDelegates ], // 你APP的其他配置 // …… ), ); }}

配置后，组件将支持多语言并能正确处理页面跳转。

九、完成登录

代码集成完成后，你需要完成登录。这是使用 TUILiveKit 的关键步骤，因为只有在登录成功后才能正常使用 TUILiveKit 的各项功能，故请你耐心检查相关参数是否配置正确：

注意：说明：

注意：在实际项目场景下，强烈推荐你在完成自己的用户身份验证等相关登录操作后，再调用 TUILiveKit 的登录服务。这样可以避免因过早调用登录服务，导致业务逻辑混乱或数据不一致的问题，同时也能更好地适配你项目中现有的用户管理和权限控制体系。

import 'package:tencent_live_uikit/common/index.dart';import 'package:atomic_x_core/atomicxcore.dart';……void login() async { final result = await LoginStore.shared.login( sdkAppID: 1400000001, // 请替换为开通服务控制台的 SDKAppID userID: "denny", // 请替换为你的 UserID userSig: "xxxxxxxxxxx", // 你可以在控制台中计算一个 UserSig 并填在这个位置 ); if (result.isSuccess) { LiveKitLogger.info("LoginStore login success"); } else { LiveKitLogger.error("LoginStore login fail, {code:${result.errorCode}, message:${result.errorMessage}"); }}

登录接口参数说明：

十、登录异常状态处理【可选】

LoginStore 提供了登录状态回调机制，方便你处理可能出现的登录异常情况，主要包括 “被踢下线” 和 “签名过期” 这两种异常状态的回调：

·被踢下线：用户在线情况下被踢， SDK 会通过 onKickedOffline 回调通知给你，此时可以在 UI 提示用户，并调用 LoginStore.shared.login 重新登录。

·签名过期：用户在线期间收到 onUserSigExpired 回调，说明你之前给该用户签发的 userSig 已经过期了，这个时候如果当前用户在你后台的登录态依然有效，你可以让你的 app 向你的后台请求新的 userSig，并调用 LoginStore.shared.login 续签登录态。

Dartimport 'dart:async';// YourLoginService 代表你负责登录的业务模块class YourLoginService { late final StreamSubscription<LoginEvent> _loginEventSubscription; void subscribeLoginStatus() { _loginEventSubscription = LoginStore.shared.loginEventStream.listen((loginEvent) { switch (loginEvent) { case LoginEvent.kickedOffline: // 用户被踢下线回调 // 你的业务代码：UI 交互提示用户，然后重新登录 break; case LoginEvent.loginExpired: // 用户签名过期回调 // 你的业务代码：如果当前用户在你后台的登录态依然有效， // 你可以让你的 app 向你的后台请求新的 userSig， // 并调用 LoginStore.shared.login 续签登录态。 break; default: break; } }); } void unsubscribeLoginStatus() { _loginEventSubscription.cancel(); }}

十一、下一步

恭喜你，现在你已经成功集成了直播组件并完成了登录。接下来，你可以根据你的业务场景实现主播开播、观众观看、直播列表等功能。

十二、关于每次进房是否需要登录？

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

十三、iOS release 下运行或打包后无法进入房间？

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