Node.js用jsdom+fabric渲染MP4视频遇未实现错误及Canvas问题

既然已经通过ffmpeg提取了视频帧，你可以结合Node.js环境的Canvas库与ffmpeg完成视频合成，以下是具体实现方案：

1. 安装依赖 #

先安装必要的npm包：

npm install canvas fluent-ffmpeg

• canvas：提供Node.js环境下的Canvas绘图能力
• fluent-ffmpeg：用JS封装ffmpeg命令，简化视频合成逻辑

注意：系统需要提前安装ffmpeg（Windows/Linux/macOS可直接安装对应系统包）

2. 核心实现步骤 #

步骤1：用Canvas处理视频帧（支持fabric.js扩展） #

假设你已将视频帧保存为本地序列图片（如frame_001.png），可以用canvas加载并绘制，也可以结合fabric.js添加图形、文字等元素：

const { createCanvas, loadImage } = require('canvas');
const { fabric } = require('fabric');
const fs = require('fs');
const path = require('path');

// 匹配原视频的宽高
const frameWidth = 1920;
const frameHeight = 1080;
const baseCanvas = createCanvas(frameWidth, frameHeight);
const fabricCanvas = new fabric.Canvas(null, {
  width: frameWidth,
  height: frameHeight,
  canvas: baseCanvas // 关联Node.js Canvas实例
});

// 处理单帧：加载原图+添加fabric元素
async function processFrame(framePath) {
  const img = await loadImage(framePath);
  const fabricImg = new fabric.Image(img);
  
  // 清空画布并添加原图
  fabricCanvas.clear().add(fabricImg);
  
  // 示例：添加自定义文本（可替换为你的fabric渲染逻辑）
  const textLayer = new fabric.Text('Processed Video', {
    left: 60,
    top: 60,
    fontSize: 48,
    fill: '#ffffff',
    stroke: '#000000',
    strokeWidth: 2
  });
  fabricCanvas.add(textLayer);
  fabricCanvas.renderAll();
  
  // 返回处理后的帧Buffer
  return baseCanvas.toBuffer('image/png');
}

步骤2：用ffmpeg合成视频 #

通过fluent-ffmpeg将处理后的帧序列合成MP4，支持直接传入帧Buffer流（无需保存中间文件）：

const ffmpeg = require('fluent-ffmpeg');
const { PassThrough } = require('stream');

async function generateVideo(framePaths, outputPath, fps = 25) {
  return new Promise((resolve, reject) => {
    const command = ffmpeg()
      .input('pipe:0') // 从标准输入读取帧流
      .inputFPS(fps) // 设置与原视频一致的帧率
      .outputOptions([
        '-c:v libx264', // 使用H.264编码
        '-pix_fmt yuv420p', // 兼容主流播放器的像素格式
        '-crf 23' // 质量控制参数，18-28为常用范围，值越小质量越高
      ])
      .output(outputPath)
      .on('end', resolve)
      .on('error', reject);

    const frameStream = new PassThrough();
    frameStream.pipe(command.stdin);

    // 逐帧处理并写入流
    (async () => {
      for (const path of framePaths) {
        const frameBuffer = await processFrame(path);
        frameStream.write(frameBuffer);
      }
      frameStream.end();
    })();
  });
}

// 调用示例：读取所有帧路径并生成视频
const frameDir = './frames';
const framePaths = fs.readdirSync(frameDir)
  .sort((a, b) => parseInt(a.split('_')[1]) - parseInt(b.split('_')[1]))
  .map(file => path.join(frameDir, file));

generateVideo(framePaths, './final_output.mp4').then(() => {
  console.log('视频生成完成');
}).catch(err => {
  console.error('生成失败:', err);
});

3. 优化提示 #

• 若帧数量极大，建议用流处理逐帧写入，避免一次性加载所有帧导致内存溢出
• 保持帧文件命名有序（如frame_0001.png），确保合成顺序正确
• 若无需保留中间帧，可直接将Canvas处理后的Buffer传入ffmpeg流，跳过本地文件存储

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