ffmpegwasm/ffmpeg.wasm

ffmpeg.FS is not a function

KarimElsayad247 opened this issue · 1 comments

Describe the bug
Unable to use ffmpeg.fs function

TypeError: ffmpeg.FS is not a function

I'm using React + Vite + ReduxToolkit

To Reproduce
Loading FFMPEG

I load FFMPEG in a hook, and store the instance in a redux slice

  const loadFfmpeg = async () => {
    console.log("Loading Ffmpeg")
    const ffmpegInstance = new FFmpeg();
    const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm'
    ffmpegInstance.on('log', ({message}) => {
      console.log(message);
    });
    // toBlobURL is used to bypass CORS issue, urls with the same
    // domain can be used directly.
    await ffmpegInstance.load({
      coreURL: await toBlobURL(
        `${baseURL}/ffmpeg-core.js`,
        "text/javascript"
      ),
      wasmURL: await toBlobURL(
        `${baseURL}/ffmpeg-core.wasm`,
        "application/wasm"
      ),
    });
    console.log("Ffmpeg loaded")
    return ffmpegInstance;
  }

  const initFfmpeg = async () => {
    // if (ffmpegLoaded) {
    //   console.log("ffmepg already loaded.")
    //   return;
    // }

    dispatch(setFfmpegLoading());
    const ffmpegInstance = await loadFfmpeg();
    dispatch(setFfmpeg(ffmpegInstance))
    dispatch(setFfmpegDoneLoading())
  };

And this is how I'm using it

    await loadFfmpeg();
    dispatch({ type: "reset" });
    const { file, duration } = currentData;
    const url = URL.createObjectURL(file);
    await ffmpeg.writeFile("input.webm", await fetchFile(url));
    ffmpeg.FS('mkdir','/thumbnails');

Expected behavior

I expect ffmpeg.FS to exist and not throw and error

Actual behavior

ffmpeg.FS is not a function

This is despite the fact that I can look at the source and see

export interface FFmpegCoreModule {
  /** default arguments prepend when running exec() */
  DEFAULT_ARGS: string[];
  FS: FS;
  NULL: Pointer;
  SIZE_I32: number;

and also interface FS has this

export interface FS {
  mkdir: (path: string) => void;
  rmdir: (path: string) => void;
  rename: (oldPath: string, newPath: string) => void;
  writeFile: (path: string, data: Uint8Array | string) => void;
  readFile: (path: string, opts: OptionReadFile) => Uint8Array | string;
  readdir: (path: string) => string[];
  unlink: (path: string) => void;
  stat: (path: string) => Stat;
  /** mode is a numeric notation of permission, @see [Numeric Notation](https://en.wikipedia.org/wiki/File-system_permissions#Numeric_notation) */
  isFile: (mode: number) => boolean;
  /** mode is a numeric notation of permission, @see [Numeric Notation](https://en.wikipedia.org/wiki/File-system_permissions#Numeric_notation) */
  isDir: (mode: number) => boolean;
  mount: (fileSystemType: FSFilesystem, data: WorkerFSMountConfig, path: string) => void;
  unmount: (path: string) => void;
  filesystems: FSFilesystems;
}

mkdir, rmdir, and a few others don't exist, but rename, writeFile, and readFile do exist.

Desktop

  • OS: Linux
  • Browser: Microsoft Edge
  • Version: 128.0.2739.54 (Official build) (64-bit)

Ok so I just found out it should be ffmpeg.FS.mkdir

and also found out that there is ffmpeg.createDir