从零构建 RTMP 多路视频切换台：Electron + React 桌面应用实战

为什么要做这个

市面上的视频切换台要么太贵（几千上万的专业设备），要么功能太简陋（OBS 虽然强大但操作复杂）。我想要一个：打开就能用、快捷键切换、支持 HDMI 输出到第二屏幕的轻量工具。

于是用 Electron + React 撸了一个，已登记软件著作权。

技术架构

Electron Main Process
├── 主控窗口 (1400x880)
│   ├── 多路流预览（网格/单屏视图）
│   └── 快捷键切换 (1-9 数字键)
├── HDMI 输出窗口 (全屏无边框第二屏)
├── 音频混音台 (独立窗口, 720x480)
└── 设置面板

React 渲染层
├── flv.js / mpegts.js 低延迟播放
├── Canvas API 水印叠加
└── Web Audio API 音频处理

低延迟播放

直播流的延迟是关键。做了几个优化：

• 禁用 GOP 缓存，强制从最新关键帧开始播放
• 自动追播：检测延迟超过阈值时自动 seek 到最新位置
• 最终延迟控制在 1 秒以内

音频混音台

独立窗口显示 VU 表 + 频谱可视化，支持音量推子和静音控制。关键是不额外拉流——直接从已有的视频流中提取音频轨道。

HDMI 输出

利用 Electron 的多窗口能力，创建一个全屏无边框窗口在第二显示器上。切换输出源时，直接将对应流的 video 元素 clone 到输出窗口。

水印叠加

用 Canvas API 在输出画面上叠加文字或图片水印：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
function drawFrame(video, watermark) {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  ctx.globalAlpha = 0.3;
  ctx.drawImage(watermark, x, y);
  ctx.globalAlpha = 1.0;
}

踩过的坑

• Electron 多窗口间的 IPC 通信要处理好——主进程是消息总线，渲染进程之间不直接通信
• flv.js 在 Electron 里需要配置 webSecurity: false 才能正常拉流
• 全屏窗口在 Windows 和 macOS 上的行为不同，需要分别处理

如果你也想做类似的桌面应用，Electron 确实是最快的选择。虽然有人吐槽它吃内存，但对于功能优先的场景来说，开发效率才是第一位的。