ShareArrayBuffer is not defined - error with Vuejs, Webpack Encore and Symfony

Question

I have made a Symfony application in which I use a VueJs component using Webpack Encore to send videos. I need to compress the video before sending it to the server. For that, I try to use ffmep.wasm :

<template>
    <input type="file" accept="video/mp4" @change="transcode($event)">
</template>

<script>
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg";

export default {
    name: "SendVideo",
    setup(props) {

        return {
            async transcode(e) {
                const file = e.target.files[0];
                
                const ffmpeg = createFFmpeg({
                    log: true,
                });
                await ffmpeg.load();
                
                ffmpeg.FS("writeFile", "test.avi", await fetchFile(file));
                await ffmpeg.run("-i", "test.avi", "test.mp4");
                
                const data = ffmpeg.FS("readFile", "test.mp4");
                console.log(data)
            }
        }
    }
}
</script>

But I get an error when I run the compression:

sharedarraybuffer is not defined

On github it explains that I need to add headers to the server like this (for express.js).

const express = require('express');
const app = express();

app.use((_, res, next) => {
  res.header('Cross-Origin-Opener-Policy', 'same-origin');
  res.header('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

Since I use Webpack Encore, I went to see how I can fix the problem with Webpack and I found this.

module.exports = {
  //...
  devServer: {
    headers: {
      'X-Custom-Foo': 'bar',
    },
  },
};

But I can't adapt this solution with Webpack Encore. Has anyone experienced this problem before?

Answer 1

Set headers for devServer should work when you developing app in local development environment.

But when the app is deployed to some server, it will still suffer the same issue, you must set correct headers for the server too.