如何用FFmpeg流式传输视频帧到Node Canvas，无需加载全量视频

你的核心问题是FFmpeg输出的流式buffer没有帧边界，导致无法对应单帧，同时需要输出Canvas可直接渲染的格式。以下是两种针对性解决方案：

一、流式连续逐帧处理（对应OpenCV的逐帧读取） #

你的原命令错误地混用了-f rawvideo和-vcodec png，前者输出无格式标识的原始像素数据，后者输出编码后的PNG文件，两者冲突导致FFmpeg输出混乱。正确做法是用image2pipe格式输出完整的单帧PNG，再通过PNG的固定头尾标识分割帧数据。

代码实现 #

const { spawn } = require('child_process');
const { Image } = require('canvas');

// PNG文件的头尾二进制标识，用于分割帧
const PNG_HEADER = Buffer.from([0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]);
const PNG_FOOTER = Buffer.from([0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82]);

let accumulatedBuffer = Buffer.alloc(0);
let frameCount = 0;

// 启动FFmpeg子进程，输出带帧边界的PNG流
const ffmpeg = spawn('ffmpeg', [
  '-i', 'test.mp4',
  '-vf', 'scale=1920:1080', // 统一帧尺寸，比-s参数更可靠
  '-vcodec', 'png',
  '-f', 'image2pipe', // 关键：将每帧作为独立PNG输出到管道
  '-an', // 忽略音频，减少输出数据
  '-sn', // 忽略字幕
  'pipe:1'
]);

// 处理流式输出的buffer，分割出完整PNG帧
ffmpeg.stdout.on('data', (chunk) => {
  accumulatedBuffer = Buffer.concat([accumulatedBuffer, chunk]);

  // 循环检测并提取完整的PNG帧
  while (true) {
    const headerPos = accumulatedBuffer.indexOf(PNG_HEADER);
    if (headerPos === -1) break; // 未找到PNG头，继续累积

    const footerPos = accumulatedBuffer.indexOf(PNG_FOOTER, headerPos);
    if (footerPos === -1) break; // 找到头但未找到尾，继续累积

    // 提取当前完整帧的buffer
    const frameBuffer = accumulatedBuffer.slice(headerPos, footerPos + PNG_FOOTER.length);
    // 更新累积buffer，移除已处理的帧数据
    accumulatedBuffer = accumulatedBuffer.slice(footerPos + PNG_FOOTER.length);

    // 处理单帧（渲染到Canvas）
    processFrame(frameBuffer);
  }
});

// 处理FFmpeg的错误日志
ffmpeg.stderr.on('data', (data) => {
  console.error(`FFmpeg日志: ${data.toString()}`);
});

// 处理FFmpeg进程退出
ffmpeg.on('close', (code) => {
  console.log(`FFmpeg进程结束，退出码: ${code}`);
});

// 单帧处理函数：将PNG buffer转为Canvas可渲染的Image对象
function processFrame(frameBuffer) {
  frameCount++;
  const img = new Image();
  
  img.onload = () => {
    console.log(`处理第${frameCount}帧，尺寸: ${img.width}x${img.height}`);
    // 这里替换为你的Canvas渲染逻辑
    // context.drawImage(img, 0, 0);
  };

  img.onerror = (err) => {
    console.error(`第${frameCount}帧加载失败:`, err);
  };

  img.src = frameBuffer;
}

二、按需读取指定帧（对应OpenCV的seek+read） #

如果不需要连续处理所有帧，而是按需获取某一特定时间点的帧，可以每次启动FFmpeg进程输出单帧，适合低频的按需读取场景。

代码实现 #

const { spawn } = require('child_process');
const { Image } = require('canvas');

// 获取指定时间点的单帧
async function getSingleFrame(videoPath, timestamp, width = 1920, height = 1080) {
  return new Promise((resolve, reject) => {
    const ffmpeg = spawn('ffmpeg', [
      '-ss', timestamp, // 起始时间，支持格式：00:00:00.000 或 秒数（如"5"表示第5秒）
      '-i', videoPath,
      '-vf', `scale=${width}:${height}`,
      '-vcodec', 'png',
      '-vframes', '1', // 仅输出1帧
      '-an',
      '-sn',
      'pipe:1'
    ]);

    let frameBuffer = Buffer.alloc(0);

    ffmpeg.stdout.on('data', (chunk) => {
      frameBuffer = Buffer.concat([frameBuffer, chunk]);
    });

    ffmpeg.on('close', (code) => {
      if (code !== 0) {
        return reject(new Error(`FFmpeg进程异常退出，码值: ${code}`));
      }
      const img = new Image();
      img.onload = () => resolve(img);
      img.onerror = (err) => reject(err);
      img.src = frameBuffer;
    });

    ffmpeg.stderr.on('data', (data) => {
      console.error(`FFmpeg日志: ${data.toString()}`);
    });
  });
}

// 使用示例：获取第5秒的帧
getSingleFrame('test.mp4', '5', 1920, 1080)
  .then((img) => {
    console.log(`获取到帧，尺寸: ${img.width}x${img.height}`);
    // context.drawImage(img, 0, 0);
  })
  .catch((err) => {
    console.error('获取帧失败:', err);
  });

三、注意事项 #

1. 确保系统已安装FFmpeg，且Node.js可直接调用（可指定FFmpeg绝对路径，如spawn('/usr/bin/ffmpeg', [...])）
2. 流式方案内存占用稳定，仅累积未处理的部分帧数据，适合大视频连续处理
3. Canvas的Image对象加载buffer为异步操作，处理时需注意异步流程，避免回调地狱可改用async/await封装
4. 如果需要处理原始像素数据（如TensorFlow.js），可改用rawvideo格式输出，按宽度*高度*通道数计算单帧字节数分割buffer，但该格式无法直接用drawImage渲染

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