TUILiveKit 产品动态
云直播推拉流 SDK 产品动态
监播页面（Web 桌面浏览器 React 版）
聚焦模式
字号
概述
本文对 TUILiveKit Demo 中的监播页面进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的观看页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
功能概览
功能分类 | 具体能力 |
多路直播间同屏监播 | 支持同时展示8+路直播画面（具体数量可定制）。 |
低延迟播放 | 实时拉取直播流，画面延迟≤3秒。 |
独立音频控制 | 可单独开启/关闭任意一路直播间的声音，避免干扰。 |
一键查看详情 | 单击任意直播间窗口，快速进入详情页，查看主播信息等关键信息。 |
一键解散违规直播间 | 在详情页或监播面板直接操作，快速关停违规直播间，提升处置效率。 |
功能展示
监播页面提供默认行为和风格，但如果默认行为和样式不能完全满足您的需求，您也可以对 UI 进行自定义。其中主要包含直播多路直播间同屏监播、低延迟播放、独立音频控制、一键查看详情、一键解散违规直播间等。
快速跑通
步骤1：环境配置及开通服务
步骤2: 下载 Demo
git clone https://github.com/Tencent-RTC/TUIKit_React.git
步骤3: 安装依赖
cd TUIKit_React/demos/live-monitor-react && npm install && cd server && npm install
步骤4: 启动服务端工程
// cd TUIKit_React/demos/live-monitor-react/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_React/demos/live-monitor-react/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_React/demos/live-monitor-react/src/views/LiveMointor/index.tsximport React, { useLayoutEffect } from 'react';import { useNavigate } from 'react-router-dom';import { useLiveMonitorState } from 'tuikit-atomicx-react';import { safelyParse } from '../../utils';import { Header } from '../../components/Header';import { LiveList } from '../../components/LiveList';import { Pagination } from '../../components/Pagination';import { PaginationProvider } from '../../context/PaginationContext';import styles from './LiveMonitor.module.scss';const LiveMonitor: React.FC = () => {const { init, monitorLiveInfoList } = useLiveMonitorState();const navigate = useNavigate();useLayoutEffect(() => {const account = safelyParse(localStorage.getItem('tuiLiveMonitor-userInfo') || '');if (account) {init({baseUrl: 'http://localhost:9000/api', // 步骤4 中服务端默认访问地址account: {sdkAppId: 0, // 您 TUILiveKit 服务的SDKAppIDuserId: '', //该用户在 步骤1 中的 userIdpassword: '', //该用户在 步骤1 中的 userSig},});} else {navigate('/login');}}, [init, navigate]);return (<UIKitProvider theme="dark"><div className={styles['live-monitor']}><Header /><PaginationProvider><LiveList monitorLiveInfoList={monitorLiveInfoList} /><div className={styles['live-pagination']}><Pagination pageSize={10} /></div></PaginationProvider></div></UIKitProvider>);};export default LiveMonitor;
npm run start
自由定制
通过上述方式您已经成功运行起监播页面的 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 定制操作。
文档反馈