FFmpeg.wasm stopped working after adding cross origin headers

Question

I was having the SharedArrayBuffer error as described in this other issue and to fix I added the cross origin isolation as suggested (also suggested here) by adding the headers

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

After that, now when I try to run the code I just got Uncaught ReferenceError: FFmpeg is not defined. The error is happening on Firefox

My code is:

<script  src="https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg.min.js"></script>
<script>
    
    const { createFFmpeg, fetchFile } = FFmpeg; //error happens here
    const ffmpegInstance = createFFmpeg({
        corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js',
        log: true,
    });
 </script> 

Before that, on Brave browser the process ran ok without having to add the Cross origin headers and also FFmpeg variable was defined.

Answer 1

The reason is that for SharedArrayBuffer to work, the scripts using its functionality must opt-in via those headers as well.

Unfortunately, https://unpkg.com/ currently doesn't serve scripts with COOP/COEP headers.

To make your application work again, you'll have to either copy and self-host those sources from your own origin, or bundle them as part of your application.