Flutter

最近更新时间:2025-11-21 14:15:32

我的收藏
本文将指导您如何在 10 分钟内快速跑通 TUILiveKit 的 Flutter Demo,体验包含完整 UI 界面的视频直播/语音聊天室功能。

前提条件

开通服务

请参考 开通服务领取 TUILiveKit 体验版,并在 应用管理 页面获取以下信息:
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 工程中,将获取的 SDKAppIDSDKSecretKey 填入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 文件中填写的 SDKAppIDSDKSecretKey 是否正确,确保它们是您在腾讯云控制台应用管理页面获取到的密钥。

联系我们

售前咨询

当您需要购买咨询时,您可以直接通过 售前咨询 进行提问,会有专属客户经理在线为您解答,为您提供专业的上云方案。同时,您也可以直接致电销售人员,咨询热线:4009100100转1(工作日9:00 - 18:00)。

售后支持

当您遇到问题需要处理时,您可以直接通过 售后支持 进行提问,腾讯云工程师7 × 24小时在线为您提供服务。同时,您也可以直接致电客服人员,寻求相应的帮助,客服咨询:4009100100(7 × 24小时)。