直播管理系统（Web 桌面浏览器 React 版）
Download
聚焦模式
字号
概述
直播管理系统（React 版），提供直播监控、直播间管理、礼物配置、直播间控制台等完整的直播运营管理能力。
功能介绍
直播监控：多路同屏监播、低延迟播放、房间搜索、强制关播。
直播间详情：实时播放、数据统计、用户管理（禁言/封禁）。
直播间管理：直播间列表、创建/编辑/解散房间、OBS 推流配置。
礼物配置：礼物增删改、分类管理、多语言配置。
功能展示
直播监控
直播间管理
直播间详情
礼物管理
快速接入
步骤 1：环境配置及开通服务
步骤 2：下载项目
git clone https://github.com/Tencent-RTC/TUILiveKit_Managercd TUILiveKit_Managerpnpm install
步骤 3：配置服务端
编辑
packages/server/config/.env：SDK_APP_ID=1400000001 # 请替换您的 SDKAppIDSECRET_KEY=xxxxxxx # 请替换您的 SecretKeyUSER_ID=administrator # 请替换您的管理员 userIDDOMAIN=console.tim.qq.com # 请替换为您的 SDKAppID 所属的域名，按照地域区分
启动服务：
pnpm run start:server
注意：
默认端口为 9000，可以通过配置
.env 中的 PORT 来修改端口号，且需要允许防火墙访问该端口。步骤 4：配置图片上传（可选）
系统的礼物缩略图、礼物素材、房间封面等功能依赖图片上传，需要配置存储服务。如果不配置，前端会自动降级为 URL 手动输入模式，不影响其他功能使用。
在
packages/server/config/.env 中追加存储配置，系统支持两种存储 Provider：方式一：腾讯云 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 并添加对应配置项。步骤 5：配置前端
编辑
packages/react/.env：VITE_API_BASE_URL=http://localhost:9000/api
注意：
VITE_API_BASE_URL 中的端口号要和之前配置 server 启动的端口一致。
步骤 6：启动前端
pnpm run dev:react
自由定制
您可以在现有代码基础上对页面样式、布局、功能进行修改。所有页面代码位于 react 目录以及 common 目录中，可参考源码结构进行扩展。
生产部署
说明：
如果您已经有自己的服务器，可以选择方式一：自建部署，可以更加灵活的进行定制和集成到您已有的系统中。
如果您想快速试用或者演示，可以选择方式二：云函数 + COS/EdgeOne Pages，省去自己购买和配置服务器更加快捷方便。
方式一：自建部署
服务端：修改配置后将 server 部署到您的服务器， 运行
node src/index.js 启动服务器。前端：修改
VITE_API_BASE_URL 后在根目录下 pnpm run build:react，将构建产物部署到静态资源服务器如 Nginx，也可以把构建产物放到之前服务器的 public 目录下，可以和服务器共用端口，此时可以配置 VITE_API_BASE_URL=/api，前端使用相对路径请求 api 接口。方式二：云函数 + COS / EdgeOne Pages
服务端：将 server 目录上传至腾讯 云函数 （Web 函数，Node.js 18.15）。
前端：创建
.env.production：设置云函数请求地址后，在根目录下 pnpm run build:react，将构建产物上传至 COS 或 EdgeOne Pages。VITE_API_BASE_URL=https://your-scf-url.com/api
注意：
your-scf-url.com 要替换成实际的域名和端口。
相关文档
开通服务
账号管理
云函数新手指引
文档反馈