CODEWITHSUNDEEP
nginxbrowserffmpegvuejs3sharedarraybuffer
bully
bully

Reputation: 23

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?

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!

Upvotes: 0

Views: 1720

Answers (2)

Pavel Lobarev
Pavel Lobarev

Reputation: 321

I am using FFMPEG WASM in Angular application.

Here is a sullution I use:

  • For DEV: Add headers to angular.json:
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "headers": {
        "Cross-Origin-Embedder-Policy": "require-corp",
        "Cross-Origin-Opener-Policy": "same-origin"
      }
    },
...
  • For Producion: ngnix.conf:
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
    server_name localhost;

    location / {
        try_files $uri $uri/ /index.html;
    }
    
    add_header Cross-Origin-Embedder-Policy 'require-corp';
    add_header Cross-Origin-Opener-Policy 'same-origin';
}

And I use Docker to combine (Dockerfile): "

# Use the official NGINX image as the base image
FROM nginx

# Remove the default NGINX configuration
RUN rm /etc/nginx/conf.d/default.conf

# Copy your custom NGINX configuration to the container
COPY nginx.conf /etc/nginx/conf.d

# Copy the Angular build output to the container
COPY ./dist /usr/share/nginx/html

# Expose port 80
EXPOSE 80

Upvotes: 1

bully
bully

Reputation: 23

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

Upvotes: 0

Related Questions