I’m working on a React application where I’m using the @ffmpeg/ffmpeg library to compress images and videos. I’m facing an issue with the virtual file system (FS) when trying to read and write files using FFmpeg. I’m getting the following error:

ErrnoError: FS error

Here’s the relevant part of my code:

import React, { useState } from "react";
import { FFmpeg } from "@ffmpeg/ffmpeg";

const ffmpeg = new FFmpeg();

const fetchFile = async (filePath) => {
    const file = await ffmpeg.readFile(filePath);
    alert("hello");
    return new Uint8Array(file).buffer;
};


const Main = () => {
    const [file, setFile] = useState(null);
    const [compressedFile, setCompressedFile] = useState("");

    const loadFFmpeg = async () => {
        if (!ffmpeg.isLoaded) {
          await ffmpeg.load();
        }
      };      

    const getFile = (event) => {
        const selectedFile = event.target.files[0];
        
        if (selectedFile) {
            setFile(selectedFile);
        }
    };

    const compressImage = (selectedFile) => {
        const img = new Image();
        img.src = URL.createObjectURL(selectedFile);
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const MAX_WIDTH = 300;
            const MAX_HEIGHT = 300;
            let width = img.width;
            let height = img.height;

            if (width > height) {
                if (width > MAX_WIDTH) {
                    height *= MAX_WIDTH / width;
                    width = MAX_WIDTH;
                }
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
            }

            canvas.width = width;
            canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            const dataUrl = canvas.toDataURL('image/jpeg', 1.0);
            setCompressedFile(dataUrl);
        };
    };

    const compressVideo = async (selectedFile) => {
        try {
            await loadFFmpeg();
    
            const arrayBuffer = await selectedFile.arrayBuffer();
            const fileName = selectedFile.name;
    
            await ffmpeg.writeFile(fileName, new Uint8Array(arrayBuffer));
    
            await ffmpeg.exec(
                '-i',
                fileName,
                '-vf',
                'scale=640:-1',
                '-c:a',
                'aac',
                '-strict',
                '-2',
                'output.mp4'
            );
    
            const data = await fetchFile('output.mp4');
            const compressedVideoBlob = new Blob([data], { type: 'video/mp4' });
            const compressedVideoUrl = URL.createObjectURL(compressedVideoBlob);
            setCompressedFile(compressedVideoUrl);
    
            await ffmpeg.unlink(fileName);
            await ffmpeg.unlink('output.mp4');
    
            alert('Compression successful');
        } catch (error) {
            console.error('Error:', error);
            alert('Compression failed. Please check the console for more details.');
        }
    };
        

    const handleSubmit = async (e) => {
        e.preventDefault();

        if (file) {
            const fileType = file.name.split('.').pop().toLowerCase();

            if (fileType === 'png' || fileType === 'jpg' || fileType === 'jpeg') {
                compressImage(file);
            } else if (fileType === 'mp4' || fileType === 'h264') {
                compressVideo(file);
            } else {
                alert('Please select a valid file type (png, jpg, jpeg for images or mp4, h264 for videos).');
            }
        }
    };

    const handleDownload = () => {
        if (file) {
            const downloadLink = document.createElement('a');
            downloadLink.href = compressedFile;

            const fileExtension = file.name.split('.').pop().toLowerCase();

            downloadLink.download = `compressed_file.${fileExtension}`;
    
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }
    };

    return (
        <>
            <h1>Main Page</h1>
            <form onSubmit={handleSubmit}>
                <label>Upload</label>
                <input type='file' onChange={getFile} />
                <br /><br />
                <input type="submit" value="Compress" />
            </form>
            {compressedFile && (
                <>
                    <h2>Compressed File Preview</h2>
                    {file && file.name && ( 
                        file.name.split('.').pop().toLowerCase() === 'mp4' || file.name.split('.').pop().toLowerCase() === 'h264' ? (
                            <video width="300" controls>
                                <source src={compressedFile} type="video/mp4" />
                                Your browser does not support the video tag.
                            </video>
                        ) : (
                            <img src={compressedFile} alt="Compressed file preview" />
                        )
                    )}
                    <br /><br />
                    <button onClick={handleDownload}>Download Compressed File</button>
                </>
            )}
        </>
    );
};

export default Main;

I’m using ffmpeg.readFile and ffmpeg.writeFile to read and write files to FFmpeg’s virtual file system. I’ve also tried using ffmpeg.read and ffmpeg.write but still encounter the same issue.

Could someone please help me understand what might be causing this FS error and how to resolve it?