I'm trying to concatenate multiple videos with react using @ffmpeg. I tried creating a GIF from the video, and it's working fine, but I'm not having luck with video concatenation. I'm getting a "memory access out of bounds" error. Have no idea what can go wrong here. Any help will be appreciated.
const mergeVideos = async () => {
let myFile = ''
for (let i = 0; i < video.length; i++) {
myFile += `file ${ await fetchFile(video[i]) }`
}
ffmpeg.FS('writeFile', 'MyList.txt', myFile);
await ffmpeg.run('-f','concat', '-safe',0, '-i', 'MyList.txt', '-codec','-c', 'output.mp4');
// Read the result
data = ffmpeg.FS('readFile', 'output.mp4');
// Create a URL
const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4'}));
setMergedVideos(url)
After spending endless hours I finally found my mistake. I was writing uInt8Array returned from the fetchFile to the txt file which was wrong and was causing memory of bound error. The correct way is to write the uInt8Array to the memory and write the name of the files to the txt file.
const mergeVideos = async () => {
let myFile = '';
for (const f of video) {
const { name } = f;
await ffmpeg.FS('writeFile', name, await fetchFile(f));
myFile += `file ${name} \n`;
}
// Write the file to memory
await ffmpeg.FS('writeFile', 'MyList.txt', myFile);
await ffmpeg.run(
'-f',
'concat',
'-safe',
0,
'-i',
'MyList.txt',
'-c',
'copy',
'output.mp4',
);
// // Read the result
let data = await ffmpeg.FS('readFile', 'output.mp4');
// // Create a URL
const url = URL.createObjectURL(
new Blob([data.buffer], { type: 'video/mp4' }),
);
setMergedVideos(url);
};