实时音视频监播页面（Web 桌面浏览器 Vue 版）

概述
本文对 TUILiveKit Demo 中的监播页面进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
内置功能
多路直播间同屏监播：支持同时展示8+路直播画面（具体数量可定制）。
低延迟播放：实时拉取直播流，画面延迟≤3秒。
独立音频控制：可单独开启/关闭任意一路直播间的声音，避免干扰。
一键查看详情：单击任意直播间窗口，快速进入详情页，查看主播信息等关键信息。
一键解散违规直播间：在详情页或监播面板直接操作，快速关停违规直播间，提升处置效率。
功能展示
监播页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。其中主要包含直播多路直播间同屏监播、低延迟播放、独立音频控制、一键查看详情、一键解散违规直播间等。
﻿
快速跑通
步骤1：环境配置及开通服务
在进行快速接入之前，您需要参考准备工作，满足相关环境配置及开通对应服务。
步骤2：下载 Demo
git clone https://github.com/Tencent-RTC/TUIKit_Vue3.git
步骤3：安装依赖
cd TUIKit_Vue3/demos/live-monitor-vue3 && npm install && cd server && npm install
步骤4：启动服务端工程
// cd TUIKit_Vue3/demos/live-monitor-vue3/server/config/index.js
﻿
const Config = {
  SdkAppId: 0,    // 输入您 TUILiveKit 服务的 SDKAppID
  SecretKey: '',  // 输入您 TUILiveKit 服务的 SDKSecretKey
  Identifier: 'administrator',
  Protocol: 'https://',
  Domain: 'console.tim.qq.com',
  Port: 9000,
};
﻿
module.exports = { Config };
// 执行如下命令启动服务，默认访问地址为：http://localhost:9000/api
npm run start
步骤5：启动前端工程
// cd TUIKit_Vue3/demos/live-monitor-vue3/src/config/index.ts 
﻿
import { getBasicInfo } from './basic-info-config';
﻿
const sdkAppId = 0;         // 输入您 TUILiveKit 服务的 SDKAppID 
const secretKey = '';       // 输入您 TUILiveKit 服务的 SDKSecretKey
const defaultCoverUrl = ''; // 配置您直播封面的默认图片地址
﻿
const createBasicAccount = (userId?: string) => {
  return getBasicInfo(userId || `live_${Math.ceil(Math.random() * 10000000)}`, sdkAppId, secretKey);
};
﻿
export { sdkAppId, secretKey, createBasicAccount, defaultCoverUrl };
// cd TUIKit_Vue3/demos/live-monitor-vue3/src/views/live-monitor.vue
﻿
<template>
  <UIKitProvider language="zh-CN" theme="dark">
    <div class="live-monitor">
      <Header />
      <LiveList />
      <Pagination class="live-pagination" />
    </div>
 </UIKitProvider>
</template>
﻿
<script setup lang="ts">
import { useLiveMonitorState } from 'tuikit-atomicx-vue3';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { createBasicAccount } from '../config';
import Header from '../components/Header.vue';
import LiveList from '../components/LiveList.vue';
import Pagination from '../components/Pagination.vue';
﻿
const account = createBasicAccount(); 
const { init } = useLiveMonitorState();
﻿
if (account) {
  init({
    baseUrl: 'http://localhost:9000/api', // 步骤4 中服务端默认访问地址 
    account: {
      sdkAppId: 0,   // 您 TUILiveKit 服务的 SDKAppID
      userId: '',    // 该用户在 步骤1 中的 userId
      password: '',  // 该用户在 步骤1 中的 userSig
    },
  });
}
</script>
npm run dev
自由定制
通过上述方式您已经成功运行起监播页面的 Demo，此时若您需要对 UI 进行定制，您可以参考如下方式进行实现。其中定制内容包括但不限于对源码中的颜色主题、字体、圆角、按钮、图标、输入框、弹框等内容，都可以进行增加、删除、修改等操作，下列分别给出颜色主题、按钮以及图标的定制示例，您可以参考实现方式通用到其他组件，满足您的 UI 定制需要。
﻿
颜色主题
例如 步骤5 中代码示例，您可以使用操作 theme 的值来满足您切换颜色主题。
<UIKitProvider theme="dark">  // theme 传入 dark 时，界面整体颜色主题为黑色主题
  xxx                         // theme 传入 light 时，界面整体颜色主题为白色主题
</UIKitProvider>
按钮 Button
若您需要对按钮 Button 进行新增或替换等 UI 定制，您可以通过如下方式进行实现，以直播列表页面操作的三个按钮为例。
﻿
参考上图，您可以找到对应 Button 指定位置源码，对当前部分的按钮进行增加、删除、替换等 UI 定制操作。
图标 Icon
若您需要对图标 Icon 进行新增或替换等 UI 定制，您可以通过如下方式进行实现，以直播列表中的 Icon 为例。通过下述指引，您可以找到对应 Icon 位置，进行增加、删除、替换等 UI 定制操作。
﻿
生产环境部署
步骤1：部署服务端工程
说明：
本文档以部署到腾讯 云函数 为例，server 工程已经包含了部署到云函数所必要的 scf_bootstrap 文件，参照指引您便可将服务正常部署。
1. 本地构建服务端代码。
# 进入 server 工程
cd server
﻿
# 构建产物
npm run build
注意：
构建产物默认存放在 dist 目录。
2. 登录 Serverless 控制台，单击左侧导航栏到函数服务。
3. 在主界面上方单击新建，进入函数创建流程。
4. 选择从头开始来新建函数，并填写函数基础配置。如下图所示： 
﻿
函数类型：选择 “Web 函数”。
函数名称：填写您自己的函数名称。
地域：填写您的函数部署地域。
运行环境：选择 “Node.js 18.15”。
5. 在函数服务中进入您刚刚创建的 Web 函数。
6. 在函数管理页面的函数代码的提交方法中选择本地上传文件夹，将步骤1构建的 dist 目录内的 src 文件夹上传后单击部署。
﻿
7. 等待函数代码加载完毕，检查 src/config/index.js 文件内的 SdkAppId 和 SecretKey 是否填写。
﻿
8. 按如下指引新建终端。
﻿
9. 进入src目录安装依赖。
cd src
﻿
npm install
10. 依赖安装完毕后单击部署。
﻿
11. 部署完成后单击左侧函数 URL，复制内网访问链接（http 或者 https 协议的链接均可）。
﻿
12. 进入接口测试工具（以 ApiFox 为例），在刚刚复制链接的最后加上 /api/test，单击发送后查看响应结果。
﻿
步骤2：部署前端工程
1. 通过步骤1部署云函数成功后，假设您的函数 URL 访问链接为 https://live-monitor-test.tencentscf.com。您只需调整 TUIKit_Vue3/demos/live-monitor-vue3/src/views/live-monitor.vue  组件中 init 方法内的 baseUrl 为上述 URL 访问链接即可。
2. 构建前端代码。
# 进入 live-monitor-vue3 目录
cd TUIKit_Vue3/demos/live-monitor-vue3
﻿
# 构建项目
npm run build
其他文档
﻿TUILiveKit 开通服务﻿
﻿TUILiveKit 跑通 Demo﻿
﻿TUILiveKit 快速接入﻿
﻿云函数新手指引﻿
﻿
监播页面（Web 桌面浏览器 Vue 版）

本页目录：

概述

内置功能

功能展示

快速跑通

步骤1：环境配置及开通服务

步骤2：下载 Demo

步骤3：安装依赖

步骤4：启动服务端工程

步骤5：启动前端工程

自由定制

颜色主题

按钮 Button

图标 Icon

生产环境部署

步骤1：部署服务端工程

步骤2：部署前端工程

其他文档
