tencent cloud

Monitoring Webpage （Web Desktop Browser React）
Download PDF
Last updated:2025-10-27 16:06:49
Monitoring Webpage （Web Desktop Browser React）
Last updated: 2025-10-27 16:06:49
Download PDF

Description

This document provides a detailed introduction to the Monitoring Webpage in TUILiveKit Demo. You can integrate our pre-developed viewing page into your existing project as specified in this document, or customize the webpage style, layout, and feature items according to your needs.

Feature Overview

Feature Category
Specific Abilities
Multi-stream live room monitoring
Support showing 8+ live streams at the same time (actual quantity customizable).
Low-latency playback
Pull live stream in real time with ≤3s delay.
Standalone audio control
Enable/disable sound for any live streaming room individually to avoid interference.
View details via a click
Click any live streaming room window to quickly enter the details page and view key information such as anchor information.
Dismiss rule-violating live streaming rooms with one click
Operate directly on the details page or monitoring panel to quickly disable rule-violating live streaming rooms and enhance handling efficiency.

Feature Demonstration

The monitoring page provides default behavior and style. However, if the default behavior and style cannot fully meet your requirements, you can also customize the UI. It mainly includes live stream multi-stream room simultaneous monitoring, low-delay playback, independent audio control, one-click view detail, and one-click dismiss rule-violating live streaming rooms.


Quick Run-Through

Step 1: Configuring the Environment and Activating the Service

Before performing quick integration, you need to refer to preparations to meet the required environment configuration and activate the corresponding service.

Step 2: Downloading the Demo

git clone https://github.com/Tencent-RTC/TUIKit_React.git

Step 3: Dependency Installation

cd TUIKit_React/demos/live-monitor-react && npm install && cd server && npm install

Step 4: Starting the Server Project

// cd TUIKit_React/demos/live-monitor-react/server/config/index.js

const Config = {
  SdkAppId: 0,    // Enter the SDKAppID of your TUILiveKit service
  SecretKey: '',  // Enter the SDKSecretKey for your TUILiveKit service
  Identifier: 'administrator',
  Protocol: 'https://',
  Domain: 'console.tim.qq.com',
  Port: 9000,
};

module.exports = { Config };
// Execute the following command to start the service. The default access address is: http://localhost:9000/api
npm run start

Step 5: Starting the Front-End Project

// cd TUIKit_React/demos/live-monitor-react/src/config/index.ts 

import { getBasicInfo } from './basic-info-config';

const sdkAppId = 0;         // Enter the SDKAppID for your TUILiveKit service 
const secretKey = '';       // Enter the SDKSecretKey for your TUILiveKit service
const defaultCoverUrl = ''; // Configure the default image address for your live cover

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', // Default access address in procedure 4 
        account: {
          sdkAppId: 0,  // The SDKAppID of your TUILiveKit service
          userId: '',   // The userId of the user in procedure 1
          password: '', // The userSig of the user in procedure 1
        },
      });
    } 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

Tailor-Made

You have successfully launched the monitoring page Demo. If you need to customize the UI, see the following implementation methods. Custom content includes but is not limited to color themes, fonts, rounded corners, buttons, icons, input boxes, pop-ups in the source code, and you can add, delete, or modify them. Below are examples of customizing color themes, buttons, and icons. You can refer to these implementation approaches and apply them to other components to meet your UI customization needs.


Color Theme

As shown in step 5 example code, you can use the theme value to switch color themes.
<UIKitProvider theme="dark">  // When theme is set to dark, the interface adopts a black color theme overall
  xxx                         // When theme is set to light, the interface adopts a white-theme overall
</UIKitProvider>

Button

If you need to perform UI customization such as adding or replacing buttons, you can implement it as follows, using the three buttons in the live stream list page operation as an example. Refer to the figure below, you can find the source code at the specified position of the corresponding Button and perform UI customization operations like addition, deletion, replacement on the current part of the buttons.


Icon

If you need to perform UI customization such as adding or replacing icons, you can implement it as follows, using the Icon in the live stream list as an example. Follow the guideline below to find the corresponding Icon location and perform UI customization operations like addition, deletion, or replacement.


Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback