本文将指导您如何在 10 分钟内快速跑通 TUILiveKit 的 Flutter Demo,体验包含完整 UI 界面的视频直播/语音聊天室功能。
前提条件
开通服务
SDKAppID:应用标识(必填),腾讯云基于 SDKAppID 完成计费统计。
SDKSecretKey:应用密钥,用于初始化配置文件的密钥信息。
环境准备
在开始运行 Demo 之前,请确保您的开发环境满足以下要求:
平台 | 描述 |
Flutter | Flutter:需使用 3.29.3 或更高版本 Dart:需使用 3.7.2 或更高的版本 |
Android | Android Studio: 需使用 Android Studio 3.5 或更高版本。 Android 系统:支持 Android 5.0 或 更高版本的设备。 Java 版本:需使用 JDK 17。 |
iOS | Xcode:需使用 Xcode 15 或更高版本。 iOS 系统:支持 iOS 13.0 或更高版本的设备。 CocoaPods 环境:已安装 CocoaPods 环境。如果您尚未安装,请参见 CocoaPods 官网安装。 |
IDE 环境配置
为帮助您更高效开发 Flutter 应用,请使用 Flutter 官方推荐的 Visual Studio Code 作为开发工具,可参考文档 Visual Studio Code 完成 Flutter 环境配置。
操作步骤
获取 Demo
1. 下载源码:从 GitHub 下载 TUIKit_Flutter 源码,或者直接在命令行运行以下命令:
git clone https://github.com/Tencent-RTC/TUIKit_Flutter.git
2. 安装依赖:使用 终端(Terminal) 工具进入 example 工程的
pubspec.yaml 所在目录,并执行 flutter pub get 命令安装依赖:# example 工程 pubspec.yaml 文件位于 TUIKit_Flutter/application 目录下cd TUIKit_Flutter/application# 安装依赖flutter pub get
3. 安装 iOS 依赖(仅 iOS 需要):使用 终端(Terminal) 工具进入 Podfile的 所在目录,并执行
pod install 命令安装依赖:# ios 工程 Podfile 文件位于 application/ios 目录下cd application/ios# 安装依赖pod install --repo-update
4. 清理 Gradle 全局配置(仅 Android 需要):如果您本地存在
~/.gradle/init.gradle,运行如下命令:rm -f ~/.gradle/init.gradle
说明:
如果您本地存在 Gradle 全局配置文件
~/.gradle/init.gradle ,且该文件里配置有 allprojects.repositories ,需要进行以下操作:方案一(推荐):删除
allprojects.repositories 相关配置。方案二:直接删除
~/.gradle/init.gradle 文件。5. 配置 JDK 17(仅 Android 需要):在
application/android 目录下的gradle.properties里增加一条 org.gradle.java.home ,用来配置 JDK 17 路径,请替换成您实际的 JDK 17 的完整路径。参考如下:# 请替换为您本地 JDK 17 的真实完整路径org.gradle.java.home=xx/Java/JavaVirtualMachines/jdk-17.0.6.jdk/Contents/Home
6. 执行以上步骤后, 您可使用 Visual Studio Code 打开
TUIKit_Flutter/application 目录。配置 Demo
1. 配置
sdkAppId 和 secretKey:在 application 工程中,将获取的 sdkAppId 和 secretKey 填入application/lib/debug/generate_test_user_sig.dart 文件:
注意:
本文的 Demo 示例中通过在客户端代码中配置
secretKey 进行鉴权,但 secretKey 很容易被反编译逆向破解,一旦密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。 在正式的生产环境中,建议在您的服务端生成
UserSig,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 服务端生成 UserSig。2. 配置苹果开发者签名(仅 iOS 需要):在项目 TARGETS 下的 Signing & Capabilities 界面勾选 Automatically manage signing,配置您的苹果开发者账号和 Bundle Identifier:

编译并运行 Demo
直播场景通常会使用到摄像头、麦克风设备,因此建议您使用真机调试和运行 Demo。
选择目标设备
当一个 Flutter 项目在 VS Code 中打开,您会在状态栏看到一些 Flutter 特有项,包括 Flutter SDK 版本和设备名称(或者无设备信息):

说明:
如果您没看到 Flutter 版本号或者设备信息,您的项目可能不被识别为一个 Flutter 项目。请确认 VS Code Workspace Folder 的目录中是否含有
pubspec.yaml。如果状态栏显示无设备,表明 Flutter 没有发现任何已连接的 iOS、Android 或者模拟器。您需要连接设备或者启动模拟器。
Flutter 扩展会自动选择上次连接的设备。然而,如果您有多个设备/模拟器连接,点击状态栏的 device 查看屏幕顶部的选择列表。选择您要用来运行或调试的设备。
运行

提示:
为了体验完整的直播流程,建议您将 Demo 分别在两台设备上运行并登录两个不同的用户(例如,一台设备作为主播,一台设备作为观众)。
1. 登录 & 注册
运行成功后,您需要先进行登录:在
用户id 处输入您的 UserID,如果该 UserID 未曾被使用,您将进入注册界面,可设置头像和昵称。注意:
建议设置具有高辨识度的 UserID,避免使用“1”、“123”、“111”等简单字符串,以防被占用。
主播端(mike) | | 观众端(vince) | |
![]() | ![]() | ![]() | ![]() |
2. 视频直播
请点击首页的 直播功能区 进入直播页面:
直播列表 | 主播开播前预览 | 主播开始视频直播 | 观众观看直播 |
![]() | ![]() | ![]() | ![]() |
3. 语音聊天室
请点击首页的 直播功能区 进入直播页面:
直播列表 | 主播开播前预览 | 主播开始语聊直播 | 观众观看语聊房 |
![]() | ![]() | ![]() | ![]() |
下一步
Demo 跑通后,您可以根据业务需求,参考以下集成指引将对应功能集成到您的项目中:
常见问题
CocoaPods 安装方式?
使用 gem 安装 CocoaPods:在终端中执行
sudo gem install cocoapods 命令进行安装。提示:
sudo gem install cocoapods 安装过程中可能需要输入电脑密码,按提示输入管理员密码即可。pod install 安装依赖速度慢或失败怎么办?
如果您运行
pod install 命令后,遇到安装依赖速度较慢、链接失败、下载超时等情况时,可尝试移除官方源,添加国内镜像源,然后再重试:# 移除官方源gem sources --remove https://rubygems.org/# 添加国内镜像源gem sources --add https://gems.ruby-china.com/
真机调试?
真机运行时需要开启开发者模式。
iOS 开启方式:将 iOS 设备连接至电脑,在设备上选择设置 > 隐私与安全性 > 开发者模式,打开开发者模式。
Android 开启方式:在设置中找到版本号进行多次点击来开启开发者模式。如果实在找不到,还可以去手机的官方网站查询或者在网上搜索具体的教程。
运行 Demo 提示签名错误或登录失败?
请检查您在
application/lib/debug/generate_test_user_sig.dart 文件中填写的 sdkAppId 和 secretKey 是否正确,确保它们是您在 腾讯云控制台应用管理 页面获取到的密钥。运行报错 Error resolving plugin [id: 'dev.flutter.flutter-plugin-loader', version: '1.0.0']
如果运行遇到如下报错信息:
* What went wrong:Error resolving plugin [id: 'dev.flutter.flutter-plugin-loader', version: '1.0.0']> Build was configured to prefer settings repositories over project repositories but repository 'xxx' was added by settings file 'settings.gradle'
联系我们
售前咨询
当您需要购买咨询时,您可以直接通过 售前咨询 进行提问,会有专属客户经理在线为您解答,为您提供专业的上云方案。同时,您也可以直接致电销售人员,咨询热线:4009100100转1(工作日9:00 - 18:00)。
售后支持
当您遇到问题需要处理时,您可以直接通过 售后支持 进行提问,腾讯云工程师7 × 24小时在线为您提供服务。同时,您也可以直接致电客服人员,寻求相应的帮助,客服咨询:4009100100(7 × 24小时)。











