ffmpeg.wasm icon indicating copy to clipboard operation
ffmpeg.wasm copied to clipboard

Supply @ffmpeg/core directly to createFFmpeg instead of as URL

Open ClaireNeveu opened this issue 4 years ago • 2 comments

Is your feature request related to a problem? Please describe. I'm running ffmpeg.wasm in a browser environment but do not want to rely on loading a script from unpkg.com (it's annoying from a CORS perspective and goes against security and uptime best practices). Seemingly not a big deal since you can supply corePath but this is a little tricky with a bundler involved (particularly with Parcel which we use).

ffmpeg-core.js needs to be bundled since it does its own imports but it also needs to be reference by name and can't be in the same bundle. Code-splitting or dynamic importing would seem to be a solution but bundlers increasingly handle those transparently and don't expose the name.

Describe the solution you'd like I'd like to be able to import ffmpeg-core.js myself and supply it to createFFmpeg, e.g.

import FFmpegCore from '@ffmpeg/core/dist/ffmpeg-core'
const ffmpeg = createFFmpeg({ corePath: FFmpegCore });

or

const FFmpegCore await import('@ffmpeg/core/dist/ffmpeg-core')
const ffmpeg = createFFmpeg({ corePath: FFmpegCore });

Describe alternatives you've considered I've explored a few different bundlers and solving this problem on that level is quite annoying. You could also supply a version that bundles core but just allowing the user to supply it lets the whole thing be bundled together anyway.

Additional context N/A

ClaireNeveu avatar Dec 07 '20 21:12 ClaireNeveu

@ClaireNeveu have you ever tried using this in netlify-lambda? I cannot get it to load correctly

11:08:30 PM: 753e0e76 INFO   [info] use ffmpeg.wasm v0.10.1
11:08:30 PM: 753e0e76 INFO   [info] load ffmpeg-core
11:08:30 PM: 753e0e76 INFO   [info] loading ffmpeg-core
11:08:30 PM: 753e0e76 INFO   [info] fetch ffmpeg.wasm-core script from @ffmpeg/core
11:08:30 PM: 753e0e76 INFO   Error: Cannot find module '@ffmpeg/core'
Require stack:
- /var/task/src/app/ffmpeg-background.js
- /var/task/ffmpeg-background.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at /var/task/src/app/ffmpeg-background.js:98973:35
    at new Promise (<anonymous>)
    at module2.exports (/var/task/src/app/ffmpeg-background.js:98971:41)
    at Object.load (/var/task/src/app/ffmpeg-background.js:99170:21)
    at load (/var/task/src/app/ffmpeg-background.js:107462:20)
    at Runtime.handler (/var/task/src/app/ffmpeg-background.js:107465:11) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/var/task/src/app/ffmpeg-background.js',
    '/var/task/ffmpeg-background.js',
    '/var/runtime/UserFunction.js',
    '/var/runtime/index.js'
  ]
}
11:08:30 PM: 753e0e76 Duration: 1068.88 ms	Memory Usage: 223 MB	

I would really appreciate some help - I am sure I am just making a mistake of some kind?

dashreel avatar Oct 16 '21 06:10 dashreel

For anyone using Vite, I found this workaround that I figured I would share -- you can use the explicit URL import feature to import the core module like so:

import ffmpeg from '@ffmpeg/ffmpeg'
import ffmpegCore from '@ffmpeg/core?url'

and then you can load it like:

await ffmpeg.load({ coreURL: ffmpegCore });

dumbmoron avatar Mar 03 '24 00:03 dumbmoron