ffmpegwasm / ffmpegwasm/ffmpeg.wasm
Bundle worker.js into inline code
- Dominant language
- C
- Stars
- 17.8k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
## Problem
As mentioned in #594,#560,#548,there a lot issues about woker.js,I also encountered the same problem when developing chrome extension,and finally find the solution.
Now there are two ways to use `@ffmpeg/ffmpeg`:
### umd
We could load `ffmpeg` via cdn like https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.7/dist/umd/ffmpeg.min.js. But it will report an error like https://github.com/ffmpegwasm/ffmpeg.wasm/issues/560#issuecomment-1703065141 when we execute `ffmpeg.load()`。
The reason is that Webpack will build the `new Worker(xxx)` into a seperate file,so there will be two file in umd,see [here](https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.7/dist/umd/):
- ffmpeg.js
- 814.ffmpeg.js ( worker.js)
When we load `ffmpeg.js`, it will load `814.ffmpeg.js `, but in a wrong path.
### esm
In esm module, `new Worker('./worker.js') ` will remain in production mode. Due to different bundling tools presenting this relative path differently, it can sometimes lead to `worker.js is not found`.
## Solution
My proposed solution is to bundle worker.js as inline code, eliminating the need to worry about the path to worker.js.
There are two potential solutions:
- Use Vite for code bundling, like [this](https://v3.vitejs.dev/guide/assets.html#importing-script-as-a-worker):
- Use Webpack for bundling using the [asset/inline](https://webpack.js.org/guides/asset-modules/). However, the ESM code generated by `Webpack` may appear less elegant.
If necessary, I can submit a PR.
Contributor guide
Assessment
This issue has not been assessed yet.