Web
Download
Focus Mode
Font Size
本文对 TUILiveKit Demo 如何进行快速跑通进行了详细的介绍。跟随指引您可以在 10 分钟内跑通 Demo，并体验到一个包含完备 UI 界面的在线直播 Demo。您也可以根据自己的需求按照不同页面中的自由定制指引对页面的样式，布局以及功能项进行深度的定制。
快速体验
您可以直接通过以下方式体验 Live 的各项功能。
前提条件
开通服务
SDKAppID：应用标识（必填），腾讯云基于 sdkAppId 完成计费统计。SDKSecretKey：应用密钥，用于初始化配置文件的密钥信息。环境准备
Node.js：≥ 18.19.1 (推荐使用官方 LTS 版本)。
Vue：≥ 3.4.21。
现代浏览器：支持 WebRTC APIs 的现代浏览器。
设备：摄像头、麦克风、扬声器。
操作步骤
获取 Demo
1. 从 GitHub 下载 TUILiveKit Demo 源码，或者直接在命令行运行以下命令：
git clone https://github.com/Tencent-RTC/TUILiveKit.git
2. 安装依赖
cd TUILiveKit/Web/web-vite-vue3npm install
配置 Demo
您需要参考本文的前提条件，在 Demo 中打开
TUILiveKit/Web/web-vite-vue3/src/config/basic-info-config.js 文件，输入准备工作中激活服务时获得的 SDKAppID 和 SDKSecretKey：
编译并运行 Demo
npm run dev
体验基础功能
1. 主播推流
若您需要作为主播身份进行推流操作，此时您需要将 Demo 切换到推流页面，只需要修改导航栏的 URL 地址为
http://localhost:5173/#/live-pusher，您即可进入推流页面。推流页面支持推横屏或者竖屏流功能。另外，左侧素材添加区域支持添加媒体源到页面中，同时您也可以点击下方的连观众按钮，接受或者拒绝观众的连麦申请。
2. 观众观看
首次运行项目后，您需要输入对应的 userId 进行身份标识记录，后续再次运行项目就会直接显示直播列表页面，如图所示为直播列表页面。
您可通过点击对应直播封面进入直播间。直播间内可以观看视频、关注当前主播、发送弹幕、查看观众列表等操作。
说明：
为了更好地体验直播功能的完整性，建议您使用不同的
userId 来模拟多个观众：可以在不同浏览器或浏览器无痕模式中打开多个观看页面使用不同的
userId（例如：viewer001、viewer002、viewer003等）；每个 userId 代表一个独立的观众身份，可以体验不同视角的观看效果；
不同观众可以同时进行发送弹幕、关注主播、申请连麦等操作，实现真实的多人互动场景；
定制指引
您可以直接修改我们提供的 UI 源代码，以便根据需求调整 TUILiveKit Demo 的用户界面，在
TUILiveKit/Web/web-vite-vue3下执行如下命令。mkdir -p ./src/TUILiveKit && rsync -av --exclude={'node_modules','package.json','excluded-list.txt'} ./node_modules/@tencentcloud/livekit-web-vue3/src/* ./src/TUILiveKit
xcopy .\\node_modules\\@tencentcloud\\livekit-web-vue3\\src\\* .\\src\\TUILiveKit /i /e /exclude:.\\node_modules\\@tencentcloud\\livekit-web-vue3\\excluded-list.txt
注意：
通过上述脚本源码导出后，在指定的 src 目录中会新增 livekit-web-vue3 源码。此时，您需要手动将 Web/web-vite-vue3 项目下所有 livekit-web-vue3 组件的引用从 npm 包地址更改为 livekit-web-vue3 源码的相对路径地址。另外，若您需要参考 tuikit-atomicx-vue3 源码，请至：GitHub。
另外，若您需要在已有项目中选择性集成某页面，或者需要对页面进行 UI 定制，您可以参考如下链接到各自页面文档中根据指引进行 UI 自由定制。
常见问题
进房后报错，错误码为“-3301”，报错信息“Services are not available in your region.”
联系我们
Help and Support
Was this page helpful?
You can also Contact sales or Submit a Ticket for help.
Help us improve! Rate your documentation experience in 5 mins.
Feedback