javascriptffmpegwebassembly

FFmpeg.wasm stopped working after adding cross origin headers

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/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>
<script>
    
    const { createFFmpeg, fetchFile } = FFmpeg; //error happens here
    const ffmpegInstance = createFFmpeg({
        corePath: 'https://unpkg.com/@ffmpeg/core@0.10.0/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.

Solution

  • 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.