Creating video from images

I have a lot of images in a page, and I want to allow my users to download the images as a video. It'd be great if that can be done on the client side so I don't have to think about or pay for servers. I tried @ffmpeg/ffmpeg but it gives the following error message, even when exactly following the example provided
ModuleBuildError: ./node_modules/@ffmpeg/ffmpeg/dist/esm/classes.js:104:28
Module not found
102 | if (!this.#worker) {
103 | this.#worker = classWorkerURL ?
> 104 | new Worker(new URL(classWorkerURL, import.meta.url), {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
105 | type: "module",
106 | }) :
107 | // We need to duplicated the code here to enable webpack
ModuleBuildError: ./node_modules/@ffmpeg/ffmpeg/dist/esm/classes.js:104:28
Module not found
102 | if (!this.#worker) {
103 | this.#worker = classWorkerURL ?
> 104 | new Worker(new URL(classWorkerURL, import.meta.url), {
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
105 | type: "module",
106 | }) :
107 | // We need to duplicated the code here to enable webpack
My goal is to basically implement this function:
async function downloadVideo(images: string[]) {
const downloadUrl = 'TODO'
const a = document.createElement('a')
a.href = videoUrl
a.download = 'output.mp4'
a.click()
a.remove()
}
async function downloadVideo(images: string[]) {
const downloadUrl = 'TODO'
const a = document.createElement('a')
a.href = videoUrl
a.download = 'output.mp4'
a.click()
a.remove()
}
GitHub
ffmpeg.wasm/apps/react-vite-app/src/App.tsx at main · ffmpegwasm/ff...
FFmpeg for browser, powered by WebAssembly. Contribute to ffmpegwasm/ffmpeg.wasm development by creating an account on GitHub.
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server