Recherche avancée

Sur d’autres sites (4704)

• Encoding PNG to MP4 using FFMPEG.js

  11 juillet 2024, par Giles Thompson

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

  


  


  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';


  


       // map each PNG frame in the array of frames to an object with 
     //with a name and data component. Crucially the data component 
     //will be the result of the conversion of the base64 data to an 
     //equivalent stream of bytes; i've listed the source of the 
     //referenced conversion function below...
        const inputFiles = videoFrames.map((dataUrl, index) => ({
            name: `frame${index.toString().padStart(4, '0')}.png`,
            data: this.#base64ToUint8Array(dataUrl)
        }));

    
        //build up the FFMPEG command to execute.
        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;
    }


  


  Here is the referenced function that validates the PNG file by checking for the existence and validity of its signature i.e the
magic number that all PNG start with :

  


   #isValidPNG(pngArray) {
        const signature = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A];
        for (let i = 0; i < signature.length; i++) {
            if (pngArray[i] !== signature[i]) {
                return false;
            }
        }
        return true;
    }



  


  The most pertinent details of my current environment are as follows :

  


  


  OS : "Ubuntu Linux".
  
VERSION : "21.04 (Hirsute Hippo)".
  
NPM VERSION : "9.5.0".
  
FFMPEG-JS-VERSION : "^2.8.9001".
  
BROWSER : "Chromium 125.0.6422.60 snap"

  


  


  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.

  


• doc : libgme

  4 décembre 2018, par Gyan Doshi

  doc : libgme
  Add entry in external library list and add details to demuxer entry.
  

  • [DH] doc/demuxers.texi
  • [DH] doc/general.texi

• doc : chromaprint

  4 décembre 2018, par Gyan Doshi

  doc : chromaprint
  Add entry in external library list and add details to muxer entry.
  

  • [DH] doc/general.texi
  • [DH] doc/muxers.texi