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
const Config = {
SdkAppId: 0,
SecretKey: '',
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
import { getBasicInfo } from './basic-info-config';
const sdkAppId = 0;
const secretKey = '';
const defaultCoverUrl = '';
const createBasicAccount = (userId?: string) => {
return getBasicInfo(userId || `live_${Math.ceil(Math.random() * 10000000)}`, sdkAppId, secretKey);
};
export { sdkAppId, secretKey, createBasicAccount, defaultCoverUrl };
<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',
account: {
sdkAppId: 0,
userId: '',
password: '',
},
});
}
</script>
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">
xxx
</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.
