Not allowed to load local resource

[hrqmonteiro]

Describe the bug Working fine locally, but when i commit to production it fails to load the 'fetchFile.js' file:

_app-89c14310fa418025204d.js:1 Not allowed to load local resource: file:///codebuild/output/src10319366/src/app-sls-lav/node_modules/@ffmpeg/ffmpeg/src/browser/fetchFile.js

I am on Nextjs 12, and my code:

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'

const convertVideo = async (file: any) => {
    const ffmpeg = createFFmpeg({
      corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js',
      log: true
    })

    try {
      await ffmpeg.load()

      ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file))

      await ffmpeg.run('-i', 'input.mp4', 'output.mp4')

      const data = ffmpeg.FS('readFile', 'output.mp4')
      const videoUrl = URL.createObjectURL(
        new Blob([data.buffer], { type: 'video/mp4' })
      )

      setConvertedVideoSrc(videoUrl)

      ffmpeg.FS('unlink', 'input.mp4')
      ffmpeg.FS('unlink', 'output.mp4')
    } catch (error) {
      console.log('erro ffmpeg', error)
    }
  }

I have the ffmpeg-core.js, ffmpeg-core.wasm and ffmpeg-core.worker.js on my public folder, and it works fine if i put my domain on the corePath or if i am using unpkg like the example before, it doesn't complain about ffmpeg-core, but it fails on the fetchFile function.

I already tried moving the function to this same file, putting on the public folder or an utils folder and importing it, and i always get this error.

To Reproduce Just write that code and try to use it on production.

Expected behavior To properly load the function.

Screenshots

Desktop (please complete the following information):

• OS: macOS ventura
• Browser: Chrome and Firefox have this error.
• Version: Chrome Version 114.0.5735.198 (Official Build) (x86_64), Firefox 114.0.2 (64-bit)

[hrqmonteiro]

Is there anyone to help me with this?

[alimertcakar]

The readme clearly says:

Keep in mind that for compatibility with webworkers and nodejs this will default to a local path, so it will attempt to look for 'static/js/ffmpeg.core.js' locally, often resulting in a local resource error. If you wish to use a core version hosted on your own domain, you might reference it relatively like this:

const ffmpeg = createFFmpeg({ corePath: new URL('static/js/ffmpeg-core.js', document.location).href, });

However ffmpeg is likely bundled into a file with a random hash to be able to be lazy loaded. I don't know how would you reference that file. I will add another comment if i figure it out.

[hrqmonteiro]

The readme clearly says:

Keep in mind that for compatibility with webworkers and nodejs this will default to a local path, so it will attempt to look for 'static/js/ffmpeg.core.js' locally, often resulting in a local resource error. If you wish to use a core version hosted on your own domain, you might reference it relatively like this:

const ffmpeg = createFFmpeg({ corePath: new URL('static/js/ffmpeg-core.js', document.location).href, });

However ffmpeg is likely bundled into a file with a random hash to be able to be lazy loaded. I don't know how would you reference that file. I will add another comment if i figure it out.

I see that, and i referenced the own domain in my file that way using document.location as well. And it works fine for the createFFMpeg function, but even doing that, the fetchFile function gives me a problem with the local path, so that's what i find strange.

It is taking both functions, createFFMpeg and fetchFile from the npm package but only on fetchFile it is giving me the local path error.

[alimertcakar]

It is possible to get around this error by loading the core.js from cdn.

      const ffmpeg = createFFmpeg({
        corePath:
          "https://unpkg.com/@ffmpeg/core-st@0.11.1/dist/ffmpeg-core.js",
      });

But in my case while this is working in development, it throws a magic word error (incorrectly tries to parse the core.js file as wasm). I will try to further debug the error and run older versions. I will let you know if figure something out.

[hrqmonteiro]

It is possible to get around this error by loading the core.js from cdn.

      const ffmpeg = createFFmpeg({
        corePath:
          "https://unpkg.com/@ffmpeg/core-st@0.11.1/dist/ffmpeg-core.js",
      });

But in my case while this is working in development, it throws a magic word error (incorrectly tries to parse the core.js file as wasm). I will try to further debug the error and running older versions. I will let you know if figure something out.

Did that as well, same thing when in production, it loads ffmpeg correctly but fails on fetchFile.js saying it can't load the file from the local path (in my case, located at codebuild on aws)

[ashtonland]

Hey I'm on Nextjs 12.1.0 here, any luck on this? I had this issue yesterday as well and I found that the loading the single threaded version from the cdn core-st required that I also set mainName to "main" to work. Not sure if you tried this already but didn't show it above, but if not it seemed to solve the problem for me.

const ffmpeg = createFFmpeg({
    mainName: "main",
    corePath: "https://unpkg.com/@ffmpeg/core-st@0.11.1/dist/ffmpeg-core.js",
});

However, I don't intend on loading from the cdn forever, but just wanted to get ffmpeg to stop throwing errors for days. To that end, it seems like copying the ffmpeg-core.js, ffmpeg-core.wasm, ffmpeg-core.worker.js files out of the node_modules /@ffmpeg/core/dist directory, and placing the copies in a folder in the public directory would work. and then setting corePath to the domain/public/ffmpeg-stuff but then again, isn't really solving the errors arising when you are loading from aws hmmm.

Anyway, best of luck resolving the issue, and hopefully maybe something I said might have possible helped slightly :)