thank you for your help with my problem.

I am using FFmpeg.wasm on Next.js to compress videos when users upload them. I then send the videos to a server and save them on AWS S3. For the client side, I’m using Next.js.

To solve the error “SharedArrayBuffer is not defined”, I added the following code to next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: false,
    async headers() {
      return [
        {
          source: '/(.*)',
          headers: [
            {
              key: 'Cross-Origin-Opener-Policy',
              value: 'same-origin',
            },
            {
              key: 'Cross-Origin-Embedder-Policy',
              value: 'require-corp',
            },
          ],
        },
      ];
    },
};
export default nextConfig;

Here is the code I’m using for video compression:

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });

export const compressVideo = async (file: File): Promise<Blob> => {
  if (!ffmpeg.isLoaded()) {
    await ffmpeg.load();
  }

  // Write the file to FFmpeg's filesystem
  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));

  // Run the ffmpeg command to compress the video
  await ffmpeg.run('-i', 'input.mp4', '-vf', 'scale=1280:720', '-b:v', '1M', '-c:v', 'libx264', '-preset', 'fast', '-crf', '28', 'output.mp4');

  // Read the output file from FFmpeg's filesystem
  const data = ffmpeg.FS('readFile', 'output.mp4');

  // Convert the output to a Blob
  const compressedVideo = new Blob([data.buffer], { type: 'video/mp4' });

  return compressedVideo;
};

This works well, but after that, I got this error: SyntheticBaseEvent on the video tag.

Can anyone help me resolve this issue?