I’m attempting to convert a series of base64 encoded frames (captured from a canvas) to an MP4 video using FFMPEG but seem to be running into following error on attempting to run the conversion process:

frame0000.png: Invalid data found when processing input

The specified file is the first in the sequence of circa 25 PNG frames I’m attempting to convert. I’ve confirmed that the base64 png file is formatted correctly both by checking its signature and actually downloading a single frame and opening it. However, for some reason FFMPEG doesn’t appear to recognise the PNG file data. What follows is a snippet of the relevant parts of the conversion routine, some details have been omitted for the sake of brevity:

  import ffmpeg from 'ffmpeg.js/ffmpeg-mp4.js';


 // Write each PNG image to the virtual filesystem of ffmpeg.wasm
    const inputFiles = videoFrames.map((dataUrl, index) => ({
        name: `frame${index.toString().padStart(4, '0')}.png`,
        data: this.#base64ToUint8Array(dataUrl)
    }));


    
    let command = `-loglevel debug -framerate 30`;
    inputFiles.forEach((buffer, index) => {
        command += ` -i frame${index.toString().padStart(4, '0')}.png`; // Correctly padded frame names
    });
    command += ` -c:v libx264 -pix_fmt yuv420p ${outputFileName}`;
    

    //validate png frame data by checking its signature.
    inputFiles.forEach(file => {
        if (!this.#isValidPNG(file.data)) {
            throw new Error(`Invalid PNG file: ${file.name}`);
        }
    });

    // Write each input file to MEMFS
    inputFiles.forEach(file => {
        ffmpeg({
            MEMFS: [file],
            arguments: ['-version'],
            stdin: () => { }
        });
    });

    // Run ffmpeg
    const result = ffmpeg({
        MEMFS: inputFiles,
        //arguments: args,
        arguments: command.split(' '),
        stdin: () => { },
    });

Additionally here is the referenced ancillary, helper function that converts the base64 encoded PNG files to a stream of equivalent bytes:

 #base64ToUint8Array(base64) {
    const binaryString = atob(base64.split(',')[1]);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes;
}

Is there anything obvious that I’m missing that may account for the error I’m seeing in the debug console? I should mention that I’ve switched on debug-level logging in FFMPEG and can provide the full console output if necessary.