TUILiveKit
**TUILiveKit** 是腾讯云推出的在线直播 UI 组件。本文将指导您如何快速地将 TUILiveKit 组件集成到项目中，从而为您的应用程序提供直播功能。
## 💻 环境准备
- Node.js 版本: Node.js ≥ 16.19.1（推荐使用官方 LTS 版本，npm 版本请与 node 版本匹配）。
- 现代浏览器，支持 [WebRTC APIs](https://cloud.tencent.com/document/product/647/17249)。
## 🔗 接口文档
详细的 API 列表请参考文档: [客户端 API（TUILiveKit）](https://cloud.tencent.com/document/product/647/81969)。
## 👋 使用
### 步骤一：安装依赖
```bash
npm install @tencentcloud/livekit-web-vue3 pinia --save
```
### 步骤二：项目工程配置
**注册 pinia**: TUILive 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia。项目入口文件为 src/main.ts 文件。
```js
// src/main.ts 文件
import { createPinia } from 'pinia';
const app = createApp(App);
// 注册 pinia
app.use(createPinia());
app.mount('#app')
```
### 步骤三：引入 TUILivekit 组件
```js
```
### 步骤四：登陆 TUILiveKit 组件
开启直播前需要调用 [login](https://cloud.tencent.com/document/product/647/81969#5a429689-e07a-4c01-bfc6-bfb67f7f5b7f) 接口进行登陆。获取 sdkAppId、userId、userSig 可参见 [开通服务](https://cloud.tencent.com/document/product/647/104842)。
```js
import { liveRoom } from '@tencentcloud/livekit-web-vue3';
liveRoom.login({
// 获取 sdkAppId 可参考文档开通服务部分，https://cloud.tencent.com/document/product/647/104842
sdkAppId: 0, // 用户在您业务中的唯一标示 Id
userId: '', // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
userSig: '',
});
```
### 步骤五：开启直播
主播可以通过调用 [start](https://cloud.tencent.com/document/product/647/81969#b0bf2a3b-428c-474f-9a0e-271c7c3b6bfd) 接口来开启直播，观众可以调用 [join](https://cloud.tencent.com/document/product/647/81969#b08d0951-c1f4-4db4-a84d-8414b853d0f1) 接口加入直播间。
```js
import { liveRoom } from '@tencentcloud/livekit-web-vue3';
const startLive = async () => {
await liveRoom.login({
sdkAppId: 0,
userId: '',
userSig: '',
});
await liveRoom.start('123456', {
roomName: 'TestRoom',
isOpenCamera: false,
isOpenMicrophone: false,
});
}
startLive()
```
### 步骤六：进入直播间
观众可以通过调用 [join](https://cloud.tencent.com/document/product/647/81969#b08d0951-c1f4-4db4-a84d-8414b853d0f1) 接口，填写对应的 roomId 参数来加入主播在 [步骤五](#步骤五开启直播) 中创建的直播间。
```js
import { liveRoom } from '@tencentcloud/livekit-web-vue3';
const joinLive = async () => {
await liveRoom.login({
sdkAppId: 0,
userId: '',
userSig: '',
});
await liveRoom.join('123456', {
isOpenCamera: false,
isOpenMicrophone: false,
});
}
joinLive()
```
## 🏃 开发环境运行
1. 执行开发环境命令。（此处以 vue3 + vite 默认项目为例，不同项目 dev 指令可能不同，请根据您自己的项目进行调整）
```bash
npm run dev
```
2. 根据控制台提示，在浏览器中打开页面 ，如：`http://localhost:5173/`。
3. 验 TUILiveKit 组件功能。
## 📦 生产环境部署
1. 打包 dist 文件.
```bash
npm run build
```
2. 部署 dist 文件到服务器上。
## 📖 附录
- 如果您在示例代码中发现 bug，欢迎您提交 issue。
- 如果您在访问或使用过程中有任何需求或反馈，欢迎加入[腾讯云实时音视频 TRTC 技术交流群](https://zhiliao.qq.com/s/cWSPGIIM62CC/c3TPGIIM62CQ)进行技术交流和问题反馈。