帮你快速理解、总结文档立即下载
文档中心>实时音视频>直播与语聊 SDK>准备工作>准备工作(Flutter 桌面端)

准备工作(Flutter 桌面端)

最近更新时间:2026-09-30 17:11:01
我的收藏
本章节主要指导您完成 TUILiveKit Flutter PC 版 UI 组件库接入的环境配置与代码集成。

功能预览

TUILiveKit PC 版是桌面端直播推流助手组件,集成后可快速实现主播开播场景。
开播前
直播中


说明:
桌面端组件仅包含主播推流侧能力,观众观看等能力请使用移动端组件,参考 Flutter 移动端文档。

准备工作

开通服务

在使用 TUILiveKit 前,请先参考 开通服务,领取 TUILiveKit 体验版或开通大规模直播版套餐。

环境要求

Flutter
Flutter 3.29 或更高版本。
Dart 3.7 或更高版本。
macOS 平台
macOS 12.0 或更高版本。
Xcode 13.0 或更高版本。
已安装 CocoaPods 环境。如果您尚未安装,请 点击查看 安装步骤。
Windows 平台
Windows 10 或更高版本。
Visual Studio 2022,并安装“使用 C++ 的桌面开发”工作负载。

代码集成

步骤1:获取组件

TUILiveKit PC 版组件(tui_live_kit)与引擎插件(atomic_x_core)通过 GitHub 仓库统一分发,请先克隆仓库:
git clone https://github.com/Tencent-RTC/TUIKit_Flutter.git
在您工程的 pubspec.yaml 中以 path 方式引用组件:

dependencies:
flutter:
sdk: flutter

# 直播 UI 组件库(桌面端推流助手)
tui_live_kit:
path: <仓库本地路径>/live_pc/tui_live_kit

配置完成后执行以下命令安装依赖:
flutter pub get

步骤2:工程配置

macOS
1. 配置 App Sandbox 权限。直播推流需要使用摄像头、麦克风与网络,请在工程的 macos/Runner/DebugProfile.entitlements 和 macos/Runner/Release.entitlements 中添加以下权限:
<key>com.apple.security.app-sandbox</key>
<true/>
<!-- 网络访问(RTC/IM 连接) -->
<key>com.apple.security.network.client</key>
<true/>
<!-- 摄像头 / 麦克风采集 -->
<key>com.apple.security.device.camera</key>
<true/>
<key>com.apple.security.device.audio-input</key>
<true/>
<!-- 读取用户通过文件选择器选择的图片/视频素材 -->
<key>com.apple.security.files.user-selected.read-only</key>
<true/>
2. 配置摄像头与麦克风用途描述。在 macos/Runner/Info.plist 的第一级 <dict> 中添加以下两项,分别对应摄像头和麦克风在系统授权弹窗中的提示信息:
<key>NSCameraUsageDescription</key>
<string>直播需要使用您的相机权限,开启后观众才能看到画面</string>
<key>NSMicrophoneUsageDescription</key>
<string>直播需要使用您的麦克风权限,开启后观众才能听到声音</string>
3. 确认系统版本要求。组件要求 macOS 12.0 或更高版本,请确认 macos/Podfile 中 platform :osx, '12.0',且工程的 MACOSX_DEPLOYMENT_TARGET 不低于 12.0。

步骤3:配置多语言功能

为了确保 TUILiveKit 界面文案能够根据系统语言正确显示,需要在 Flutter 应用框架中添加本地化代理:
import 'package:flutter/material.dart';
import 'package:tui_live_kit/l10n/live_kit_localizations.dart';

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

@override
Widget build(BuildContext context) {
return MaterialApp(
// 添加本地化代理,支持多语言文案显示
localizationsDelegates: LiveKitLocalizations.localizationsDelegates,
supportedLocales: LiveKitLocalizations.supportedLocales,

// 您 APP 的其他配置
// ......
);
}
}
配置后,组件界面文案将根据系统语言正确显示。您也可以通过 LanguageStore.locale 在应用内提供语言切换入口。

完成登录

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

void login() async {
final result = await LoginStore.shared.login(
sdkAppID: 1400000001, // 请替换为开通服务控制台的 SDKAppID
userID: "denny", // 请替换为您的 UserID
userSig: "xxxxxxxxxxx", // 您可以在控制台中计算一个 UserSig 并填在这个位置
);
if (result.isSuccess) {
// 登录成功
} else {
// 登录失败:result.errorCode / result.errorMessage
}
}
登录接口参数说明:
参数
类型
说明
SDKAppID
Int
从 控制台 获取,中国站通常是以 140 或 160 开头的10位整数。
userID
String
当前用户的唯一 ID,仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突,请勿使用 1、123 等简单 ID。
userSig
String
用于腾讯云鉴权的票据。请注意:
开发环境:您可以采用本地 GenerateTestUserSig.genTestUserSig 函数生成 userSig 或者通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境:为了防止密钥泄露,请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。

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

LoginStore 提供了登录状态回调机制,方便您处理可能出现的登录异常情况,主要包括被踢下线和签名过期这两种异常状态的回调:
被踢下线:用户在线情况下被踢,SDK 会通过 loginEventStream 下发 LoginEvent.kickedOffline 事件通知给您,此时可以在 UI 提示用户,并调用 LoginStore.shared.login 重新登录。
签名过期:用户在线期间收到 LoginEvent.loginExpired 事件,说明您之前给该用户签发的 userSig 已经过期了,这个时候如果当前用户在您后台的登录态依然有效,您可以让您的 App 向您的后台请求新的 userSig,并调用 LoginStore.shared.login 续签登录态。
import 'dart:async';
import 'package:atomic_x_core/api/login/login_store.dart';

// 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 与自己的登录业务关联。

macOS 运行时摄像头/麦克风无法开启?

请参考 工程配置 中 macOS 部分:确认 entitlements 中已开启摄像头(com.apple.security.device.camera)、麦克风(com.apple.security.device.audio-input)权限,且 Info.plist 中已配置对应的用途描述。