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.
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.