uni-app 客户端

最近更新时间:2025-09-08 22:59:42

我的收藏
本文将为您介绍如何快速跑通视频直播 Demo。跟随本文档,您可以在 10 分钟内跑通 Demo,并最终体验一个包含完备 UI 界面的视频直播功能。
主播直播页
连麦管理页
观众观看页




环境准备

HBuilderX:HBuilderX 是 uni-app 官方的集成开发环境(IDE),我们需要用它来导入、配置和运行我们的 Demo。
两个移动设备: Android 5.0 以上的设备 / iOS 13.0 及以上设备。
说明:
HBuilderX 4.64 和 4.65 版本对 UTS 插件打包存在已知兼容性问题,建议使用 4.75 或更高版本。

操作步骤

步骤1 : 下载 Demo

1. 下载源码。
2. 使用 HBuilderX 导入 TUIKit_uni-app
在 HBuilderX 顶部菜单栏选择文件 > 导入 > 从本地目录导入,然后精确选择刚才克隆的 TUIKit_uni-app文件夹,单击导入。


步骤2 : 配置 Demo

1. 请参见 开通服务(TUILiveKit),领取体验版或者开通付费版。成功后即可获得14天的体验版,可免费体验 TUILiveKit 的全部功能,并获取 SDKAppID 和 SDKSecretKey 。
说明:
SDKAppID 和 SDKSecretKey 是什么?
SDKAppID:应用的唯一标识,相当于您在腾讯云音视频服务中的“身份证号”。
SDKSecretKey:用于签发 UserSig(用户签名)的密钥,能确保只有您的应用才能使用腾讯云的服务,防止被盗用。请务必妥善保管,不要泄露。
2. 打开 TUIKit_uni-app/debug/GenerateTestUserSig.js 文件,将上一步获取到的 SDKAppIDSDKSecretKey 填入其中:
// Your SDKAppID
let SDKAppID = 0;
// Your SDKSECRETKEY
let SDKSECRETKEY = "";


步骤3 : 跑通 Demo

1. 制作自定义调试基座
制作自定义调试基座,在 HBuilderX 顶部菜单栏选择运行 > 运行到手机或模拟器 > 制作自定义调试基座。HBuilderX 会开始打包,这需要一些时间。

说明:
为什么要制作自定义调试基座?
因为我们的直播 Demo 使用了原生的音视频能力(通过 UTS 插件实现),这超出了 HBuilderX 标准基座(一个通用的 App 壳子)的功能范围。因此,我们需要制作一个包含了这些原生插件的“专属”运行环境,这就是“自定义调试基座”。
2. 使用自定义基座运行项目
使用自定义基座运行项目,基座制作成功后,HBuilderX 控制台会有提示。然后,再次单击顶部菜单 “运行” -> “运行到手机或模拟器”,在弹出的设备选择窗口中,务必勾选“使用自定义调试基座”,然后选择您的真机设备并单击运行


步骤4:开始直播

1. 登录/注册 userID(由您定义)。
注意:
为了使您可以体验完整的视频直播流程,请将 Demo 分别在两台设备上登录两个用户,一方作为主播,一方作为观众;尽量避免使您的 UserID 被设置成“1”、“123”、“111”等简单字符串,由于 LiveKit 不支持同一个 UserID 多设备登录,所以在多人协作开发时,形如 “1”、“123”、“111” 这样的 UserID 很容易被您的同事占用,导致登录失败,因此我们建议您在调试的时候设置一些辨识度高的 UserID。
2. 主播开启直播。
单击主页底部中间的按钮,即可进入开播预览页面,再单击开始直播按钮即可开始直播了。
直播列表页
主播预览页
主播开播页



3. 观众加入直播间。
您可以在另外一台设备上,使用不同的 userId 登录作为观众进行体验,您只单击直播列表里任意一个房间,也可以通过输入 liveId 进入特定直播间,即可观看直播,您也可以在直播间跟主播进行连麦、赠送礼物,发送互动消息等等。
直播列表页
礼物选择页
观众观看页