NovaCast Control Center (NovaCast 播控中心)
NovaCast 是一款专业级的 LED 大屏播控系统，专为展览展示、会议活动及商业显示场景设计。它提供了直观的 Web 控制界面，支持多格式媒体播放、实时叠加渲染（弹幕、字幕、Logo）以及丰富的 UI 自定义功能。
主要功能
- 实时播控： 专业级播放控制，支持倍速调节、进度跳转和音量管理。
- 媒体管理： 支持批量上传视频（单次最多 10 个），具备实时上传进度显示。支持新建文件夹、素材搜索、全选及批量删除功能。所有素材预览及封面截取过程均采用无声处理。
- 实时叠加层：
- 弹幕系统： 支持实时发送与显示弹幕。
- 时间同步字幕： 支持导入 SRT 字幕或手动编辑时间节点，实现精准字幕对齐。新增隐入隐出、左进右出、走马灯等多种出入场特效。字幕层级已优化至最顶层 (z-index: 100)，确保在视频及叠加层之上清晰显示。
- Logo 叠加： 支持自定义 Logo 上传与显示开关。
- 大屏待机画面： 支持多套待机素材切换，空闲时自动显示连接二维码。
- 系统监控： 实时监控 CPU、内存、GPU 及网络带宽占用情况。
- 高度自定义 UI： 支持暗黑/明亮模式切换，可自定义主题色、毛玻璃透明度、模糊度、圆角及边框。播控界面优化，片头片尾设置已整合至时间显示区域。
- 多端适配： 响应式设计，完美适配 PC、平板及手机端控制。
技术架构
- 前端框架： React 18, TypeScript, Vite
- 动画引擎： Framer Motion
- 样式系统： Tailwind CSS (Glassmorphism 2.0 风格)
- 图标库： Lucide React
部署指南
1. Windows 系统部署
- 环境准备： 安装 Node.js (建议 v18+)。
- 步骤：
- 下载源码并解压。
- 在文件夹内打开终端（PowerShell 或 CMD）。
- 运行
npm install安装依赖。 - 运行
npm run build进行生产环境构建。 - 使用静态服务器运行
dist目录：npx serve -s dist -p 3000。
- 开机自启： 可使用 PM2 或创建 Windows 快捷方式放入启动文件夹。
2. macOS 系统部署
- 环境准备： 安装 Node.js（可通过 Homebrew 安装：
brew install node）。 - 步骤：
- 打开终端，进入项目目录。
- 执行
npm install。 - 执行
npm run build。 - 使用
npx serve -s dist或配置 Nginx 托管。
3. Linux 系统部署 (推荐)
- 环境准备： 安装 Node.js 及 Nginx。
- 步骤：
-
克隆项目：
git clone <repository-url>。 -
安装依赖：
npm install。 -
构建项目：
npm run build。 -
Nginx 配置示例：
server { listen 80; server_name your_domain.com; location / { root /path/to/novacast/dist; index index.html; try_files $uri $uri/ /index.html; } } -
重启 Nginx：
sudo systemctl restart nginx。
-
4. 安卓 (Android) 系统部署
- 方法 A：使用 Termux (高级)
- 在安卓设备上安装 Termux。
- 在 Termux 中执行：
pkg install nodejs && pkg install git。 - 按照 Linux 部署步骤进行操作。
- 通过手机浏览器访问
localhost:3000。
- 方法 B：作为 PWA 安装
- 在服务器部署完成后，使用 Chrome 浏览器访问系统地址。
- 点击浏览器菜单中的“添加到主屏幕”或“安装应用”。
- 系统将以原生应用体验运行。
设计理念
NovaCast 遵循 “Glassmorphism 2.0” 设计哲学：
- 层次感： 多层玻璃面板，具有不同的模糊度和饱和度。
- 纯净感： 采用无边框卡片设计，打造无缝、现代的视觉体验。
- 交互感： 细微的悬停效果和微动画，引导用户操作。
- 易用性： 在所有主题下均保持高对比度文本和清晰的视觉层级。
© 2026 NovaCast Media Solutions. 保留所有权利。