1 reply

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

@ffmpeg/ffmpeg

@ffmpeg/ffmpeg

@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

⨯ 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()
}

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.

No replies yetBe the first to reply to this messageJoin

Creating video from images

Similar Threads

Similar Threads

Similar Threads