我做了一个Symfony应用程序，在其中我使用VueJs组件使用Webpack Encore发送视频。在把视频发送到服务器之前，我需要把它压缩。为此，我尝试使用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>

但是当我运行压缩时，我得到一个错误：
sharedarraybuffer未定义
在github上，它解释了我需要像这样向服务器添加头（对于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();
});

由于我使用Webpack Encore，我去看看如何解决Webpack的问题，我发现了这个问题。

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

但是我不能用Webpack Encore来适应这个解决方案。以前有人遇到过这个问题吗？