本文将介绍如何接入 TUILiveKit Demo 的**主播开播页**，指导您将我们提供的开播页面集成到您的项目中，同时介绍如何对直播页面的样式、布局、以及功能进行自定义修改。
## 功能展示
- **横屏开播**
- **竖屏开播**
## 功能概览
- **画面源管理**：支持添加多个摄像头、屏幕分享、窗口分享和本地图片。
- **直播画面排版**：支持对画面源拖拽、缩放，支持通过快捷菜单对画面源设置镜像、旋转和层级调整。
- **观众连麦**：支持房间内观众连麦，内置多种连麦布局。
- **主播 PK**：支持主播跨房连线、PK。
- **互动聊天**：支持收发文字和表情消息，聊天互动。
- **观众管理**：支持对观众禁言、踢出直播间等操作。
## 快速接入
### 步骤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-pusher.vue` 文件，通过复制如下代码至您新建的 `live-pusher.vue` 文件中集成完整的**主播开播页面**。
> **注意：**
>
> 您可以直接复制如下代码至您的工程中集成示例工程，也可以访问 [开播页面](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/TUILiveKit/LivePusherView.vue) 地址，查看更加详细的源码内容。
>
``` typescript
在线观众({{ audienceCount }})
```
#### 核心 API 参数说明
##### **createLive**
创建一个新的直播间，并设置直播间的基础信息。
| 参数 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| liveId | String | 是 | 直播间 ID，需保证全局唯一。 |
| liveName | String | 是 | 直播间名称，用于界面展示。 |
| coverUrl | String | 否 | 直播间封面图片的 URL 地址。 |
| isPublicVisible | Boolean | 否 | 是否公开可见。默认为 true，表示公开。 |
| seatLayoutTemplateId | Number | 否 | 麦位布局模板 ID。600 代表竖屏动态宫格布局，更多模板 ID 请参考高级功能章节。 |
##### setSelfInfo
设置用户信息。
| 参数 | 类型 | 必填 | 说明 |
| --- | --- | --- | --- |
| userName | String | 是 | 用户昵称，将在直播间及聊天区域显示。 |
| avatarUrl | String | 否 | 用户头像的 URL 地址。 |
### 步骤4：开启直播
开启您的第一场直播。
``` bash
npm run dev
```
> **说明：**
>
> 上述命令执行成功后，请在浏览器地址栏输入本地访问地址（您可以根据项目参考，例如` http://localhost:5173/live-pusher`，具体端口号可能因您的项目配置而有所不同），即可看到开播页面。
>
### 步骤5：观看直播
- **方式一：（推荐）**
通过我们提供的 [在线观看网站](https://web.sdk.qcloud.com/trtc/livekit/player/index.html#/?fromMark=123470)，立刻观看您开启的直播。
- **方式二：**
集成我们提供的 观众观看（Web 桌面浏览器）或者 观众观看（H5 移动端浏览器） 页面，观看直播。
> **重要提示：**
>
> 请使用不同的**用户 ID** 登录观看： 开播端和观看端必须使用**不同**的用户 ID，否则后登录的设备会强制先登录的设备下线（即“被踢下线”）。
>
## 高级功能集成
> **注意：**
>
> 以下高级功能均是基于 步骤 3 中创建的 `live-pusher.vue` 示例文件进行的扩展。请根据您的业务需求，将下方的代码片段集成到 `live-pusher.vue` 的对应位置（`template` 区域或 `script` 逻辑中），以启用相应的能力。
>
【支持媒体设置能力】
若您需要支持媒体设置能力，包括设置扬声器、麦克风音量大小等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
``` typescript
```
【支持横竖屏推流能力】
若您需要支持横竖屏推流能力，包括设置切换横竖屏等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
``` typescript
{{
currentOrientation === LiveOrientation.Portrait ? t('Portrait') : t('Landscape')
}}
```
【支持连观众能力】
若您需要支持观众连麦能力，包括设置连麦申请、连麦管理等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
``` typescript
{{ applicants.length }}
{{ t('CoGuest') }}
```
【支持布局设置能力】
若您需要支持视频流切换布局能力，包括设置**动态宫格布局、静态宫格布局、静态小窗布局、浮动小窗布局**等内容，请参考如下代码示例复制到`live-pusher.vue `文件中即可。
``` typescript
{{ t('Layout Settings') }}
{{ t('Audience Layout') }}
```
## 自定义您的界面布局
`TUILiveKit` 支持灵活定制开播页与直播页的功能和样式，您可根据业务需求调整布局、隐藏 / 显示功能模块。
### 横竖屏推流设置
`TUILiveKit` 支持**横屏**和**竖屏**两种推流模式，您可根据直播场景选择合适的推流方向：
| **推流模式** | **适用场景** | **说明** |
| --- | --- | --- |
| **竖屏推流** | 秀场直播、电商带货、聊天互动 | 默认模式，适合移动端观看，画面比例为 9:16。 |
| **横屏推流** | 游戏直播、在线教育、会议直播 | 适合 PC 端观看，画面比例为 16:9。 |
> **注意：**
>
> 横竖屏切换必须在**开播前**进行设置，直播过程中无法切换推流方向。
>
#### 通过 UI 交互切换
在主播开播页的底部控制栏，点击**横屏 / 竖屏**按钮即可切换推流方向：
- 显示**竖屏**时，当前为**竖屏推流模式**。
- 显示**横屏**时，当前为**横屏推流模式**
#### 通过代码设置
您也可以通过调用 `updateLiveInfo` 方法，在代码中设置推流方向：
``` typescript
import { useLiveListState } from 'tuikit-atomicx-vue3';
const { updateLiveInfo } = useLiveListState();
// 切换为横屏模式（模板 ID: 200）
updateLiveInfo({ layoutTemplate: 200 });
// 切换为竖屏模式（模板 ID: 600）
updateLiveInfo({ layoutTemplate: 600 });
```
> **说明：**
>
> - 横屏模式对应的布局模板 ID 范围为 200-599，默认使用 200（横屏浮动布局）。
> - 竖屏模式对应的布局模板 ID 范围为 600-899，默认使用 600（动态宫格布局）。
> - 切换横竖屏时，系统会自动切换到对应方向的默认布局模板。
### 直播布局模板选择
`TUILiveKit` 提供多种直播布局模板，用于控制主播与连麦嘉宾的画面排列方式。您可在主播开播页的**布局设置**选择合适样式：
#### 竖屏模式布局模板
竖屏模式下提供 **4 种布局模板**，适用于秀场直播、电商带货等场景：
| **名称** | **动态宫格布局** | **动态 1V6 布局** | **静态宫格布局** | **静态小窗布局** |
| --- | --- | --- | --- | --- |
| **模板 ID** | 600 | 601 | 800 | 801 |
| **描述** | **默认布局**，根据连麦人数动态调整宫格大小，画面自适应填充。 | 主播画面居中大窗显示，连麦嘉宾以**浮动小窗**形式环绕在主播周围。 | 固定 9 宫格布局，每个嘉宾占据一个**固定大小**的宫格位置。 | 主播画面全屏显示，连麦嘉宾以**固定小窗**形式显示在画面边缘。 |
| **适用场景** | 通用场景，连麦人数不固定。 | 主播为主、嘉宾为辅的互动场景。 | 多人连麦、语音聊天室等固定人数场景。 | 主播全屏展示、嘉宾辅助的场景。 |
#### 横屏模式布局模板
横屏模式下提供 **1 种布局模板**，适用于游戏直播、在线教育等场景：
| **名称** | **横屏浮动布局** |
| --- | --- |
| **模板 ID** | 200 |
| **描述** | 主播画面全屏显示，连麦嘉宾以**浮动小窗**形式显示在画面底部。 |
| **适用场景** | 游戏直播、屏幕分享、在线教育等需要横屏展示的场景。 |
#### 通过代码设置布局模板
您可以通过调用 `updateLiveInfo` 方法，在代码中设置布局模板：
``` typescript
import { useLiveListState } from 'tuikit-atomicx-vue3';
const { updateLiveInfo } = useLiveListState();
// 设置竖屏动态宫格布局
updateLiveInfo({ layoutTemplate: 600 });
// 设置竖屏动态 1v6 布局
updateLiveInfo({ layoutTemplate: 601 });
// 设置竖屏静态宫格布局
updateLiveInfo({ layoutTemplate: 800 });
// 设置竖屏静态 1v6 布局
updateLiveInfo({ layoutTemplate: 801 });
// 设置横屏浮动布局
updateLiveInfo({ layoutTemplate: 200 });
```
> **注意：**
>
> - 布局模板可以在**开播前**和**直播中**进行切换。
> - 在主播 PK 连线期间，**无法切换**布局模板。
> - 切换横竖屏推流方向时，布局模板会自动切换为对应方向的默认模板。
## 自由定制
### 颜色主题及语言
通过配置 `App.vue` 中 `UIKitProvider` 的入参，修改主题及语言的默认值。
| **UIKitProvider 参数** | **可选值** | **默认值** |
| --- | --- | --- |
| theme | "light" \\| "dark" | "light" |
| language | "zh-CN" \\| "en-US" | "en-US" |
``` typescript