'@ffmpeg/ffmpeg: Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined

I have a small react app with a node.js backend (monorepo). The client is using @ffmpeg/ffmpeg, and all works fine locally, but when deployed to Heroku I'm getting the error ReferenceError: SharedArrayBuffer is not defined. This happens when I run ffmpeg.load(). Note that I am only using ffmpeg on the client in the React app.

What I have done so far:

  • Ensured that my deployed app is using https
  • Added these lines in setupProxy.js in app.use (located in the client directory). See this answer for context
response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
response.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
  • Registered for an origin trial with chrome. This actually worked, but I'd prefer a more permanent solution that works across browsers.
  • Tested debugging crossOriginIsolated, and verifying that it is true locally but false on my deployed site.

It seems like something is wrong with my Cross-Origin config, or maybe it's just not being applied. Any help would be appreciated.

node.jsreactjsherokuffmpeg


Solution 1:[1]

This was a silly mistake on my part. The Cross-Origin-* headers mentioned in the question were correct, they just had to be in index.js on the backend, not the client.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Flobbinhood

Related Questions