Put images on video with ffmpeg in Node.js

Question

I am creating a server-side video renderer in node.js. I need to add images on an existing video file every frame. I need to set the specific position of each frame in the rendered video. I am holding all the frames of the images in Readable. This is my code that works, but does not take into account the position of the images. How can I modify it? Of course I have a list with images coordinates - but I don't know how to make a filter out of this.

this.stream is a list of images.

  const filter = ["[1:v]format=argb,setpts=PTS+" + 0 + "/TB[out]",
        {
            filter: "overlay",
            options: {
                enable: "between(t," + 0 + "," + 9 + ")",
                x: "0",
                y: "0",
            },
            inputs: "[0:v][out]",
            outputs: "tmp",
        }

        ]
        const Options = [
            "-crf 16",
            "-f mp4",
            "-vcodec libx264",
            "-movflags frag_keyframe+empty_moov",
            "-pix_fmt yuv420p",
        ];

        var ffmpeg = require('fluent-ffmpeg');
        ffmpeg.setFfmpegPath(ffm.path);
        var command = ffmpeg();

        const outputStream = fs.createWriteStream(this.Path + "test.mp4");

        command.input(this.Path + "input.mp4");
        command.input(this.stream).inputFPS(23);
        command.outputOptions(Options);
        command.fps(23);

        command.complexFilter(filter, "tmp");

        command.output(outputStream);

score 0 · Answer 1 · edited Jun 27 '22 at 11:09

Instead of using const filter I suggest using the build-in fluent-ffmpeg functions. This code will add an image positioned (50, 50):

video_path and image_path are file paths to video and image. overlay=50:50 will place your image at position x=50, y=50 from top-left. Then you save the file and handle errors

const command = ffmpeg(video_path)
    .input(image_path)
    .complexFilter([
      `overlay=50:50`,
    ])
    .saveToFile("./public/vid.mp4")
    .on("error", (err) => {
      console.log(err);
    })
    .on("end", () => {
      console.log("File saved.");
    });

For more info see github issue: https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/issues/770

Put images on video with ffmpeg in Node.js

1 Answers1