ffmpegwasm / ffmpeg.wasm

FFmpeg for browser, powered by WebAssembly
https://ffmpegwasm.netlify.app
MIT License
14.11k stars 826 forks source link

Pass in base64 encoded images as input (invalid PNG signature error) #350

Open rbsam176 opened 2 years ago

rbsam176 commented 2 years ago

Describe the bug I'm receiving an error when passing in a base64 encoded image as the input, here are what I think are the relevant parts of the logs:

Invalid PNG signature Consider increasing the value for the 'analyzeduration' and 'probesize' options Input #1, image2, from 'image.png': Error while decoding stream #1:0: Invalid data found when processing input Cannot determine format of input stream 1:0 after EOF Error marking filters as finished Conversion failed!

My code is this:

fetches the video file: ffmpeg.FS('writeFile', name, await fetchFile(files[0]))

this is the base64 data uri: await ffmpeg.FS('writeFile', 'image.png', payload.elements[0].img)

my complex filter is a variable string, but I've eliminated this as being related to the cause of the issue: await ffmpeg.run('-i', name, '-i', 'image.png', '-filter_complex',${complexFilter}, '-map', '[out_v]' , '-pix_fmt', 'yuv420p', 'output.mp4')

I've tried passing it in as a base64 data uri, as just the raw base64 data, as a blob, I can't seem to work out the correct syntax. I've looked through the example scripts, but they retrieve from a local directory rather than encoded images. I'd appreciate it if anyone could help me out with the syntax here.

If it's helpful, here's a link to the base64 string that's inside of payload.elements[0].img: https://pastebin.com/EZNewbWX

This site can be used to decode it and show an image, which verifies the base64 data is valid.

benz2012 commented 1 year ago

It seems that the ffmpeg.FS('writeFile', ...) command does not properly interpret a DataURI string. I can't tell if it can only take a Uint8Array, but based on some of the docs, that was what I had to do to get it working.

I used the function from this Gist to convert my string that looked like 'data:image/png;base64,iVBORw0KGgoAAAANSU...' into a Uint8Array object, which was then properly written as an image file when using ffmpeg.FS('writeFile', ...)