本文对 TUILiveKit Demo 中的**观看页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
## 功能展示
观看页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。图中显示的数字与特定功能列表中的类别相对应。其中主要包含直播**信息展示、视频直播区域、在线观众、音视频操作、直播时长、画面分辨率切换、全屏功能、聊天互动、消息列表等。**
- **直播视频播放**：高清流畅的直播体验。
- **弹幕互动**：实时弹幕交流。
- **观众列表**：查看在线观众信息。
- **全屏播放**：沉浸式观看体验。
- **H5 移动平台支持**：跨平台兼容。
## 快速接入
### 步骤1：环境配置及开通服务
在进行快速接入之前，请参考 准备工作 集成组件并实现登录。
### 步骤2：安装依赖
您可以选择以下任一方式安装依赖：
【npm】
``` bash
npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
```
【pnpm】
``` bash
pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
```
【yarn】
``` bash
yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
```
### 步骤3：观看页面接入
在您的项目下创建 **live-player.vue **文件，可直接复制如下代码至您的项目中集成**观看页面**。
> **注意：**
>
> 您可以直接复制如下代码至您的工程中集成示例工程，也可以访问 [观众观看](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/TUILiveKit/component/LivePlayer/LivePlayerH5.vue) 地址，查看更加详细的源码内容。
>
``` typescript
```
#### 核心 API 参数说明
##### setSelfInfo
设置用户信息。
| 参数 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| userName | String | 是 | 用户昵称，将在直播间及聊天区域显示。 |
| avatarUrl | String | 否 | 用户头像的 URL 地址。 |
### 步骤4：启动项目
打开终端，进入项目目录，执行以下命令启动项目后，您就可以观看直播了。
> **说明：**
>
> 上述命令执行成功后，请在浏览器地址栏输入本地访问地址（您可以根据项目配置参考，例如` http://localhost:5173/live-player`，具体端口号可能因您的项目配置而有所不同），即可看到观看页面。
>
``` bash
npm run dev
```
## 播放直播流
### 步骤1：开启一场直播
- **方式一（推荐）：**
使用我们提供的 [在线开播网站](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html#/?fromMark=123471)，开启一场直播来观看，开启后获取直播间 ID
- **方式二：**
集成我们提供的 主播开播（Web 桌面浏览器），开启一场直播来观看，开启后获取直播间 ID。
> **重要提示：**
>
> 请使用不同的**用户 ID** 开播和观看，否则后登录的设备会强制先登录的设备下线（即“被踢下线”）。
>
### 步骤2：观看直播
参考上述快速接入中的 步骤 3 的示例代码，输入对应 `liveId` 后即可进入直播间观看直播：
> **说明：**
>
> 另外，若您需要修改个人信息，请参考 步骤 3 示例代码中的 `setSelfInfo` 进行个人信息的设置。
>
### 步骤3：路由配置
由于涉及到直播列表(或首页)到直播间的跳转逻辑，您需要配置 Vue Router。在项目 **src** 目录下新建 **router **文件夹，并创建 **index.ts **文件。然后，在您的主文件（例如 **main.ts** 或 **index.ts**）中引入并使用路由。可参见 [GitHub 上的代码示例](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts)，如果需要直播列表，可参见文档 直播列表。
> **注意：**
>
> 如下代码示例中的 `live-player.vue` 文件即代表 步骤3 中创建的示例文件。
>
``` typescript
// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/live-player',
component: () => import('../live-player.vue'),
},
// 如果需要直播列表功能，可添加如下路由，注意以下路径为您项目实际路径
// {
// path: '/live-list',
// component: () => import('../live-list.vue'),
// },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
```
## 自由定制
### 颜色主题及语言
通过配置 `App.vue` 中 `UIKitProvider` 的入参，修改主题及语言的默认值。
| UIKitProvider 参数 | 可选值 | 默认值 |
| --- | --- | --- |
| theme | "light" \\| "dark" | "light" |
| language | "zh-CN" \\| "en-US" | - |
``` typescript