How to resolve the issue of FFmpeg.wasm not working about SharedArrayBuffer error properly when using Nginx as a server and use Vite no error?

Question

I am using FFmpeg.wasm for some frontend transcoding work. I know that due to certain browser policies, I need to configure some response headers in the Vite server options: server: { headers: { 'Cross-Origin-Opener-Policy': 'same-origin', 'Cross-Origin-Embedder-Policy': 'require-corp' } },

This works fine and doesn't throw the SharedArrayBuffer error.

Then, I ran yarn run build to generate the dist directory and copied it to my Nginx proxy server. I also configured similar response headers in Nginx as follows:

  server {
    listen 80;
    server_name ...My IP;
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
    add_header 'Cross-Origin-Opener-Policy' 'same-origin';
    add_header 'Cross-Origin-Resource-Policy' "cross-origin";
    add_header 'Access-Control-Allow-Origin' '*';
  
    location / {
        add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
        add_header 'Cross-Origin-Opener-Policy' 'same-origin';
    }

    root /www/audioserver/dist;
    ...
    }

However, it doesn't work in this setup. I have been trying for a while but haven't been able to solve it.

Here is my code for loading ffmpeg.wasm. It works fine in the development environment. The blob is the cached file of the wasm saved in IndexedDB:

`const blob = await getWasmCoreWasm();
await this.ffmpegInstance.load({
    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
    wasmURL: await toBlobURL(URL.createObjectURL(blob), 'application/wasm'),
    workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript'),
});
`

I have tried checking the response headers of the links, updating Nginx, and even modifying the version of FFmpeg. They all seem to be fine, but I don't know how to resolve this issue. I would really appreciate it if someone could help me out. Thank you very much!

score 0 · Answer 1 · answered Aug 22 '23 at 03:48

0

I finally resloved this issue when I using https but http.

answered Aug 22 '23 at 03:48

bully

23
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 27 '23 at 15:08

How to resolve the issue of FFmpeg.wasm not working about SharedArrayBuffer error properly when using Nginx as a server and use Vite no error?

1 Answers1