Web
本文档主要介绍如何快速跑通 TUILiveKit 示例工程,体验高质量在线直播。跟随本文档,您可以在 10 分钟内跑通 Demo,并开启一场属于您自己的直播。
![]() | ![]() |
环境准备
Node.js 版本:Node.js ≥ 16.19.1(推荐使用官方 LTS 版本,npm 版本请与 node 版本匹配)。
现代浏览器,支持 WebRTC APIs。
下载 Demo
1. 打开终端复制输入示例命令克隆仓库。
git clone https://github.com/Tencent-RTC/TUILiveKit.git
2. 安装依赖
cd TUILiveKit/Web/web-vite-vue3
npm install
配置 Demo
1. 激活 TUILiveKit 服务。获取 SDKAppID 和 SDKSecretKey。
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ed9fe73bb78b11efb5b052540055f650.png)
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ed9fe73bb78b11efb5b052540055f650.png)
2. 打开 TUILiveKit/Web/web-vite-vue3/src/config/basic-info-config.js 文件,并输入激活服务时获得的 SDKAppID 和 SDKSecretKey:
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/841f8104b86011ef9448525400fdb830.png)
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/841f8104b86011ef9448525400fdb830.png)
跑通 Demo
1. 在终端中输入命令,运行 Demo。
#cd TUILiveKit/Web/web-vite-vue3npm run dev
注意:
2. 自动打开浏览器窗口。
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef01b685b78b11efa1ff525400bdab9d.png)
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef01b685b78b11efa1ff525400bdab9d.png)
3. 点击新建直播房间即可开启您的第一场直播啦。
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef6b7e51b78b11ef86025254002693fd.png)
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef6b7e51b78b11ef86025254002693fd.png)
4. 点击左上角分享按钮获取房间链接,观众可在浏览器输入链接进入直播间。
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef0fa912b78b11ef916f525400f69702.png)
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef0fa912b78b11ef916f525400f69702.png)
5. 观众在浏览器输入链接,没有登录信息会跳转至登录页。
6. 登录成功后会自动跳转至直播页。
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef3f2b45b78b11efbb92525400329841.png)
![](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/ef3f2b45b78b11efbb92525400329841.png)
其他文档
交流与反馈
如果有任何需要或者反馈,您可以联系:info_rtc@tencent.com。