When executing await ffmpeg.load({...url}), the code doesn't continue to execute further.

[bestycw]

` if (!crossOriginIsolated) { throw new Error('SharedArrayBuffer is not available. Please enable cross-origin isolation.') } this.ffmpeg.on('log', e => { console.log(e.message) }) this.ffmpeg.on('progress', e => { console.log(e.progress) }) const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm'

   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')
})
this.isLoaded = true
console.log('FFmpeg loaded successfully')

}`

console.log('FFmpeg loaded successfully') does not exec。

THE version ffmpeg "@ffmpeg/ffmpeg": "^0.12.7", "@ffmpeg/util": "^0.12.1", "@ffmpeg/core": "^0.12.4"

[zhendershot-crux]

Did you find a workaround - or a solution? I have the same issue right now with 0.12.10.

[VamshiAlugoju]

@bestycw Did you find any solution?

[L4z3x]

have the same issue too, i am getting this error: Loading Worker from “http://localhost:5173/node_modules/.vite/deps/worker.js?worker_file&type=module” was blocked because of a disallowed MIME type (“”).

[VamshiAlugoju]

if you are using vite adding ffmpeg in the exclude array in the optimizedeps filed in vite.config file solved the issue.

import path from "path"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, optimizeDeps: { exclude: ['react-day-picker' ,'@ffmpeg/ffmpeg'] } });

[L4z3x]

thanks, that worked in firefox

[zhendershot-crux]

Yeah - I've seen that suggestion floating around. But I have that and still doesn't change the issue in Safari. Is there anything else going on here that maybe I can check?

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  base: './',
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg", "@ffmpeg/util"],
  },
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: undefined
      }
    }
  }
});

[Raiyan109]

@VamshiAlugoju Thanks a lot, it saved my life after struggling 2 days...

[jjrise]

@VamshiAlugoju you are the best

[carlbrn]

Having this issue in nextjs 15 and 14 in cross origin isolation. Tried importing locally and from jsdelivr. The files are loaded but nothing happens after. Please, any idea how to get it to work with Nextjs?

  async headers() {
    return [{
      source: '/:path*',
      headers: [{
        key: 'Cross-Origin-Embedder-Policy',
        value: 'require-corp',
      }, {
        key: 'Cross-Origin-Opener-Policy',
        value: 'same-origin',
      }],
    }]
  },

    const baseUrl = '/lib/ffmpeg'
    // const baseUrl = 'https://cdn.jsdelivr.net/npm/@ffmpeg/[email protected]/dist/esm'

    function callback(event: DownloadProgressEvent) {
      console.log('\n=== DownloadProgressEvent ===')
      console.log('event.url', event.url)
      console.log('event.total', event.total)
      console.log('event.received', event.received)
      console.log('event.delta', event.delta)
      console.log('event.done', event.done)
    }

    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseUrl}/ffmpeg-core.js`, 'text/javascript', true, callback),
      wasmURL: await toBlobURL(`${baseUrl}/ffmpeg-core.wasm`, 'application/wasm', true, callback),
      workerURL: await toBlobURL(`${baseUrl}/ffmpeg-core.worker.js`, 'text/javascript', true, callback),
    })

Tried this config, but not working

  webpack(config, { isServer, dev }) {
    config.externals = [
      ...(config.externals || []),
      '@ffmpeg/ffmpeg',
      '@ffmpeg/util',
    ]
    return config
  },

[carlbrn]

For anyone encountering the issue in nextjs 15 or 14, the file _next/static/chunks/_pages-dir-browser_node_modules_ffmpeg_ffmpeg_dist_esm_worker_js.js was blocked because the headers coep and coop were not set. Don't know why other _next chunks have it set but ffmpeg worker didn't have it. So, I updated the the middleware to add the response headers for next chunks.

    response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp')
    response.headers.set('Cross-Origin-Opener-Policy', 'same-origin')

Then it was able to work with this code from the Ffmpeg from the doc:

    const baseUrl = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd'
    
    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseUrl}/ffmpeg-core.js`, 'text/javascript'),
      wasmURL: await toBlobURL(`${baseUrl}/ffmpeg-core.wasm`, 'application/wasm'),
    })

[iketiunn]

I haven't looked deeply into the codebase but it works again when I revert @ffmpeg/ffmpeg from 0.12.15 to 0.12.10.

And for nextjs. COEP and COOP headers for /_next/static/chunks/:path* are a must

{
  source: '/_next/static/chunks/:path*',
  headers: [
    { key: "Cross-Origin-Embedder-Policy", value: "require-corp" },
    { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
  ]
})