tencent cloud

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

Overview

This document provides a detailed introduction to the Monitoring Webpage in the TUILiveKit Demo. You can directly integrate our 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
Supports showing 8+ live streams simultaneously (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 anchor information and key details.
Dismiss rule-violating live streaming room with one click
Operate directly on the details page or monitoring panel to quickly shut down live streaming rooms with rule violations 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 multi-stream live room monitoring on the same screen, low-delay playback, standalone 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 environment configuration and activate the corresponding service.

Step 2: Downloading Demo

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

Step 3: Dependency Installation

cd TUIKit_Vue3/demos/live-monitor-vue3 && npm install && cd server && npm install

Step 4: Starting the Server Project

// cd TUIKit_Vue3/demos/live-monitor-vue3/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 };
// Run the following command to start service. The default access address is: http://localhost:9000/api
npm run start

Step 5: Starting the Front-End Project

// cd TUIKit_Vue3/demos/live-monitor-vue3/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_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', // Default access address in procedure 4 
    account: {
      sdkAppId: 0,   // The SDKAppID of your TUILiveKit service
      userId: '',    // The user's userId in procedure 1
      password: '',  // The user's userSig in procedure 1
    },
  });
}
</script>
npm run dev

Tailor-Made

You have successfully run the Demo of the monitoring page. If you need UI customization, you can refer to the following methods. Custom content includes but is not limited to color theme, font, rounded corners, buttons, icons, input boxes, pop-ups in the source code, which can be added, deleted, or modified. Below are examples of color theme, button, and icon customization. You can refer to the implementation approach and apply it to other components to meet your UI customization needs.


Color Theme

For example, in Step 5, you can use the example code to manipulate the theme value to switch color themes.
<UIKitProvider theme="dark">  // When the theme input is dark, the overall interface color theme is black
  xxx                         // When the theme input is light, the overall interface color theme is white-theme
</UIKitProvider>

Button

If you need to add or replace buttons for UI customization, it can be obtained as follows, using the three buttons for page operation in the live list as an example.

Refer to the image above to find the source code for the corresponding Button in the specified position, and perform UI customization operations such as adding, deleting, or replacing the current Button.

Icons

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 list as an example. Follow the guide below to find the corresponding Icon position and perform UI customization operations such as adding, deleting, or replacing.

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

Feedback