视频监播（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.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_React/demos/live-monitor-react/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_React/demos/live-monitor-react/src/views/LiveMointor/index.tsx
﻿
import 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 服务的 SDKAppID
          userId: '',   // 该用户在 步骤1 中的 userId
          password: '', // 该用户在 步骤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 定制操作。
﻿
功能分类	具体能力
多路直播间同屏监播	支持同时展示8+路直播画面（具体数量可定制）。
低延迟播放	实时拉取直播流，画面延迟≤3秒。
独立音频控制	可单独开启/关闭任意一路直播间的声音，避免干扰。
一键查看详情	单击任意直播间窗口，快速进入详情页，查看主播信息等关键信息。
一键解散违规直播间	在详情页或监播面板直接操作，快速关停违规直播间，提升处置效率。