TUILiveKit 产品动态
云直播推拉流 SDK 产品动态
跑通 Demo
聚焦模式
字号
本文对 TUILiveKit Demo 如何进行快速跑通进行了详细的介绍。跟随指引您可以在 10 分钟内跑通 Demo，并体验到一个包含完备 UI 界面的在线直播 Demo。您也可以根据自己的需求按照不同页面中的自由定制指引对页面的样式，布局以及功能项进行深度的定制。
步骤1：环境准备
步骤2：下载 Demo
1. 从 GitHub 下载 TUILiveKit Demo 源码，或者直接在命令行运行以下命令：
git clone https://github.com/Tencent-RTC/TUILiveKit.git
2. 安装依赖
cd TUILiveKit/Web/web-vite-vue3npm install
步骤3：配置 Demo
您需要参见步骤1中的 准备工作，在 Demo 中打开
TUILiveKit/Web/web-vite-vue3/src/config/basic-info-config.js 文件，输入准备工作中激活服务时获得的 SDKAppID 和 SDKSecretKey：
步骤4：跑通 Demo
npm run dev
步骤5：开始直播
观众观看
首次运行项目后，您需要输入对应的 userId 进行身份标识记录，后续再次运行项目就会直接显示直播列表页面，如图所示为直播列表页面。
您可通过点击对应直播封面进入直播间。直播间内可以观看视频、关注当前主播、发送弹幕、查看观众列表等操作。
主播推流
若您需要作为主播身份进行推流操作，此时您需要将 Demo 切换为到推流页面，只需要修改导航栏的 URL 地址为
http://localhost:5173/#/live-pusher，您即可进入推流页面。推流页面支持推横屏或者竖屏流功能；另外，左侧素材添加区域支持添加媒体源到页面中；同时您也可以点击下方的连观众按钮，接受或者拒绝观众的连麦申请。
定制指引
若您需要在已有项目中选择性集成某页面，或者需要对页面进行 UI 定制，您可以参考如下链接到各自页面文档中根据指引进行 UI 自由定制。
文档反馈