How to make nextjs & multithreading work?

[lauridskern]

I have tried just about everything I could find to make this work with nextjs and multithreading.
I tried:

• older versions
• esm instead of umd
• adding cors rules to next.config
• using toBlobUrl
• not using toBlobUrl

It either throws the error with "SharedArray buffer is not defined", doesn't load at all with no errors thrown or throws a CORS error.
Did anyone manage to get this to work?

[anujpahade]

@lauridskern @jeromewu
Similar issue on Chrome.
But works fine on Firefox.

[nezort11]

@lauridskern

I've managed to get Nextjs 14 work with multithreading (@ffmpeg/core-mt):

TLDR:

1. configure next config (COEP/COOP headers)
2. install @ffmpeg/core-mt package
3. bundle umd versions of ffmpeg-core.js, ffmpeg-core.wasm, and ffmpeg-core.worker.js using asset modules (new URL('static relative path', import.meta.url) https://webpack.js.org/blog/2020-10-10-webpack-5-release/#asset-modules)
4. provide bundled urls to ffmpeg.load (toBlobUrl is not needed because url is already local)

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",

        headers: [
          {
            key: "Cross-Origin-Embedder-Policy",
            value: "require-corp",
          },
          {
            key: "Cross-Origin-Opener-Policy",
            value: "same-origin",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

pnpm add @ffmpeg/core-mt

      // Utilize webpack assets modules to trigger bundle https://webpack.js.org/blog/2020-10-10-webpack-5-release/#asset-modules
      // - ONLY `umd` works (`esm` doesnt work for some reason)
      // - must be static (dont extract into variable! - limitation of webpack)
      // - must be relative path (adjust based on current file directory)
      const ffmpegCoreMtUrl = new URL(
        "../node_modules/@ffmpeg/core-mt/dist/umd/ffmpeg-core.js",
        import.meta.url
      ).href;
      const ffmpegCoreMtWasmUrl = new URL(
        "../node_modules/@ffmpeg/core-mt/dist/umd/ffmpeg-core.wasm",
        import.meta.url
      ).href;
      const ffmpegCoreMtWorkerUrl = new URL(
        "../node_modules/@ffmpeg/core-mt/dist/umd/ffmpeg-core.worker.js",
        import.meta.url
      ).href;

      await ffmpeg.load({
        coreURL: ffmpegCoreMtUrl,
        wasmURL: ffmpegCoreMtWasmUrl,
        workerURL: ffmpegCoreMtWorkerUrl,
    });