im not able to load ffmpeg as i tried everything im using nextjs with turbopack and its not working so diasable turbopack still its persist

[swappy-2003]

this is my code i have project submission on 15 th feb help me

"```
use client";

import { useEffect, useState, useRef } from "react";
import SparklesIcon from "@/components/sparklesIcon";
// Import FFmpeg constructor and utilities from @FFmpeg packages
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile } from "@ffmpeg/util";

export default function ResultVideo({ filename }) {
// State to track whether FFmpeg is loaded
const [loaded, setLoaded] = useState(false);
// State to hold the transcoded video Blob URL
const [transcodedVideoUrl, setTranscodedVideoUrl] = useState(null);
// Create an instance of FFmpeg using the constructor directly
const ffmpegRef = useRef(new FFmpeg());
// Refs for the video element and a log message container
const videoRef = useRef(null);
const messageRef = useRef(null);

useEffect(() => {
if (!filename) return;

// Set the source for the original video (from your external URL)
videoRef.current.src = `https://swapnil-epic-captionns.s3.amazonaws.com/${filename}`;

// Automatically load FFmpeg on mount / when filename changes
const loadFFmpeg = async () => {
  // Use the local copies from your public folder (using UMD build files)
  const basePath = "/ffmpeg";
  const ffmpeg = ffmpegRef.current;

  // Optional: Attach a log listener to show FFmpeg messages
  ffmpeg.on("log", ({ message }) => {
    if (messageRef.current) {
      messageRef.current.innerHTML = message;
    }
    console.log("FFmpeg log:", message);
  });

  try {
    console.log("Loading FFmpeg from local files...");
    await ffmpeg.load({
      coreURL: `${basePath}/ffmpeg-core.js`,
      wasmURL: `${basePath}/ffmpeg-core.wasm`,
    });
    setLoaded(true);
    console.log("FFmpeg loaded successfully");
  } catch (error) {
    console.error("Error loading FFmpeg:", error);
  }
};

loadFFmpeg();

}, [filename]);

// Function to transcode a video once FFmpeg is loaded
const transcode = async () => {
if (!loaded) {
console.error("FFmpeg is not loaded yet");
return;
}
const ffmpeg = ffmpegRef.current;
try {
console.log("Starting transcoding...");
// For demonstration, we use a test video file.
const inputUrl =
"https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm";
// Download and write the input file to FFmpeg's in-memory filesystem
await ffmpeg.writeFile("input.webm", await fetchFile(inputUrl));
// Execute FFmpeg command to convert webm to mp4
await ffmpeg.exec(["-i", "input.webm", "output.mp4"]);
// Read the transcoded output file
const data = await ffmpeg.readFile("output.mp4");
// Create a Blob URL from the transcoded data
const url = URL.createObjectURL(
new Blob([data.buffer], { type: "video/mp4" })
);
setTranscodedVideoUrl(url);
console.log("Video transcoded successfully");
} catch (error) {
console.error("Error during transcoding:", error);
}
};

return (

Original Video

<video
ref={videoRef}
controls
style={{ width: "100%", maxWidth: "600px" }}
>
{transcodedVideoUrl && (

Transcoded Video:

<video
src={transcodedVideoUrl}
controls
style={{ width: "100%", maxWidth: "600px" }}
>

)}
<div style={{ textAlign: "center", marginTop: "1rem" }}>
<button
onClick={transcode}
disabled={!loaded}
style={{
padding: "0.5rem 1rem",
backgroundColor: loaded ? "#38a169" : "#a0aec0",
color: "white",
border: "none",
borderRadius: "9999px",
cursor: loaded ? "pointer" : "not-allowed",
}}
>

Apply Captions

<p ref={messageRef} style={{ marginTop: "1rem" }}>

Open Developer Tools (Ctrl+Shift+I) to view logs

);
}