产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
监播页面（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.jsconst Config = {SdkAppId: 0, // 输入您 TUILiveKit 服务的SDKAppIDSecretKey: '', // 输入您 TUILiveKit 服务的SDKSecretKeyIdentifier: 'administrator',Protocol: 'https://',Domain: 'console.tim.qq.com',Port: 9000,};module.exports = { Config };
// 执行如下命令启动服务，默认访问地址为：http://localhost:9000/apinpm run start
步骤5：启动前端工程
// cd TUIKit_Vue3/demos/live-monitor-vue3/src/config/index.tsimport { getBasicInfo } from './basic-info-config';const sdkAppId = 0; // 输入您 TUILiveKit 服务的SDKAppIDconst secretKey = ''; // 输入您 TUILiveKit 服务的SDKSecretKeyconst 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 服务的SDKAppIDuserId: '',// 该用户在 步骤1 中的 userIdpassword: '',// 该用户在 步骤1 中的 userSig},});}</script>
npm run dev
自由定制
通过上述方式您已经成功运行起监播页面的 Demo，此时若您需要对 UI 进行定制，您可以参考如下方式进行实现。其中定制内容包括但不限于对源码中的
颜色主题、字体、圆角、按钮、图标、输入框、弹框等内容，都可以进行增加、删除、修改等操作，下列分别给出颜色主题、按钮以及图标的定制示例，您可以参考实现方式通用到其他组件，满足您的 UI 定制需要。
颜色主题
<UIKitProvider theme="dark"> // theme 传入 dark 时，界面整体颜色主题为黑色主题xxx // theme 传入 light 时，界面整体颜色主题为白色主题</UIKitProvider>
按钮 Button
若您需要对按钮 Button 进行新增或替换等 UI 定制，您可以通过如下方式进行实现，以直播列表页面操作的三个按钮为例。
参考上图，您可以找到对应 Button 指定位置源码，对当前部分的按钮进行增加、删除、替换等 UI 定制操作。
图标 Icon
若您需要对图标 Icon 进行新增或替换等 UI 定制，您可以通过如下方式进行实现，以直播列表中的 Icon 为例。通过下述指引，您可以找到对应 Icon 位置，进行增加、删除、替换等 UI 定制操作。
文档反馈