ffmpegwasm / ffmpegwasm/ffmpeg.wasm

Bundle worker.js into inline code

Open
#617 27 comments 23 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.