本文将指导您如何在 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 下载 TUILiveKit 源码,或者直接在命令行运行以下命令:
2. 安装依赖:使用 终端(Terminal) 工具进入 example 工程 pubspec.yaml 所在目录,并执行
flutter pub get 命令安装依赖:# example 工程 pubspec.yaml 文件位于 TUILiveKit/Flutter/livekit 目录下cd TUILiveKit/Flutter/livekit/example# 安装依赖flutter pub get
执行以上步骤后, 您可使用 Visual Studio Code 打开 TUILiveKit/Flutter/livekit 目录。
配置 Demo
1. 配置 SDKAppID 和 SDKSecretKey:在 livekit 工程中,将获取的 SDKAppID 和 SDKSecretKey 填入
example/lib/debug/generate_test_user_sig.dart文件:
注意:
本文的 Demo 示例中通过在客户端代码中配置
SECRETKEY 进行鉴权,但 SECRETKEY 很容易被反编译逆向破解,一旦密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通 Demo 和功能调试。 在正式的生产环境中,建议在您的服务端生成
UserSig,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 服务端生成 UserSig。配置苹果开发者签名:在项目 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 跑通后,您可以根据业务需求,参考以下集成指引将对应功能集成到您的项目中:
| 描述 | 集成指引 |
视频直播 | 支持超低延迟高清推流、多人连麦/PK、实时美颜、弹幕和礼物互动,轻松搭建互动视频直播场景。 |
常见问题
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 提示签名错误或登录失败?
请检查您在
example/lib/generate_test_user_sig.dart 文件中填写的 SDKAppID 和 SDKSecretKey 是否正确,确保它们是您在腾讯云控制台应用管理页面获取到的密钥。联系我们
售前咨询
当您需要购买咨询时,您可以直接通过 售前咨询 进行提问,会有专属客户经理在线为您解答,为您提供专业的上云方案。同时,您也可以直接致电销售人员,咨询热线:4009100100转1(工作日9:00 - 18:00)。
售后支持
当您遇到问题需要处理时,您可以直接通过 售后支持 进行提问,腾讯云工程师7 × 24小时在线为您提供服务。同时,您也可以直接致电客服人员,寻求相应的帮助,客服咨询:4009100100(7 × 24小时)。











