ffmpeg.wasm: Uncaught ReferenceError: createFFmpegCore is not defined

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();
    });
};

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.

Try corePath: "https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js"

I had the same problem in React app, those version worked for me @ffmpeg/core: ^0.10.0 and @ffmpeg/ffmpeg: ^ 0.9.8

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.

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)

• @ffmpeg/core==0.11.0
• @ffmpeg/ffmpeg==0.11.6

const ffmpeg = createFFmpeg({
        corePath: 'https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.js',
        log: true,
      })

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.

---

---

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 😃

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?

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 🤷‍♂️

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,
});