# 使用 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。
代码语言：javascript复制const { createCanvas } = require("canvas");
const ffmpeg = require("fluent-ffmpeg");
const moment = require("moment");
const path = require("path");
const fs = require("fs");接着，我们设置视频的宽度、高度和帧率。
代码语言：javascript复制const width = 640;
const height = 480;
const fps = 30;# 2.2 创建 Canvas 并绘制帧
创建一个 canvas 并获取 2D 绘图上下文。
代码语言：javascript复制const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");定义一个 gerneateFrame 函数，它会接收一个帧序号作为参数，然后绘制帧上的文本信息，包括帧序号和当前时间，将帧内容保存为一个 PNG 图片。
代码语言：javascript复制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 图片保存到指定的文件路径。
代码语言：javascript复制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 视频文件。
代码语言：javascript复制const generateVideo = () => {
const cmd = ffmpeg()
.input(path.join(__dirname, "output", "frame-d.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 函数来执行整个流程。
代码语言：javascript复制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。
代码语言：javascript复制const { createCanvas } = require("canvas");
const ffmepeg = require("fluent-ffmpeg");
const moment = require("moment");
const { spawn } = require("child_process");接着，我们设置视频的宽度、高度和帧率。
代码语言：javascript复制const width = 640;
const height = 480;
const fps = 15;# 3.2 创建 Canvas 并实时绘制帧
创建一个 canvas 并获取 2D 绘图上下文。
代码语言：javascript复制const canvas = createCanvas(width, height);
const ctx = canvas.getContext("2d");定义一个 generateFrame 函数，它会实时绘制帧上的文本信息，包括当前时间。
代码语言：javascript复制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 服务器。
代码语言：javascript复制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 服务器。
# 总结
本文介绍了如何使用 Node.js、Canvas 和 FFmpeg 实现实时视频流的生成和推送。首先，我们实践了如何生成一个静态视频文件，然后在此基础上实现了实时生成并推送视频流的功能。希望本文对您有所帮助！
# 完整代码
Generating-and-Streaming-Live-Video-with-Node.js-Canvas-and-FFmpeg (opens new window)
