tencent cloud

Tencent Real-Time Communication

DocumentaçãoTencent Real-Time CommunicationLiveLive ManagementLive Streaming Management SystemLive Streaming Management System (Vue)

Live Streaming Management System (Vue)

Download
Modo Foco
Tamanho da Fonte
Última atualização: 2026-07-06 16:50:35

Overview

In live streaming operations, operations management is a critical part of ensuring stable platform operation and improving user experience. The Live Streaming Management System provides one-stop live streaming operations capabilities, covering core features such as live monitoring, room management, gift configuration, and content moderation, helping you quickly build a professional live streaming operations system and achieve efficient live room operations and content governance.
You can choose one of the following two integration methods based on your business needs:
Integration Method
Applicable Scenarios
Integration Notes
Quick deployment without extensive customization
Deploy the Live Streaming Management System to your environment and use it directly, or embed it into your existing operations system via iframe.
Unified brand styling or custom features and pages required
Build on the open-source codebase to customize pages, menus, and features, then integrate into your existing business system.
Note:
The Live Streaming Management System does not provide hosted backend services. You must deploy your own server to generate login credentials and interact with Tencent Cloud services. The repository includes a sample server implementation that you can deploy directly or integrate into your existing backend infrastructure.

Features

Feature Module
Description
UI Preview
Live Monitoring
Supports multi-screen concurrent monitoring and quick live room search by Room ID.
The system displays violation labels for non-compliant live rooms（contact us to enable）.
Operators can force-stop streaming with one click or send violation alerts to hosts, keeping track of live status in real time and responding to risks promptly.

Room Details
Supports entering the live room details page to view real-time chat messages, online audience, and core operational data.
Provides management capabilities such as mute all and ban members, helping operators respond to and handle live room issues quickly.
Admins can send admin messages in the chat (entering this page joins the live room with admin identity).
If Text Moderation is integrated, you can view the live room's text moderation records and use review management features such as batch approval and correction whitelist（contact us to enable）.

Room List
Pre-create live rooms in the backend with designated host IDs, allowing hosts to enter assigned rooms directly when starting streams.
Generates OBS streaming URLs enabling hosts to go live with one click via OBS

Gift Configuration
Supports adding, editing, and deleting gifts and gift categories, with multi-language configuration.


System Architecture



Quick Start

Step 1: Environment Setup and Service Activation

Before getting started, please refer to Getting Started (Web Desktop Browser) to complete the required environment setup and activate the corresponding services.

Step 2: Download the Project

Clone from the GitHub Release page, or use git clone:
git clone https://github.com/Tencent-RTC/TUILiveKit_Manager
cd TUILiveKit_Manager
pnpm install

Step 3: Configure the Server

1. Edit packages/server/config/.env:
SDK_APP_ID=1400000001           # Replace with your SDKAppID
SECRET_KEY=xxxxxxx              # Replace with your SecretKey
USER_ID=administrator           # Replace with your admin userID
Note:
For how to get SDK_APP_ID and SECRET_KEY, see Activate Services.
For how to get USER_ID, see Account Management.
2. Start the server:
pnpm run start:server
Note:
The default port is 9000. You can modify it by setting PORT in .env, and you need to allow firewall access to this port.

Step 4: Configure the Frontend

Edit packages/vue3/.env:
VITE_API_BASE_URL=http://localhost:9000/api
Note:
The port in VITE_API_BASE_URL must match the port the server was started with in the previous step.

Step 5: Start the Frontend

pnpm run dev:vue

Advanced Configuration (Optional)

Configure Image Upload

The system's gift thumbnails, gift materials, and room cover features rely on image upload and require storage configuration. If not configured, the frontend will automatically fall back to manual URL input mode, which does not affect other features.
Add storage configuration to packages/server/config/.env. The system supports three options:

Option 1: Tencent Cloud COS Object Storage (Default)

Note:
Go to the Tencent Cloud COS Console to create a bucket and obtain API keys.
STORAGE_PROVIDER=cos

COS_SECRET_ID=your_secret_id        # Tencent Cloud API SecretId
COS_SECRET_KEY=your_secret_key      # Tencent Cloud API SecretKey
COS_BUCKET=your-bucket-1250000000   # COS bucket name
COS_REGION=ap-guangzhou             # Bucket region
COS_CDN_DOMAIN=web.sdk.qcloud.com   # (Optional) CDN acceleration domain; if not set, the default COS domain is used
COS_PATH_PREFIX=uploads             # (Optional) Storage path prefix; files will be stored under this directory

Option 2: Custom HTTP Upload Endpoint

Suitable for scenarios with an existing image upload service. The system forwards files to your upload endpoint via multipart/form-data.
STORAGE_PROVIDER=custom

CUSTOM_UPLOAD_URL=https://your-api.com/upload     # Upload endpoint (required)
CUSTOM_ACCESS_DOMAIN=https://cdn.your-api.com     # (Optional) File access domain prefix
CUSTOM_UPLOAD_FIELD=file                          # (Optional) Upload file field name, default: file
CUSTOM_RESPONSE_URL_FIELD=data.url                # (Optional) JSON path for the URL field in the response, default: data.url
CUSTOM_AUTH_HEADER=Authorization: Bearer token    # (Optional) Custom auth request header
CUSTOM_PATH_PREFIX=uploads                        # (Optional) Storage path prefix
Note:
The custom upload endpoint should return JSON format, e.g.: { "code": 0, "data": { "url": "https://cdn.example.com/xxx.png" } }.

Option 3: Extend Other Storage Services

To integrate AWS S3, Aliyun OSS, etc., extend as follows:
1. Create YourProvider.js in packages/server/src/services/storage/, extending the StorageProvider base class.
2. Register it in PROVIDER_MAP in packages/server/src/services/storage/index.js.
3. Set STORAGE_PROVIDER=your_key in .env with the corresponding configuration items.

Content Moderation Capabilities

Content moderation requires Tencent Cloud API capabilities, so you need to activate the corresponding features and configure the relevant keys to use them.
Edit packages/server/config/.env:
# Tencent Cloud API keys (required for content moderation, violation labels, etc.)
TENCENT_CLOUD_SECRET_ID=xxxx    # Replace with your Tencent Cloud SecretId
TENCENT_CLOUD_SECRET_KEY=xxxx   # Replace with your Tencent Cloud SecretKey
Note：
TENCENT_CLOUD_SECRET_ID and TENCENT_CLOUD_SECRET_KEY are used to call the Tencent Cloud IM moderation API (text moderation, correction whitelist) and the TRTC moderation label query API (violation label display). For how to obtain them, see Tencent Cloud API Key Management.

Audio/Video Violation Label Display

Contact us to use this function.

Live Room Comment Content Moderation (Automated Moderation)

Contact us to use this function.

Custom Development

TUILiveKit_Manager/          ← GitHub open-source repository (the code you downloaded)
├── packages/
│   ├── vue3/                ← Vue3 main project
│   ├── customization/       ← Extension protocol package
│   └── server/              ← Server code
├── delivery-manifest.json   ← Delivery manifest recording each package's version and public entry points
└── README.md
The entry project (packages/vue3) is fully open source; you are free to adjust the page structure, navigation menus, brand identity, and page styles. Business capabilities can be flexibly extended in the following ways:
Brand and Appearance Customization: Use customer.config.ts to customize the page title, logo, brand info, etc.
Component Customization: Render custom content by setting component properties and slots. See the README in packages/vue3 for details.
Server-side Extension: Extend backend capabilities such as storage and authentication via the Provider mechanism in packages/server.

Production Deployment

Note:
If you already have your own server, choose Option 1: Self-hosted Deployment for more flexibility and integration with your existing system.
If you want a quick trial or demo, choose Option 2: Cloud Functions + COS/EdgeOne Pages for faster setup without purchasing and configuring servers.

Option 1: Self-hosted Deployment

Server: After modifying the configuration, deploy packages/server to your server, run pnpm install in that directory, then run node src/index.js to start the server.
Frontend: After modifying VITE_API_BASE_URL, run pnpm run build:vue at the root and deploy the build output to a static resource server such as Nginx. You can also place the build output in the server's public directory to share the port with the server. In this case, set VITE_API_BASE_URL=/api so the frontend uses relative paths for API requests.

Option 2: Cloud Functions + COS / EdgeOne Pages

Server: Run npm run deploy:server at the root, then upload packages/server/dist/scf-deploy.zip to Tencent Cloud Functions (Web Functions, Node.js 20.19).
Frontend: Create .env.production with the Cloud Function request URL, then run pnpm run build:vue at the root and upload the build output to COS or EdgeOne.
 VITE_API_BASE_URL=https://your-scf-url.com/api
Note:
Replace your-scf-url.com with your actual domain and port.
Getting Started (Web Desktop Browser)
Activate Services
Account Management
Cloud Functions Getting Started
COS (Object Storage) Quick Start
EdgeOne (Edge Security Acceleration Platform) Pages

Anterior: Live Streaming Management System (React)Próximo: Anchor Core View (Android)

Ajuda e Suporte

Esta página foi útil?

comentários