TUILiveKit 产品动态
云直播推拉流 SDK 产品动态
Flutter
聚焦模式
字号
本文将指导您如何在 10 分钟内快速跑通 TUILiveKit 的 Flutter Demo，体验包含完整 UI 界面的视频直播/语音聊天室功能。
前提条件
开通服务
SDKAppID：应用标识（必填），腾讯云基于 SDKAppID 完成计费统计。SDKSecretKey：应用密钥，用于初始化配置文件的密钥信息。环境准备
在开始运行 Demo 之前，请确保您的开发环境满足以下要求：
平台 | 描述 |
Flutter | Flutter：需使用 3.27.4 或更高版本 Dart：需使用 3.6.2 或更高的版本 |
Android | Android Studio： 需使用 Android Studio 3.5 或更高版本。 Android 系统：支持 Android 5.0 或 更高版本的设备。 |
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
执行以上步骤后， 您可使用 Visual Studio Code 打开 TUIKit_Flutter/application 目录。
配置 Demo
1. 配置
SDKAppID 和 SDKSecretKey：在 livekit 工程中，将获取的 SDKAppID 和 SDKSecretKey 填入application/lib/debug/generate_test_user_sig.dart文件：
说明：
本文的 Demo 示例中通过在客户端代码中配置
SECRETKEY 进行鉴权，但 SECRETKEY 很容易被反编译逆向破解，一旦密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。 在正式的生产环境中，建议在您的服务端生成
UserSig，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 服务端生成 UserSig。2. 配置苹果开发者签名：在项目 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） | |
 |  |  |  |
注意：
尽量避免使您的 UserID 被设置成“1”、“123”、“111”等简单字符串，由于 TRTC 不支持同一个 UserID 多端登录，所以在多人协作开发时，形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用，导致登录失败，因此我们建议您在调试的时候设置一些辨识度高的 UserID。
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 和 SDKSecretKey 是否正确，确保它们是您在 Tencent RTC 控制台 > 应用管理 页面获取到的密钥。登录时报错，错误码为“9519”或“9523”，报错信息“The request packets timed out while waiting to be sent...”？
如果您收到该错误码信息，请先尝试更换当前网络环境后重试。
如更换网络环境后依旧无效，请 联系我们 获取支持。
进房后报错，错误码为“-3301”，报错信息“Services are not available in your region.”？
联系我们
文档反馈