Open ayech0x2 opened 3 years ago
Same issue here.
Same here :(
Same here!
I found a fix! You have to go to node_modules/@ffmpeg/core/dist/ and copy all the files from there and paste them in the root folder, preferrably in the public folder if you're using NextJS. Then use:
const ffmpeg = createFFmpeg({
corePath: "http://localhost:3000/ffmpeg-core.js",
// Use public address
log: true,
});
I am facing the same issue, whether running with or without corePath
. None of the above workarounds work for me. I am building a Next.js PWA. Any ideas how we can avoid this and use this supercool module?
I am facing the same issue, whether running with or without
corePath
. None of the above workarounds work for me. I am building a Next.js PWA. Any ideas how we can avoid this and use this supercool module?
It was working when I posted the solution but not anymore :((
Did anyone find a solution for this? I guess downgrading @ffmpeg/ffmpeg to 0.9.8 and @ffmpeg/core to 0.9.0 for now is the way to go 🤷♂️
@Junoburger I changed @ffmpeg/ffmpeg to 0.9.8 and @ffmpeg/core to 0.9.0 but I got ReferenceError: __dirname is not defined
error :(
Try corePath: "https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js"
Hello, using this versions in my package json it worked just fine:
"@ffmpeg/core": "^0.8.3",
"@ffmpeg/ffmpeg": "^0.9.4",
I found a fix! You have to go to node_modules/@ffmpeg/core/dist/ and copy all the files from there and paste them in the root folder, preferrably in the public folder if you're using NextJS. Then use:
const ffmpeg = createFFmpeg({ corePath: "http://localhost:3000/public/ffmpeg-core.js", // Use public address log: true, });
This started to work for me in NextJS when I removed the http://localhost:3000/public
part. I copied the node_modules/@ffmpeg/core/dist
folder into public and renamed it ffmpeg_core_dist
for clarity. Then
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";
const ffmpeg = createFFmpeg({ log: true, corePath: "/ffmpeg_core_dist/ffmpeg-core.js" });
worked locally. But on production I got the error Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
which I was able to fix by adding these headers to next.config.js:
async headers() {
return [
{
source: "/", // change to appropriate path
headers: [
{
key: "Cross-Origin-Embedder-Policy",
value: "require-corp",
},
{
key: "Cross-Origin-Opener-Policy",
value: "same-origin",
},
],
},
];
},
But this is not a perfect solution because SharedArrayBuffer is not defined
still happens sometimes on page load and a reload is needed to get ffmpeg to load. Also it has other issues mentioned here. This all has to do with the security of SharedArrayBuffer that goes above my head.
For anyone using react-scripts
or create-react-app
to run React, you can send headers manually by using a customized middleware (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually).
First, install http-proxy-middleware
:
npm install http-proxy-middleware --save
or
yarn add http-proxy-middleware
Then, create src/setupProxy.js
file and put our logic in there:
module.exports = function (app) {
app.use(function (request, response, next) {
response.setHeader("Cross-Origin-Opener-Policy", "same-origin");
response.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
next();
});
};
corePath: "http://localhost:3000/ffmpeg-core.js", ``
hello sir, for many days i've been facing the same issue while working with nextjs. did u find the soulution? if u did I would be pleased if u share it with me.
I had the same problem in React app, those version worked for me
@ffmpeg/core: ^0.10.0 and @ffmpeg/ffmpeg: ^ 0.9.8
Same problem here with "@ffmpeg/core": "^0.10.0"
and "@ffmpeg/ffmpeg": "^0.10.1"
Same problem here with "@ffmpeg/core": "^0.10.0"
and "@ffmpeg/ffmpeg": "^0.10.1"
I found a fix! You have to go to node_modules/@ffmpeg/core/dist/ and copy all the files from there and paste them in the root folder, preferrably in the public folder if you're using NextJS. Then use:
const ffmpeg = createFFmpeg({ corePath: "http://localhost:3000/public/ffmpeg-core.js", // Use public address log: true, });
This started to work for me in NextJS when I removed the
http://localhost:3000/public
part. I copied thenode_modules/@ffmpeg/core/dist
folder into public and renamed itffmpeg_core_dist
for clarity. Thenimport { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg"; const ffmpeg = createFFmpeg({ log: true, corePath: "/ffmpeg_core_dist/ffmpeg-core.js" });
worked locally. But on production I got the error
Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
which I was able to fix by adding these headers to next.config.js:async headers() { return [ { source: "/", // change to appropriate path headers: [ { key: "Cross-Origin-Embedder-Policy", value: "require-corp", }, { key: "Cross-Origin-Opener-Policy", value: "same-origin", }, ], }, ]; },
But this is not a perfect solution because
SharedArrayBuffer is not defined
still happens sometimes on page load and a reload is needed to get ffmpeg to load. Also it has other issues mentioned here. This all has to do with the security of SharedArrayBuffer that goes above my head.
It worked for me thank you @discretegames !
My setting:
@ffmpeg/core==0.10.0
@ffmpeg/ffmpeg==0.10.1
// index.jsx (or some component .js/.jsx file)
const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js',
log: true,
});
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
async headers() {
return [
{
source: '/',
headers: [
{
key: 'Cross-Origin-Embedder-Policy',
value: 'require-corp',
},
{
key: 'Cross-Origin-Opener-Policy',
value: 'same-origin',
},
],
},
];
},
};
module.exports = nextConfig;
Thank you again :)
Hi, I faced the same issues and found that there is an easy to use script for SharedArrayBuffer is not defined
error. I added this script https://github.com/gzuidhof/coi-serviceworker to the head and it fixed the issue on Nuxt
I found a fix! You have to go to node_modules/@ffmpeg/core/dist/ and copy all the files from there and paste them in the root folder, preferrably in the public folder if you're using NextJS. Then use:
const ffmpeg = createFFmpeg({ corePath: "http://localhost:3000/public/ffmpeg-core.js", // Use public address log: true, });
This started to work for me in NextJS when I removed the
http://localhost:3000/public
part. I copied thenode_modules/@ffmpeg/core/dist
folder into public and renamed itffmpeg_core_dist
for clarity. Thenimport { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg"; const ffmpeg = createFFmpeg({ log: true, corePath: "/ffmpeg_core_dist/ffmpeg-core.js" });
worked locally. But on production I got the error
Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
which I was able to fix by adding these headers to next.config.js:async headers() { return [ { source: "/", // change to appropriate path headers: [ { key: "Cross-Origin-Embedder-Policy", value: "require-corp", }, { key: "Cross-Origin-Opener-Policy", value: "same-origin", }, ], }, ]; },
But this is not a perfect solution because
SharedArrayBuffer is not defined
still happens sometimes on page load and a reload is needed to get ffmpeg to load. Also it has other issues mentioned here. This all has to do with the security of SharedArrayBuffer that goes above my head.It worked for me thank you @discretegames !
My setting:
- Next.js (JavaScript)
@ffmpeg/core==0.10.0
@ffmpeg/ffmpeg==0.10.1
// index.jsx (or some component .js/.jsx file) const ffmpeg = createFFmpeg({ corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js', log: true, });
// next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async headers() { return [ { source: '/', headers: [ { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp', }, { key: 'Cross-Origin-Opener-Policy', value: 'same-origin', }, ], }, ]; }, }; module.exports = nextConfig;
Thank you again :)
Thank you! this works for me as well!
Just want to add that you will also be able to use version 0.11.0
Next.js (JavaScript)
const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.js',
log: true,
})
Another solution, to utilize NextJS middle ware
create middleware.ts following: here
// eslint-disable-next-line @next/next/no-server-import-in-page
import { NextResponse } from 'next/server'
// eslint-disable-next-line @next/next/no-server-import-in-page
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
const requestHeaders = new Headers(request.headers)
// if (request.nextUrl.pathname.startsWith('/')) { modify '/' accordingly
const response = NextResponse.next({
request: {
// New request headers
headers: requestHeaders,
},
})
response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp')
response.headers.set('Cross-Origin-Opener-Policy', 'same-origin')
return response
// }
}
I'm getting this while running it within a Jest unit test... so I don't have the (easy) possibility to just put it at localhost somewhere. What's the recommended way to use ffmpeg.wasm with jest?
can not get this to work once built on my domain but npm run dev works ok in webpack. Did anyone find out why this error is happening?
I've found out whats causing it but don't know how to solve, when i disabled the terser mangler in webpack the module has no problems finding the createFFmpegCore function.
I've found out whats causing it but don't know how to solve, when i disabled the terser mangler in webpack the module has no problems finding the createFFmpegCore function.
terser mangler renames the variables in a program in the form of "mangling"
you actually found the root cause of this and turning off terser is a temporary fix, but even i don't know a permanent fix for it, tho i think moving the ffmpeg-core.json file into the src directory might work
Globalizing this script can solve this problem.
Just do the simple try bring down the versions @ffmpeg/ffmpeg =>0.9.8 @ffmpeg/core =>0.8.3
now add log is true and corePath to the cdn link and now add source="/" in next.config.js and same in vite.config.js if you are using vite.
headers: [ { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp', }, { key: 'Cross-Origin-Opener-Policy', value: 'same-origin', }, ],
how to add them in simple react project?
Just do the simple try bring down the versions @ffmpeg/ffmpeg =>0.9.8 @ffmpeg/core =>0.8.3
now add log is true and corePath to the cdn link and now add source="/" in next.config.js and same in vite.config.js if you are using vite.
do u have example for vite.config.js ?
For anyone using create-react-app:
Remove ffmpeg and ffmpeg/core
npm uninstall @ffmpeg/ffmpeg @ffmpeg/core
Run the code below to downgrade
npm install @ffmpeg/ffmpeg@0.9.8 @ffmpeg/core@0.10.0
Then follow this to setup the headers
For anyone using
react-scripts
orcreate-react-app
to run React, you can send headers manually by using a customized middleware (https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually).First, install
http-proxy-middleware
:npm install http-proxy-middleware --save
or
yarn add http-proxy-middleware
Then, create
src/setupProxy.js
file and put our logic in there:module.exports = function (app) { app.use(function (request, response, next) { response.setHeader("Cross-Origin-Opener-Policy", "same-origin"); response.setHeader("Cross-Origin-Embedder-Policy", "require-corp"); next(); }); };
There is a problem on fetching ffmpeg-core.js file. you can download these files and set the core path to these files.
I added these files in my public folder, then i set corePath like this: const ffmpeg = createFFmpeg({ corePath: '/ffmpeg-core.js', log: true })
As you can see the
I got a Bad memory error too! How to fix this?