如何从FFmpeg流中连续提取完整PNG帧？Node.js屏幕捕获异常排查

问题根源 #

• stdout.on('data')触发时传递的是流式数据块，不是完整的单帧图像。直接把每个数据块写入文件，自然会得到大量损坏的不完整文件。
• 代码里把PNG格式的数据流写入.bmp后缀文件，格式不匹配，也会导致部分图像无法正常打开。
• 现有FFmpeg参数未明确指定输出帧率，可能导致帧输出不稳定；ddagrab未强制捕获完整帧，引发部分区域为空的问题。

修复方案 #

1. 正确处理流式数据，拼接完整PNG帧 #

维护缓冲区持续收集数据，通过PNG文件的首尾签名检测完整帧，提取后再写入文件：

import { spawn as spawnChildProcess } from 'child_process';
import fs from 'fs';

// 帧缓冲区，用于拼接流式数据
let frameBuffer = Buffer.from([]);
// PNG文件头签名（固定标识）
const PNG_HEADER = Buffer.from([0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]);
// PNG文件尾签名（固定标识）
const PNG_FOOTER = Buffer.from([0x49, 0x45, 0x4E, 0x44, 0xAE, 0x42, 0x60, 0x82]);

const videoRecordingProcess = spawnChildProcess(
  ffmpegPath,
  [
    '-init_hw_device', 'd3d11va',
    '-filter_complex', 'ddagrab=0:framerate=60:full_frame=1,hwdownload,format=bgra',
    '-c:v', 'png',
    '-r', '60', // 强制输出60fps
    '-vsync', '0', // 严格按输入帧率输出，避免丢帧/重复帧
    '-f', 'image2pipe',
    '-loglevel', 'error',
    '-hide_banner',
    'pipe:'
  ],
  { stdio: 'pipe' }
);

videoRecordingProcess.stderr.on('data', (data) => console.error(data.toString()));

videoRecordingProcess.stdout.on('data', (chunk) => {
  // 将新数据追加到缓冲区
  frameBuffer = Buffer.concat([frameBuffer, chunk]);

  // 循环检测并提取完整PNG帧
  while (true) {
    const headerIndex = frameBuffer.indexOf(PNG_HEADER);
    if (headerIndex === -1) break;

    const footerIndex = frameBuffer.indexOf(PNG_FOOTER, headerIndex);
    if (footerIndex === -1) break;

    // 提取完整帧并更新缓冲区
    const fullFrame = frameBuffer.slice(headerIndex, footerIndex + PNG_FOOTER.length);
    frameBuffer = frameBuffer.slice(footerIndex + PNG_FOOTER.length);

    // 写入文件，注意使用.png后缀
    const fileName = `/home/goodwin/genshin-repertoire-autoplay/imgs/${Date.now()}.png`;
    fs.promises.writeFile(fileName, fullFrame).catch(err => console.error(err));
  }
});

// 处理进程退出时的剩余缓冲区数据
videoRecordingProcess.on('exit', () => {
  if (frameBuffer.length === 0) return;
  const headerIndex = frameBuffer.indexOf(PNG_HEADER);
  const footerIndex = frameBuffer.indexOf(PNG_FOOTER, headerIndex);
  if (headerIndex !== -1 && footerIndex !== -1) {
    const fullFrame = frameBuffer.slice(headerIndex, footerIndex + PNG_FOOTER.length);
    fs.promises.writeFile(`/home/goodwin/genshin-repertoire-autoplay/imgs/${Date.now()}_final.png`, fullFrame).catch(err => console.error(err));
  }
});

2. 优化FFmpeg参数说明 #

• 给ddagrab添加framerate=60强制捕获60fps画面，full_frame=1确保捕获完整屏幕区域，避免部分区域为空。
• -r 60强制输出帧率与输入匹配，保证每秒输出60帧。
• -vsync 0禁用帧同步策略，避免FFmpeg自动丢帧或重复帧。

3. 其他注意事项 #

• 禁止将PNG数据流写入.bmp文件，格式不匹配会导致图像解析失败。
• 若仍存在帧不完整问题，可尝试将format=bgra改为format=rgb0，部分硬件加速场景下该格式兼容性更好。
• 高帧率下磁盘异步写入可能出现IO瓶颈，建议改用内存缓存后批量写入，或使用更快的存储介质。

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