使用 Node.js、Canvas 和 FFmpeg 实现实时视频流生成与推送

Cellinlab

发布于 2023-05-17 21:09:35

2K0

发布于 2023-05-17 21:09:35

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

# 使用 Node.js、Canvas 和 FFmpeg 实时生成并推送视频流

# 1. 背景和需求

在许多实时视频应用场景中，我们需要动态生成实时视频流并将其推送到 RTMP 服务器。例如，我们可能需要生成一个实时显示当前时间的视频流，或者在游戏直播时显示实时弹幕等。本文将介绍如何使用 Node.js、Canvas 和 FFmpeg 实现这一需求。

本文将分为两个部分。第一部分将介绍如何使用 Node.js、Canvas 和 FFmpeg 生成一个包含 100 帧图像的静态视频文件。第二部分将基于第一部分的内容，介绍如何实时生成并推送视频流到 RTMP 服务器。

在开始实现之前，我们需要先确保安装了以下依赖：

Node.js
Canvas
Fluent-ffmpeg
Moment

接下来，我们将分别介绍两个部分的实现。

# 2. 生成静态视频文件

# 2.1 准备环境和依赖

首先，我们需要引入相关库和模块，如 canvas、fluent-ffmpeg、moment、path 和 fs。

const { createCanvas } = require("canvas");
const ffmpeg = require("fluent-ffmpeg");
const moment = require("moment");

const path = require("path");
const fs = require("fs");

接着，我们设置视频的宽度、高度和帧率。

const width = 640;
const height = 480;
const fps = 30;

# 2.2 创建 Canvas 并绘制帧

创建一个 canvas 并获取 2D 绘图上下文。

const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");

定义一个 gerneateFrame 函数，它会接收一个帧序号作为参数，然后绘制帧上的文本信息，包括帧序号和当前时间，将帧内容保存为一个 PNG 图片。

const gerneateFrame = async (frameNum) => {
  const time = moment().format("YYYY-MM-DD HH:mm:ss");
  const text = `frame: ${frameNum}, time: ${time}`;

  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "white";
  ctx.font = "30px Arial";
  ctx.fillText(text, 10, height / 2);

  const filename = `frame-${frameNum.toString().padStart(5, "0")}.png`;
  const filepath = path.join(__dirname, "output", filename);

  await saveFrame(filepath);
  console.log(`frame ${frameNum} generated`);
};

# 2.3 保存每一帧为图片

定义一个 saveFrame 函数，它会将生成的 PNG 图片保存到指定的文件路径。

const saveFrame = (filepath) => {
  return new Promise((resolve, reject) => {
    const out = fs.createWriteStream(filepath);
    const stream = canvas.createPNGStream();
    stream.pipe(out);
    out.on("finish", () => {
      resolve();
    });
  });
};

# 2.4 使用 FFmpeg 合成视频

定义一个 generateVideo 函数，它会使用 ffmpeg 将生成的 PNG 图片合成一个 MP4 视频文件。

const generateVideo = () => {
  const cmd = ffmpeg()
    .input(path.join(__dirname, "output", "frame-%05d.png"))
    .inputFPS(fps)
    .videoCodec("libx264")
    .output(path.join(__dirname, "output", "output.mp4"))
    .on("start", () => {
      console.log("video generating...");
    })
    .on("progress", (progress) => {
      console.log(`video progress: ${progress.percent}%`);
    })
    .on("end", () => {
      console.log("video generated");
    })
    .on("error", (err) => {
      console.log("video error:", err);
    });
  cmd.run();
};

最后，我们定义一个 generateFrames 函数，它会生成 100 帧 PNG 图片，然后调用 generateVideo 函数生成视频。然后，调用 generateFrames 函数来执行整个流程。

const generateFrames = async () => {
  for (let i = 0; i < 100; i++) {
    await gerneateFrame(i);
  }

  generateVideo();
};

generateFrames();

至此，我们已经实现了使用 Node.js、Canvas 和 FFmpeg 生成一个包含 100 帧图像的静态视频文件的功能。接下来，我们将介绍如何基于这个功能实现实时生成并推送视频流。

# 3. 实时生成并推送视频流

# 3.1 准备环境和依赖

首先，我们需要引入相关库和模块，如 canvas、fluent-ffmpeg、moment 和 child_process。

const { createCanvas } = require("canvas");
const ffmepeg = require("fluent-ffmpeg");
const moment = require("moment");

const { spawn } = require("child_process");

接着，我们设置视频的宽度、高度和帧率。

const width = 640;
const height = 480;
const fps = 15;

# 3.2 创建 Canvas 并实时绘制帧

创建一个 canvas 并获取 2D 绘图上下文。

const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");

定义一个 generateFrame 函数，它会实时绘制帧上的文本信息，包括当前时间。

const generateFrame = () => {
  const time = moment().format("YYYY-MM-DD HH:mm:ss");
  const text = `Live: ${time}`;

  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "white";
  ctx.font = "30px Arial";
  ctx.fillText(text, 10, height / 2);
};

# 3.3 使用 FFmpeg 实时推送视频流到 RTMP 服务器

定义一个 timeToLive 函数，它将使用 FFmpeg 实时推送生成的视频流到指定的 RTMP 服务器。

const timeToLive = async () => {
  const cmd = ffmepeg()
    .input('pipe:0')
    .inputFPS(fps)
    .videoCodec('libx264')
    .size(`${width}x${height}`)
    .format('image2pipe')
    .output('rtmp://192.168.0.185:1935/livehime')  // 可以使用 B 站直播姬获取第三方推流地址
    .outputOptions([
      '-f flv',
      '-b:v 500k',
      '-preset ultrafast',
    ]);

  cmd.run();

  cmd.on('error', (err) => {
    console.log(`An error occurred: ${err.message}`);
  });

  cmd.on('end', () => {
    console.log('Processing finished !');
  });

  cmd.on('start', async (commandLine) => {
    console.log(`Spawned Ffmpeg with command: ${commandLine}`);

    const args = commandLine.split(' ').slice(1);
    const process = spawn('ffmpeg', args, {
      stdio: ['pipe', 'pipe', 'pipe'],
      detached: true,
    });

    ...
  });
}

timeToLive();

在 timeToLive 函数中，我们创建一个子进程来执行 FFmpeg 命令，将实时生成的帧推送到 RTMP 服务器。我们使用递归函数 sendFrame 来不断生成并发送帧。

process.on("exit", (code, signal) => {
  console.log(`child process exited with code ${code} and signal ${signal}`);
  if (process.stdin) {
    process.stdin.end();
  }
  if (process.stdout) {
    process.stdout.destroy();
  }
  if (process.stderr) {
    process.stderr.destroy();
  }
  if (!process.killed) {
    process.kill();
  }
});

process.stderr.on("data", (data) => {
  console.log(`stderr: ${data}`);
});

const sendFrame = async () => {
  generateFrame();

  const stream = canvas.createPNGStream();

  stream.pipe(process.stdin, { end: false });

  await new Promise((resolve) => setTimeout(resolve, 1000 / (fps / 2)));
  sendFrame();
};

sendFrame();

在 sendFrame 函数中，我们首先调用 generateFrame 函数生成一帧，然后将帧数据通过 PNG 流发送到 FFmpeg 子进程的标准输入。之后，我们使用 setTimeout 控制帧发送的频率，以保证恰当的帧率。

执行 timeToLive 函数后，程序将实时生成帧并将视频流推送到指定的 RTMP 服务器。