FFmpeg hangs on load and no console errors are displayed #532
Comments
|
Can you try to run |
|
It works when building I guess the issue might be related to vite |
|
Got it, I will try to make it work with vite. Will update here if any findings. |
|
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 I assume it's something going on here this.#worker = new Worker(new URL("./worker.js", import.meta.url), {
type: "module",
});
|
|
Similar error here, but got a CORS error on the server. following @atticoos should it use the custom 
EDIT :Reverted to v0.8, that works like a charm, while waiting for a solution |
|
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 |
|
Sorry but I believe this is the one I was using. I'll try again tonight but I think that was it. |
|
With the latest version it fetches the scripts correctly but it gives me this error: 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 ...
optimizeDeps: {
exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
},
... |
This is a headache
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? |
|
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. |
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",
},
},
});
|
|
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 I'm not sure if I'm still doing something wrong but I hit this error:
Hopefully @olup will have more success than me. |
|
Works great for me following @AllenElguira16 config and excluding ffmpeg from vote config
This part was not in the vite example last I checked |
|
I tried it on another machine, and got to I'll take another look later today to see if I can get it working on the machine where it didn't work. |
|
@mattiaz9 The baseURL should be const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm" |
|
Since
|
it doesn't exists: |
I think they all exist on my side: https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm/ffmpeg-core.js |
|
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: |
|
Having the same issue on Chromium, no issues on Firefox. It hangs even with a simple command Short ones from test data seem to work (video-3s.avi, video-1s.mp4) |
|
I can confirm and reproduce the same issue, running Vite + Svelte, also applying |
|
hi all , it looks like this bug is solved on the latest release |
|
Seems like the version 0.12.6 of core-mt isn't yet published on npm/unpkg |
|
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 |
|
Just double-checked, same setup, I'm having the same behavior as mentioned in #578 which mentions the same version |
|
yes the same error I was getting before, now things seems to be working fine since I'm running it from a Web Worker |
|
I'm unable to proceed with example rect-vite app, own app and official ffmpeg.wasm playground. Getting stuck on Versions tried Here's very long log of ffmpeg Seeking for any possible workaround |
Same here with @ffmpeg/core-mt@0.12.3, @ffmpeg/ffmpeg@0.12.6 and @ffmpeg/util@0.12.1, Chrome 118. 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"
), |
|
I made it work with
await ffmpeg.load({
coreURL,
wasmURL: '/ffmpeg/0.12.4/ffmpeg-core.wasm',
}) |
|
the same problem happens with the Angular example |
|
Having this same problem #678 (comment) it's just hanging on This was tested on both Chrome and Safari on the M3 Mac. @jeromewu Any ideas why it might just be hanging and not working? 
|
|
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 My solution was to first install 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 extra step for Yarn Berry (2+) usersIf you're using Yarn Berry (2+) like me, an extra step you might have to take to get it to work is to configure 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 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 |
|
I managed to solve my issue by adding post-build command to copy the required 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. |
|
vite+vue3 use 0.12.6 and esm, not umd const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm';
await ffmpeg.value.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
});vite.config.ts optimizeDeps: {
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
}, |
|
ive tried everything which was being discussed here.
|
Describe the bug
ffmpeg hangs on load and no console errors are displayed
To Reproduce
Steps to reproduce the behavior:
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):
Smartphone (please complete the following information):
N/A
Additional context
N/A
The text was updated successfully, but these errors were encountered: