NodeJS中Canvas通过FFmpeg推RTMP流，实时速度异常求助

核心场景 #

在Node.js环境中渲染Canvas内容，通过FFmpeg子进程推流至RTMP服务器（本地测试，最终目标Twitch），需实现稳定30FPS的实时流输出。

已尝试方案的问题分析 #

方案1：循环渲染+即时推送 #

代码问题：

• 参数笔误：String(.fps)应为String(fps)，导致FFmpeg帧率配置错误
• 未指定输入格式，FFmpeg需自动检测，启动延迟35秒以上
• 渲染与推送在同一setImmediate循环中，CPU过载，推送速度完全失控，帧率仅3.9FPS，流延迟超1分钟

观察结果：流启动慢、帧率极低、画面卡顿跳变

方案2：渲染与推送分离 #

代码问题：

• 渲染间隔错误：setTimeout(() => render(), 1/fps)的单位是毫秒，1/30≈0.03ms，导致疯狂重复渲染，内存占用飙升
• 推送速度远高于渲染速度，FFmpeg收到大量重复帧，时间戳混乱，画面长时间停滞

观察结果：初始帧率上升快，但画面时间戳停滞

方案3：定时推送帧 #

代码问题：

• setTimeout精度不足，加上JavaScript事件循环延迟，实际推送帧率逐渐下降至16FPS
• 未处理FFmpeg stdin背压，数据积压导致流卡顿

观察结果：帧率持续下降，画面速度异常

修正后的实现方案 #

1. 正确的FFmpeg参数配置 #

明确输入格式、帧率，优化编码参数适配RTMP实时推流：

import { spawn } from 'child_process';
import { createCanvas } from 'canvas';

const canvas = createCanvas(1920, 1080);
const ctx = canvas.getContext('2d');
const fps = 30;
const frameInterval = 1000 / fps; // 每帧间隔毫秒

// FFmpeg参数：指定原始RGBA输入，实时处理，优化编码延迟
const ffmpeg = spawn('ffmpeg', [
  '-re', // 以实时速度处理输入
  '-f', 'rawvideo', // 输入为原始视频流
  '-pixel_format', 'rgba', // Canvas默认输出RGBA格式
  '-video_size', '1920x1080', // 输入分辨率
  '-framerate', String(fps), // 输入帧率
  '-i', '-', // 从标准输入读取

  // 编码配置适配RTMP/Twitch
  '-c:v', 'libx264',
  '-preset', 'ultrafast', // 优先编码速度，实时推流必备
  '-tune', 'zerolatency', // 零延迟优化
  '-r', String(fps), // 输出帧率
  '-g', String(2 * fps), // GOP大小，Twitch建议为2倍帧率
  '-crf', '25', // 质量控制，值越小质量越高，25为平衡值
  '-pix_fmt', 'yuv420p', // RTMP标准支持的像素格式
  '-c:a', 'aac',
  '-b:a', '128k', // 音频比特率
  '-f', 'flv',
  'rtmp://127.0.0.1/live'
]);

// 输出FFmpeg日志
ffmpeg.stderr.pipe(process.stderr);
ffmpeg.on('error', (err) => console.error('FFmpeg启动失败:', err));
ffmpeg.on('exit', (code) => console.log('FFmpeg退出，代码:', code));

// 处理stdin背压，避免数据积压
let isPushing = false;
const pushFrame = (buffer) => {
  if (isPushing) return;
  isPushing = true;
  const canWrite = ffmpeg.stdin.write(buffer);
  if (!canWrite) {
    ffmpeg.stdin.once('drain', () => {
      isPushing = false;
    });
  } else {
    isPushing = false;
  }
};

// 精确控制渲染与推送帧率
let lastFrameTime = Date.now();
const renderAndPush = () => {
  // 渲染Canvas内容
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 1920, 1080);
  ctx.font = '100px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText(new Date().toLocaleString(), 500, 500);

  // 获取原始RGBA缓冲区，比PNG格式更快
  const buffer = canvas.toBuffer('raw');

  // 推送帧到FFmpeg
  pushFrame(buffer);

  // 修正帧率误差，抵消事件循环延迟
  const now = Date.now();
  const delay = Math.max(0, frameInterval - (now - lastFrameTime));
  lastFrameTime = now;
  setTimeout(renderAndPush, delay);
};

// 启动推流
renderAndPush();

2. 关键优化点 #

• 指定输入格式：使用rawvideo+rgba，避免FFmpeg自动检测输入的延迟，同时减少Canvas转码开销
• 实时速度控制：-re参数配合代码中精确的帧间隔计算，保证推流速度与实时同步
• 编码延迟优化：ultrafast预设+zerolatency调优，是实时推流的核心配置，降低编码延迟
• 背压处理：监听stdin的drain事件，防止数据积压导致的帧率下降
• 帧率精度修正：通过计算上一帧的实际耗时，调整下一次渲染的延迟，抵消JavaScript事件循环的误差

3. 音频补充（Twitch必备） #

Twitch要求推流包含音频流，若无需实际音频，可添加静音音频生成参数：

// 在FFmpeg参数的输入部分添加：
'-f', 'lavfi',
'-i', 'anullsrc=channel_layout=stereo:sample_rate=44100',

内容的提问来源于stack exchange，提问作者Weston