监播页面（Web 桌面浏览器 Vue 版）
Download
聚焦模式
字号
概述
在直播业务中，运营管理是保障平台稳定运行和提升用户体验的重要环节。直播管理系统提供一站式直播运营能力，涵盖直播监控、房间管理、礼物配置、内容审核等核心功能，帮助您快速搭建专业的直播运营系统，实现直播间的高效运营与内容治理。
您可以根据业务需求选择以下两种接入方式：
说明：
直播管理系统不提供托管的后台服务，您需要自行部署服务端，用于生成登录凭证并调用腾讯云相关能力。仓库中提供了一份服务端示例代码，您可以直接部署使用，也可以将相关能力集成到您已有的后端服务中。
功能介绍
功能模块 | 功能说明 | UI 示意 |
直播监控 | 支持多路同屏监播和根据 Room ID 快速搜索直播间。 对于违规直播间，接入音视频审核后可以展示违规标签（接入方式请联系我们）。 运营人员可一键强制关播或向主播发送违规告警，实时掌握直播状态并及时处置风险。 |  |
直播间详情 | 支持进入直播间详情页，实时查看弹幕消息、在线观众及核心运营数据。 提供全员禁言、成员封禁等管理能力，帮助运营人员快速响应和处理直播间问题。 评论区可以发送管理员消息（进入本页面时会以管理身份进入该直播间房间） 如已接入文本审核能力，支持查看直播间文本审核记录，并提供批量放行、纠错白名单等审核管理能力（接入方式请联系我们）。 |  |
直播列表 | 支持在后台预创建直播间并指定主播 ID，主播开播时可直接进入对应房间。 支持生成 OBS 推流地址，主播可通过 OBS 一键开播。 |  |
礼物配置 | 支持礼物和礼物分类的新增、编辑、删除，并支持多语言配置。 |  |
系统框架
快速接入
步骤 1：环境配置及开通服务
步骤 2：下载项目
从 GitHub Release 页面下载最新发布包，或通过 git clone：
git clone https://github.com/Tencent-RTC/TUILiveKit_Managercd TUILiveKit_Managerpnpm install
步骤 3：配置服务端
1. 编辑
packages/server/config/.env：SDK_APP_ID=1400000001 # 请替换您的 SDKAppIDSECRET_KEY=xxxxxxx # 请替换您的 SecretKeyUSER_ID=administrator # 请替换您的管理员 userID
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 对象存储（默认）
说明：
STORAGE_PROVIDER=cosCOS_SECRET_ID=your_secret_id # 腾讯云 API SecretIdCOS_SECRET_KEY=your_secret_key # 腾讯云 API SecretKeyCOS_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=customCUSTOM_UPLOAD_URL=https://your-api.com/upload # 上传接口地址（必填）CUSTOM_ACCESS_DOMAIN=https://cdn.your-api.com # （可选）文件访问域名前缀CUSTOM_UPLOAD_FIELD=file # （可选）上传文件字段名，默认 fileCUSTOM_RESPONSE_URL_FIELD=data.url # （可选）响应中 URL 字段的 JSON 路径，默认 data.urlCUSTOM_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.js 的 PROVIDER_MAP 中注册。3. 在
.env 中设置 STORAGE_PROVIDER=your_key 并添加对应配置项。内容审核能力
内容审核能力需要使用云 API 功能，因此需要开通对应能力以及配置相关密钥才能使用。
编辑
packages/server/config/.env：# 腾讯云 API 密钥（内容审核、违规标签等功能依赖）TENCENT_CLOUD_SECRET_ID=xxxx # 请替换您的腾讯云 SecretIdTENCENT_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）。VITE_API_BASE_URL=https://your-scf-url.com/api
注意：
your-scf-url.com 要替换成实际的域名和端口。
相关文档
开通服务
账号管理
云函数新手指引
文档反馈