vite config server headers causing errors

[isabdch]

Describe the bug When I downloaded ffmpeg to my project there was an error related to optimize deps and another one regarding a .worker.js file. I researched about it and saw that the devs had made an update just today to fix this. I did exactly as shown in the docs and also followed the vue + vite repo. Everything worked initially when I excluded ffmpeg from the optimize deps in the vite config file. However it's somewhat unstable, sometimes it worked, sometimes it didn't (nothing happened, nothing appeared on the console).

It also displayed the errors from the screenshot. In production it doesn't work at all. Found the console errors were due to the vite config details I added, which are in the other screenshot. If i remove this config, my app works normally, but ffmpeg doesn't for sure. If i add it back, sometimes it works (rarely) and sometimes it doesn't. It's actually still not working now, even with the vite config setup which is supposedly meant to work.

Screenshots

Desktop

• OS: macOS Big Sur 11.7.9
• Browser: Microsoft Edge

[jeromewu]

I would recommend you to use single thread version which won't require adding headers to the vite config

[mattiaz9]

I had to use a custom service worker as a proxy to add those headers:

// /public/fetch-sw.js
self.addEventListener("fetch", function (event) {
  event.respondWith(
    fetch(event.request).then((response) => {
      // add missing headers
      const headers = new Headers(response.headers)
      headers.set("Cross-Origin-Embedder-Policy", "require-corp")
      headers.set("Cross-Origin-Opener-Policy", "same-origin")

      // Respond to the original request with the fetched response
      return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers,
      })
    }).catch((error) => {
      console.error(`SW fetch error for '${url}': ${error}`)
      throw error
    })
  )
})

// main.tsx
registerSW(getBasename() + "/fetch-sw.js")

[isabdch]

@jeromewu @mattiaz9 I ended up doing as jeromewu suggested, and it worked quite nicely! Thank you for the help guys

[princefishthrower]

Can anyone perhaps show what "single thread version" means"?

Update: the single thread version is the @ffmpeg/core package (not the @ffmpeg/core-mt package)