Earthquake Project – Part 3

The final piece to our project is to stitch together all of the PNG frames we generated last time into a single MP4 video. We’ll utilize a 3rd party program to do most of the work for us. There’s a free product available called FFMPEG. You can read the installation instructions here.

Next, we’ll need to add the “fluent-ffmpeg” npm module to our project by typing the following:

npm install --save fluent-ffmpeg

Now that we have FFMPEG installed and hooked into node, let’s create a video-renderer.js file and add the following code:

const ffmpeg = require('fluent-ffmpeg');

process.env['FFMPEG_PATH'] = "PATH_TO_FFMPEG_EXECUTABLE_HERE";   // Replace this with the exact full location to ffmpeg executable (e.g. "D:/devtools/ffmpeg/bin/ffmpeg.exe")

console.log("Rendering video...");
ffmpeg()
    .input(__dirname + "/frames/frame-%06d.png")
    .output(__dirname + "/video.mp4")
    .fps(24)
    .on('progress', function(progress) {
        console.log(progress.percent + "% done");
    })
    .on('end', function(stdout, stderr) {
        console.log("Done!");
        console.log(stdout);
        console.log(stderr);
    })
    .run();

The source code is fairly straight-forward. fluent-ffmpeg is simply a wrapper around ffmpeg. We’re telling it to use all of the images that match the pattern as the input for the video file and to render 24 frames per second. Every time the “progress” event is triggered it will print its progress to the console.

Once this process is done, you should have a video created in your project folder. If for some reason the process failed, check the output at the end of the process. You may have some bad frames that need to be regenerated. To do this, delete the bad frames then re-run the frame-renderer.

If you enjoyed this series or have suggestions, please let me know by adding a comment below or reaching out to me on Twitter.

Source code to the entire series is available here: