直播管理系统(Vue3)

最近更新时间:2026-07-06 10:27:00

我的收藏

概述

在直播业务中,运营管理是保障平台稳定运行和提升用户体验的重要环节。直播管理系统提供一站式直播运营能力,涵盖直播监控、房间管理、礼物配置、内容审核等核心功能,帮助您快速搭建专业的直播运营系统,实现直播间的高效运营与内容治理。
您可以根据业务需求选择以下两种接入方式:
接入方式
适用场景
接入说明
希望快速上线,不需要深度定制
将直播管理系统部署到您的环境后,可直接使用,或通过 iframe 嵌入到您已有的运营系统中。
需要统一品牌风格,或需要对功能和页面进行定制
基于开源代码进行开发,可自定义页面、菜单和功能,并集成到现有业务系统中。
说明:
直播管理系统不提供托管的后台服务,您需要自行部署服务端,用于生成登录凭证并调用腾讯云相关能力。仓库中提供了一份服务端示例代码,您可以直接部署使用,也可以将相关能力集成到您已有的后端服务中。

功能介绍

功能模块
功能说明
UI 示意
直播监控
支持多路同屏监播和根据 Room ID 快速搜索直播间。
对于违规直播间,如已接入 音视频内容理解 能力,系统会自动展示违规标签。
运营人员可一键强制关播或向主播发送违规告警,实时掌握直播状态并及时处置风险。

直播间详情
支持进入直播间详情页,实时查看弹幕消息、在线观众及核心运营数据。
提供全员禁言、成员封禁等管理能力,帮助运营人员快速响应和处理直播间问题。
评论区可以发送管理员消息(进入本页面时会以管理身份进入该直播间房间)
如已接入 文本审核 能力,支持查看直播间文本审核记录,并提供批量放行、纠错白名单等审核管理能力。

直播列表
支持在后台预创建直播间并指定主播 ID,主播开播时可直接进入对应房间。
支持生成 OBS 推流地址,主播可通过 OBS 一键开播。

礼物配置
支持礼物和礼物分类的新增、编辑、删除,并支持多语言配置。




系统框架



快速接入

步骤 1:环境配置及开通服务

在进行快速接入之前,您需要参考 准备工作(Web Vue3),满足相关环境配置及开通对应服务。

步骤 2:下载项目

从 GitHub Release 页面下载最新发布包,或通过 git clone:
git clone https://github.com/Tencent-RTC/TUILiveKit_Manager
cd TUILiveKit_Manager
pnpm install

步骤 3:配置服务端

1. 编辑 packages/server/config/.env
SDK_APP_ID=1400000001 # 请替换您的 SDKAppID
SECRET_KEY=xxxxxxx # 请替换您的 SecretKey
USER_ID=administrator # 请替换您的管理员 userID
说明:
如何获取 SDK_APP_ID 和 SECRET_KEY 的值请参见 开通服务
如何获取 USER_ID 请参见 管理员账号管理
2. 启动服务:
pnpm run start:server
注意:
默认端口为 9000,可以通过配置 .env 中的 PORT 来修改端口号,且需要允许防火墙访问该端口。

步骤 4:配置前端

编辑 packages/vue3/.env
VITE_API_BASE_URL=http://localhost:9000/api
注意:
VITE_API_BASE_URL 中的端口号要和之前配置 server 启动的端口一致。

步骤 5:启动前端

pnpm run dev:vue

进阶配置(可选)

配置图片上传

系统的礼物缩略图、礼物素材、房间封面等功能依赖图片上传,需要配置存储服务。如果不配置,前端会自动降级为 URL 手动输入模式,不影响其他功能使用。
packages/server/config/.env 中追加存储配置,系统支持三种方式:

方式一:腾讯云 COS 对象存储(默认)

说明:
前往 腾讯云 COS 控制台 创建存储桶并获取 API 密钥。
STORAGE_PROVIDER=cos

COS_SECRET_ID=your_secret_id # 腾讯云 API SecretId
COS_SECRET_KEY=your_secret_key # 腾讯云 API SecretKey
COS_BUCKET=your-bucket-1250000000 # COS 存储桶名称
COS_REGION=ap-guangzhou # 存储桶所在地域
COS_CDN_DOMAIN=web.sdk.qcloud.com # (可选)CDN 加速域名,不配置则使用默认 COS 域名
COS_PATH_PREFIX=uploads # (可选)存储路径前缀,文件将存储在此目录下

方式二:自定义 HTTP 上传接口

适用于已有图片上传服务的场景,系统会将文件以 multipart/form-data 方式转发到您的上传接口。
STORAGE_PROVIDER=custom

CUSTOM_UPLOAD_URL=https://your-api.com/upload # 上传接口地址(必填)
CUSTOM_ACCESS_DOMAIN=https://cdn.your-api.com # (可选)文件访问域名前缀
CUSTOM_UPLOAD_FIELD=file # (可选)上传文件字段名,默认 file
CUSTOM_RESPONSE_URL_FIELD=data.url # (可选)响应中 URL 字段的 JSON 路径,默认 data.url
CUSTOM_AUTH_HEADER=Authorization: Bearer token # (可选)自定义认证请求头
CUSTOM_PATH_PREFIX=uploads # (可选)存储路径前缀
注意:
自定义上传接口应返回 JSON 格式,示例:{ "code": 0, "data": { "url": "https://cdn.example.com/xxx.png" } }

方式三:扩展其他存储服务

如果需要接入 AWS S3、阿里云 OSS 等,可按以下步骤扩展:
1. packages/server/src/services/storage/ 下创建 YourProvider.js,继承 StorageProvider 基类。
2. packages/server/src/services/storage/index.jsPROVIDER_MAP 中注册。
3. .env 中设置 STORAGE_PROVIDER=your_key 并添加对应配置项。

内容审核能力

内容审核能力需要使用云 API 功能,因此需要开通对应能力以及配置相关密钥才能使用。
编辑 packages/server/config/.env
# 腾讯云 API 密钥(内容审核、违规标签等功能依赖)
TENCENT_CLOUD_SECRET_ID=xxxx # 请替换您的腾讯云 SecretId
TENCENT_CLOUD_SECRET_KEY=xxxx # 请替换您的腾讯云 SecretKey
说明:
TENCENT_CLOUD_SECRET_ID 和 TENCENT_CLOUD_SECRET_KEY 用于调用腾讯云 IM 审核 API(文本审核、纠错白名单)及 TRTC 审核标签查询 API(违规标签展示)。如何获取请参见 腾讯云 API 密钥管理

音视频违规标签展示

需要接入 音视频内容理解 能力。

直播间评论内容审核(机器审核)

需要接入 文本审核 能力。

二次开发

TUILiveKit_Manager/ ← GitHub 开源仓库(您下载到的代码)
├── packages/
│ ├── vue3/ ← Vue3 主项目
│ ├── customization/ ← 扩展协议包
│ └── server/ ← 服务端代码
├── delivery-manifest.json ← 交付清单,记录各包版本与公开入口
└── README.md
入口项目(packages/vue3)完全开源,您可以自由调整页面结构、导航菜单、品牌标识和页面样式。业务能力可通过以下方式灵活扩展:
品牌与外观定制:通过 customer.config.ts 自定义页面标题、Logo、品牌信息等。
组件定制:通过设置组件的属性和插槽来渲染自定义内容,详细说明参考 packages/vue3中的 README 文档。
服务端扩展:通过 packages/server 中的 Provider 机制扩展存储、鉴权等后端能力。

生产部署

说明:
如果您已经有自己的服务器,可以选择方式一:自建部署,可以更灵活地进行定制并集成到已有系统中。
如果您想快速试用或演示,可以选择方式二:云函数 + COS/EdgeOne Pages,无需自行购买和配置服务器,更加快捷方便。

方式一:自建部署

服务端:修改配置后将 packages/server 部署到您的服务器,在该目录下运行 pnpm install,然后运行 node src/index.js 启动服务器。
前端:修改 VITE_API_BASE_URL 后在根目录下 pnpm run build:vue,将构建产物部署到静态资源服务器如 Nginx,也可以把构建产物放到之前服务器的 public 目录下,可以和服务器共用端口,此时可以配置 VITE_API_BASE_URL=/api,前端使用相对路径请求 api 接口。

方式二:云函数 + COS / EdgeOne Pages

服务端:在根目录下运行 npm run deploy:server 然后将 packages/server/dist/scf-deploy.zip 上传至腾讯 云函数(Web 函数,Node.js 20.19)。
前端:创建 .env.production 设置云函数请求地址后,在根目录下 pnpm run build:vue,将构建产物上传至 COSEdgeOne Pages
VITE_API_BASE_URL=https://your-scf-url.com/api
注意:
your-scf-url.com 要替换成实际的域名和端口。

相关文档