Search code examples
reactjsffmpegout-of-memoryvideo-processingfs

Getting a "memory access out of bounds" error while concatenating multiple videos with @mmfpeg React


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)

}enter image description here


Solution

  • 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);
    

    };