成功运行后，你将体验到：
·主播端： 包含专业混流布局、设备控制、实时互动的完整开播界面。
·观众端： 支持高清观看、弹幕聊天，并深度适配 H5 端的观看界面。
注意：说明：
注意：推荐使用更高效的 AI 集成助手
注意：我们为你提供了全新的 AI 集成方式，如果你不需要完整的 Demo 工程，推荐你使用更高效的 AI 集成助手，只需要描述你的需求，即可自动生成集成代码，大幅提升开发效率。
注意：点击这里，立即体验 AI 集成
一、功能展示
| PC 浏览器 | 移动端 H5 |
| | |
二、快速开始
本示例项目已完成初始化配置，可以帮你快速体验完整效果，非常适合作为二次开发的脚手架。只需简单三步即可跑通：
三、前提条件
请参考 开通服务 领取 TUILiveKit 体验版，并在 应用管理 页面获取以下信息:
·SDKAppID：应用标识，腾讯云基于 SDKAppID 完成计费统计。
·SDKSecretKey：应用密钥，用于初始化配置文件的密钥信息。
四、环境准备
·Node.js：≥ 18.19.1 (推荐使用 LTS 版本)。
·浏览器：推荐使用最新版 Chrome，或其他支持 WebRTC API 的现代浏览器。
·媒体设备：建议配备摄像头、麦克风和扬声器。缺少相应设备时仍可开播或观看，但对应音视频能力不可用。
五、步骤1：获取代码并安装依赖
你可以从 GitHub 下载源码，或直接在终端运行以下命令
git clone https://github.com/Tencent-RTC/TUILiveKit.gitcd TUILiveKit/Web/web-vite-vue3npm install
六、步骤2：配置应用密钥
在启动前，请找到并打开以下配置文件：TUILiveKit/Web/web-vite-vue3/src/config/basic-info-config.js。将你通过 开通服务 获取的 SDKAppID 和 SDKSecretKey 填入对应位置：
// 请将以下代码中的值替换为你自己的 SDKAppID 和 SDKSecretKeyexport const SDKAPPID = 0; // 替换为你获取到的实际 SDKAppIDexport const SDKSECRETKEY = ''; // 填入你的 SDKSecretKey
七、步骤3：启动项目
上述配置完成后，运行以下命令启动服务。执行完毕后，在浏览器打开 http://localhost:5173/ 即可预览效果。
npm run dev
八、核心功能展示
TUILiveKit 示例项目为你提供了一套完整的在线直播解决方案。以下是 TUILiveKit (Vue3) 支持的核心直播能力：
九、直播列表
应用启动后进入登录页，输入任意用户 ID（例如 host）登录。首次运行因无人开播列表为空，点击右上角开始直播即可进入开播页。
十、开始直播
进入开播页后，只需三步即可开启推流：
1. 添加画面源（左侧）：支持添加摄像头、屏幕/窗口分享或本地图片。
2. 调整排版（中间）：可对画面源进行拖拽、缩放及图层调整。
3. 互动与控制（右侧/下方）：支持收发消息、音视频设置及连麦管理等。
配置完成后，点击下方开始直播即可推流。
十一、观看直播
请使用不同的浏览器或无痕模式，以新的用户 ID（如 guest）登录。从列表中找到刚刚开播的直播间进入，即可体验观看视频、关注主播、发送弹幕及查看观众等功能。
注意：说明：
注意：建议在多个浏览器无痕窗口中，使用不同的 userId（例如 viewer01, viewer02）登录，模拟真实的多人互动场景，完整体验同时发送弹幕、关注主播和申请连麦的效果。
十二、下一步
至此，你已成功跑通了包含完整功能的在线直播 Demo。如果你希望将特定的功能模块单独剥离，并无缝嵌入到你现有的业务项目中，请参考以下模块化集成文档：
| 页面 | 文档链接 |
| 主播开播 | 主播开播页 |
| 观众观看 | 手机浏览器观看、桌面浏览器观看 |
| 直播列表 | 直播列表页 |
十三、售前咨询
当你需要购买咨询时，你可以直接通过 售前咨询 进行提问，会有专属客户经理在线为你解答，为你提供专业的上云方案。同时，你也可以直接致电销售人员，咨询热线：4009100100转1（工作日9:00 – 18:00）。
十四、售后支持
当你遇到问题需要处理时，你可以直接通过 售后支持 进行提问，腾讯云工程师7 × 24小时在线为你提供服务。同时，你也可以直接致电客服人员，寻求相应的帮助，客服咨询：4009100100（7 × 24小时）。