FFmpeg hangs on load and no console errors are displayed

[AllenElguira16]

Describe the bug ffmpeg hangs on load and no console errors are displayed

To Reproduce Steps to reproduce the behavior:

1. Download or clone the project https://github.com/ffmpegwasm/ffmpeg.wasm/tree/main/apps/react-vite-app
2. Start development (e.g. npm dev)
3. Open network tab in inspect element then click "Load ffmpeg-core"
4. An error shows (not in console, see screenshot) "worker.js?type=module&worker_file 504 Outdated Optimize Dep"

Expected behavior The project should load ffmpeg and convert video from avi to mp4 (e.g. https://ffmpegwasm.netlify.app/video/video-15s.avi)

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version 115.0.5790.110

Smartphone (please complete the following information): N/A

Additional context N/A

[jeromewu]

Can you try to run npm run build at the root of the repository, that might be the root cause.

[AllenElguira16]

It works when building

I guess the issue might be related to vite

[jeromewu]

Got it, I will try to make it work with vite. Will update here if any findings.

[atticoos]

Ran into this as well on a remix application.

Nothing special, just

const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.1/dist/esm';
const ffmpeg = new FFmpeg()
await ffmpeg.load({
  coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
  wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
  workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
});

Attempts to access /worker.js that doesn't exist 🤔

I assume it's something going on here https://github.com/ffmpegwasm/ffmpeg.wasm/blob/8121208700ed862b3efead88350ebe7578bd9598/packages/ffmpeg/src/classes.ts#L166C42-L168

this.#worker = new Worker(new URL("./worker.js", import.meta.url), {
  type: "module",
});

import.meta.url is pointing to a custom bundle generated by Remix

http://localhost:3000/build/routes/my.current.route-JNDVCDRG.js

[olup]

Similar error here, but got a CORS error on the server. My vite config is properly set, and the other resources show the header properly. Indeed the url does not seem to exist on localhost.

following @atticoos should it use the custom config.workerURL instead ?

EDIT :Reverted to v0.8, that works like a charm, while waiting for a solution

[jeromewu]

In 0.12.3, vite issues has been resolved, please feel free to try it: https://github.com/ffmpegwasm/ffmpeg.wasm/releases/tag/v0.12.3

[olup]

Sorry but I believe this is the one I was using. I'll try again tonight but I think that was it.

[mattiaz9]

With the latest version it fetches the scripts correctly but it gives me this error: Uncaught (in promise) Error: failed to import ffmpeg-core.js

I tried loading without a config and also with a config like this:

const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/umd"
await this.ffmpeg.load({
  coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
  wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
  workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
})

and i get the same error in both cases.

My vite.config.ts:

...
optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
},
...

[abrman]

In 0.12.3, vite issues has been resolved, please feel free to try it: https://github.com/ffmpegwasm/ffmpeg.wasm/releases/tag/v0.12.3

This is a headache

• Download zip from 0.12.3 releases link provided.

• Unzip and move ffmpeg.wasm-0.12.3/apps/react-vite-app onto desktop

• navigate to Desktop\react-vite-app and npm i, then npm run dev

• Open http://localhost:5173/ in browser and hit Load ffmpeg-core

• No error, worker not loading.

• Check if response headers are present

• Modify vite.config.ts to include headers

  
  import { defineConfig } from "vite";
  import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], server: { headers: { "Cross-Origin-Embedder-Policy": "require-corp", "Cross-Origin-Opener-Policy": "same-origin", }, }, });

Check if present in main response
![image](https://github.com/ffmpegwasm/ffmpeg.wasm/assets/6663260/f7349f58-00bc-4d4c-a9c2-19766aa4cca4)

✔Looks good

Check for the worker:
![image](https://github.com/ffmpegwasm/ffmpeg.wasm/assets/6663260/9fbfb1f5-1692-49f9-b755-ac81e0b554a8)

❌Headers not present.

I suspect vite doesn't send headers when file is requested via @fs (first time I'm seeing this) is there any way to make this request without using @fs whatever it is?
`http://localhost:5173/@fs/C:/Users/Username/Desktop/react-vite-app/node_modules/.vite/deps/worker.js?type=module&worker_file`

[olup]

Because the resource is fetched with new Worker, from the module itself, the file is not served by vite server at the expected url. There isn't the proper server header because it actually not found. Idk yet what the solution could be, but I was faced with exactly that.

[AllenElguira16]

In 0.12.3, vite issues has been resolved, please feel free to try it: https://github.com/ffmpegwasm/ffmpeg.wasm/releases/tag/v0.12.3

This is a headache

• Download zip from 0.12.3 releases link provided.
• Unzip and move ffmpeg.wasm-0.12.3/apps/react-vite-app onto desktop
• navigate to Desktop\react-vite-app and npm i, then npm run dev
• Open http://localhost:5173/ in browser and hit Load ffmpeg-core
• No error, worker not loading.
• Check if response headers are present
• Modify vite.config.ts to include headers

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",
    },
  },
});

Check if present in main response

✔Looks good

Check for the worker:

❌Headers not present.

I suspect vite doesn't send headers when file is requested via @fs (first time I'm seeing this) is there any way to make this request without using @fs whatever it is? http://localhost:5173/@fs/C:/Users/Username/Desktop/react-vite-app/node_modules/.vite/deps/worker.js?type=module&worker_file

I've recreated this and exclude ffmpeg from optimizeDeps, and it works

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
  },
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
  },
});

please note that I've change the url of the vid since example url is not working properly

[abrman]

I've started with a clean copy of react-vite-app and followed the same steps as before updating videoURL with a downloaded copy into ./public/ directory. (const videoURL = "/video-15s.avi";) and using the vite.config.ts contents you provided.

I'm not sure if I'm still doing something wrong but I hit this error:

Hopefully @olup will have more success than me. If it makes any difference I'm running under Windows, Node v18.17.1, NPM v9.6.7

[olup]

Works great for me following @AllenElguira16 config and excluding ffmpeg from vote config

I've recreated this and exclude ffmpeg from optimizeDeps, and it works

This part was not in the vite example last I checked

[abrman]

I tried it on another machine, and got to frame= 1 fps=0.0 q=0.0 size= 0kB time=00:00:00.00 bitrate=N/A speed= 0x where it stalls.

I'll take another look later today to see if I can get it working on the machine where it didn't work.

[jeromewu]

@mattiaz9 The baseURL should be esm version instead of umd version

const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm"

[jeromewu]

Since optimizeDeps: { exclude ... } is essential, I have added to the example. I am not sure what it is required as it is not required on my machine.

I have to say the behaviour of vite is not very consistent...

[mattiaz9]

@mattiaz9 The baseURL should be esm version instead of umd version

const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm"

it doesn't exists: Cannot find an index in "/dist/esm" in @ffmpeg/core-mt@0.12.2

[jeromewu]

@mattiaz9 The baseURL should be esm version instead of umd version

const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm"

it doesn't exists: Cannot find an index in "/dist/esm" in @ffmpeg/core-mt@0.12.2

I think they all exist on my side:

https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.js https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.wasm https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.worker.js

[daniellcc]

Im using vite, I was able to fix this by adding the following to the vite.config.ts

 optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
  },
  server: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
  },

and using the esm links because the umd one for the worker seems to not work: https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.js https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.wasm https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.worker.js

[remixer-dec]

Having the same issue on Chromium, no issues on Firefox. It hangs even with a simple command ['-i', 'input.mp4', 'test.mp4'] where input.mp4 is this sample video.

Short ones from test data seem to work (video-3s.avi, video-1s.mp4)

[radames]

I can confirm and reproduce the same issue, running Vite + Svelte, also applying optimizeDeps and using the esm/ffmpeg-....js it hangs on Chrome frame= 1 fps=0.0 q=0.0 size= 0kB time=00:00:00.00 bitrate=N/A speed= 0x but not on Firefox

[radames]

hi all , it looks like this bug is solved on the latest release 0.12.6 it's working for me on Chrome MT now, could you all please test and confirm?

[remixer-dec]

Seems like the version 0.12.6 of core-mt isn't yet published on npm/unpkg I tried this one https://github.com/ffmpegwasm/ffmpeg.wasm/actions/runs/6011459616 and it does have the issue.

[radames]

Sorry @remixer-dec, here is my setup, and the only difference is I'm running ffmpeg inside a Web Worker, it it's working on Chrome

@ffmpeg/core-mt@0.12.3
@ffmpeg/ffmpeg@0.12.6
@ffmpeg/util@0.12.1

[remixer-dec]

Just double-checked, same setup, I'm having the same behavior as mentioned in #578 which mentions the same version

[radames]

yes the same error I was getting before, now things seems to be working fine since I'm running it from a Web Worker

[Kylmakalle]

I'm unable to proceed with example rect-vite app, own app and official ffmpeg.wasm playground. Getting stuck on frame= 1 fps=0.0 q=0.0 size= 0kB time=00:00:00.10 bitrate= 3.6kbits/s speed=4.46x or Stream mapping https://github.com/ffmpegwasm/ffmpeg.wasm/issues/578 with any command. Example video

Versions tried

"vite": "^4.4.5" / "vite": "5.0.0-beta.3"
"@ffmpeg/ffmpeg": "^0.12.6",
"@ffmpeg/util": "^0.12.1",

@ffmpeg/core-mt@0.12.3/dist/esm / @ffmpeg/core-mt@0.12.2/dist/esm

Here's very long log of ffmpeg https://gist.github.com/Kylmakalle/fc784b70747d1bb6b77e125a7a99a868

Seeking for any possible workaround

[dmnsgn]

Just double-checked, same setup, I'm having the same behavior as mentioned in #578 which mentions the same version

Same here with @ffmpeg/core-mt@0.12.3, @ffmpeg/ffmpeg@0.12.6 and @ffmpeg/util@0.12.1, Chrome 118. I am not running in a WebWorker. Firefox and Safari both work but Chrome gets stuck.

I am forced to roll back to:

coreURL: await toBlobURL(
  "https://unpkg.com/@ffmpeg/core@0.12.3/dist/esm/ffmpeg-core.js",
  "text/javascript"
),
wasmURL: await toBlobURL(
  "https://unpkg.com/@ffmpeg/core@0.12.3/dist/esm/ffmpeg-core.wasm",
  "application/wasm"
),
workerURL: await toBlobURL(
  "https://unpkg.com/@ffmpeg/ffmpeg@0.12.3/dist/esm/worker.js",
  "text/javascript"
),

[thexeos]

I made it work with vite using this strategy:

1. I copied the core file into the project folder and imported it as URL. This meant that the file would get processed by vite pipeline. Example code: import coreURL from 'src/ffmpeg/0.12.4/ffmpeg-core.js?url'

2. I copied the wasm file into a public directory of the project and linked to it directly (I believe you can use vite's URL import here as well).

3. My load() code now looks like this (note that I don't specify workerURL):

await ffmpeg.load({
  coreURL,
  wasmURL: '/ffmpeg/0.12.4/ffmpeg-core.wasm',
})

[leoffx]

https://github.com/ffmpegwasm/ffmpeg.wasm/pull/653#issuecomment-1866179722

the same problem happens with the Angular example

[lancejpollard]

Having this same problem https://github.com/ffmpegwasm/ffmpeg.wasm/discussions/678#discussioncomment-8351168 it's just hanging on load and no logs or anything.

This was tested on both Chrome and Safari on the M3 Mac. @jeromewu Any ideas why it might just be hanging and not working?

[cinderisles]

This is what worked for me.

Add this to your Vite config as suggested by many others above

optimizeDeps: {
    exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
},

I'm using worker.format = 'es' in my Vite config because I have other web workers where I want to use ES syntax. I noticed in the code that default CORE_URL is from unpkg, which I would prefer not to use since I'm using Vite. If you look at the ffmpeg.load function, you can see that if you call load() with no parameters, it will default to the unpkg URL, which can't be loaded with Vite.

My solution was to first install @ffmpeg/core with my package manager then pass something Vite-friendly to the coreURL option in load().

import coreURL from '@ffmpeg/core?url';
import wasmURL from '@ffmpeg/core/wasm?url';
import { FFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = new FFmpeg();
ffmpeg.load({ coreURL, wasmURL  });

The key is to import @ffmpeg/core with ?url so that it works with the Vite's async import() that's called in ffmpeg.load()

---

extra step for Yarn Berry (2+) users

If you're using Yarn Berry (2+) like me, an extra step you might have to take to get it to work is to configure server.fs.allow to allow Vite to import from your yarn cache, which is likely way outside its default search folder (the project root), depending on how you've configured Yarn

A relative path will be kind of impossible to use if you've got many people working on your project or you're using different machines with different folder structures. You can configure your yarn cache somewhere easily accessible with the relative path, but then everyone else you work with will have to do the same.

For maximum flexibility, I needed a way to get an absolute path. Luckily we can get that by calling yarn config cacheFolder and passing the --json option to output it as JSON. So the way I did it was to use Node.js child_process.execSync in my Vite config in order to get the path of yarn's cache folder and automatically add that to server.fs.allow

import { defineConfig, searchForWorkspaceRoot } from 'vite';
import { execSync } from 'child_process';

export default defineConfig({
  server: {
    fs: {
      allow: [
        // this is the default behavior, but setting the allow option overrides the default, so we add it back
        searchForWorkspaceRoot(process.cwd()),

        // a decent cross-platform solution
        JSON.parse(execSync('yarn config cacheFolder --json')).effective,
      ],
    },
  },
});

If you are using zero-installs with Yarn 4, you can just resolve a relative path, because your yarn cache folder is in the root of the project. Add path.resolve(__dirname, './.yarn/cache') to server.fs.allow instead

[ArsenicBismuth]

I managed to solve my issue by adding post-build command to copy the required .wasm files to the /dist of my build.

It works fine on my AMD PC and a M1 MBP. But some of my testers can't load it on their Intel MBP & Intel PC.

All using the same bundled electron version of our app.