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/[email protected]/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/[email protected]/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

✔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

[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/[email protected]/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/[email protected]/dist/esm"

it doesn't exists: Cannot find an index in "/dist/esm" in @ffmpeg/[email protected]

[jeromewu]

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

const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/dist/esm"

it doesn't exists: Cannot find an index in "/dist/esm" in @ffmpeg/[email protected]

I think they all exist on my side:

https://unpkg.com/@ffmpeg/[email protected]/dist/esm/ffmpeg-core.js https://unpkg.com/@ffmpeg/[email protected]/dist/esm/ffmpeg-core.wasm https://unpkg.com/@ffmpeg/[email protected]/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/[email protected]/dist/esm/ffmpeg-core.js https://unpkg.com/@ffmpeg/[email protected]/dist/esm/ffmpeg-core.wasm https://unpkg.com/@ffmpeg/[email protected]/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/[email protected]
@ffmpeg/[email protected]
@ffmpeg/[email protected]

[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/[email protected]/dist/esm / @ffmpeg/[email protected]/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/[email protected], @ffmpeg/[email protected] and @ffmpeg/[email protected], 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/[email protected]/dist/esm/ffmpeg-core.js",
  "text/javascript"
),
wasmURL: await toBlobURL(
  "https://unpkg.com/@ffmpeg/[email protected]/dist/esm/ffmpeg-core.wasm",
  "application/wasm"
),
workerURL: await toBlobURL(
  "https://unpkg.com/@ffmpeg/[email protected]/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