Search code examples
node.jsffmpegfluent-ffmpeg

Creating a GIF with fluent-ffmpeg, overlay is not shown?


I'm trying to create a GIF from an mp4 video, with an overlay on it. So there are two inputs, video.mp4 and overlay.png, both of them are https urls.

The gif is created, ffmpeg shows no errors but the overlay doesn't appear in the gif. The code:

ffmpeg()
    .withOptions([
        '-i video.mp4'
        `-ss 1`,
        `-i overlay.png`,
        '-f gif',
        `-filter_complex [0:v]trim=duration=3,setpts=PTS-STARTPTS,scale=450:-1[trimmed];[trimmed]split[trimmed1][trimmed2];[trimmed2]reverse[rev];[trimmed1][rev]concat=n=2:v=1:a=0[v];[v][1:v]overlay=0:0:format=rgb[overlayed];[overlayed]split[a][b];[a]palettegen=stats_mode=diff[palette];[b][palette]paletteuse=bayer:bayer_scale=3.5`
    ])
    .on('start', cmdLine => {
        console.log(`Started FFMpeg`, cmdLine);
    })
    .on('end', () => {
        console.log(`Success!.`);
        resolve();
    })
    .on('error', (err: Error, stdout, stderr) => {
        console.log(` Error:`, err.message);
        console.error('stdout:', stdout);
        console.error('stderr:', stderr);
        reject();
    })
    .pipe(destinationStream, { end: true });

Note: I have to use a stream, instead of saving to file.


Solution

  • The issue was the order of the args. If I order them this way:

    [
        `-ss 1`,
        '-i video.mp4'    
        `-i overlay.png`,
        `-filter_complex [0:v]trim=duration=3,setpts=PTS-STARTPTS,scale=450:-1[trimmed];[trimmed]split[trimmed1][trimmed2];[trimmed2]reverse[rev];[trimmed1][rev]concat=n=2:v=1:a=0[v];[v][1:v]overlay=0:0:format=rgb[overlayed];[overlayed]split[a][b];[a]palettegen=stats_mode=diff[palette];[b][palette]paletteuse=bayer:bayer_scale=3.5`
        '-f gif'
    ]
    

    Then the overlay shows up. I didn't know the order mattered for ffmpeg.