Uncaught (in promise) ErrnoError: FS error

[alpacaPwaa]

Describe the bug The console give this error everytime I try to transcode the uploaded file. VideoUploaderTest.tsx:42 Uncaught (in promise) ErrnoError: FS error

To Reproduce

const [uploadedFile, setUploadedFile] = useState<File | null>(null);
const [transcodeFile, setTranscodeFile] = useState<string | null>(null);
const ffmpegRef = useRef(new FFmpeg());
const messageRef = useRef<HTMLParagraphElement | null>(null);

const load = async () => {
    const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd";
    const ffmpeg = ffmpegRef.current;
    ffmpeg.on("log", ({ message }) => {
      if (messageRef.current) messageRef.current.innerHTML = message;
    });
    // toBlobURL is used to bypass CORS issue, urls with the same
    // domain can be used directly.
    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
      wasmURL: await toBlobURL(
        `${baseURL}/ffmpeg-core.wasm`,
        "application/wasm"
      ),
    });
  };

  const transcode = async () => {
    const ffmpeg = ffmpegRef.current;
    if (!uploadedFile) return;
    await ffmpeg.writeFile("input.mp4", await fetchFile(uploadedFile));
    await ffmpeg.exec([
      "drawtext=fontfile=/arial.ttf:text='ffmpeg.wasm':x=10:y=10:fontsize=24:fontcolor=white",
    ]);
    const data = (await ffmpeg.readFile("output.mp4")) as any;
    const url = URL.createObjectURL(
      new Blob([data.buffer], { type: "video/mp4" })
    );
    setTranscodeFile(url);
  };

  const handleFileChange = (event: any) => {
    const file = event.target.files[0];
    setUploadedFile(file);
  };

  useEffect(() => {
    load();
  }, []);

  return (
    <div className="fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
      <input type="file" onChange={handleFileChange} />
      {uploadedFile && (
        <video src={URL.createObjectURL(uploadedFile)} controls />
      )}
      {transcodeFile && <video src={transcodeFile} controls />}
      <br />
      <button
        onClick={transcode}
        className="bg-green-500 hover:bg-green-700 text-white py-3 px-6 rounded"
      >
        Transcode File
      </button>
      <p ref={messageRef}></p>
    </div>
  );

Expected behavior I should be able to transcode the video and add overlay text to it.

Screenshots

Desktop (please complete the following information):

• Microsoft
• Chrome
• Version 121.0.6167.189

[alpacaPwaa]

If anyone is reading this who has successfully set up ffmpeg wasm before please give a little help, I would love to work with ffmpeg wasm for the project I had in mind.

[EnixCoda]

Having a similar issue.

@alpacaPwaa Would you please check the log of ffmpeg like below so that we can see if we are having the same issue?

const ffmpeg = new FFmpeg();
ffmpeg.on("log", ({ message }) => {
  console.log("[ffmpeg]", message);
});

The detailed error I encounter is Error initializing filter 'drawtext' with args 'text="hello"' index.ts:129:12

Arg passed to ffmpeg.exec is

[
    "-i",
    "input.mp4",
    "-vf",
    "drawtext=text=\"hello\"",
    "output.mp4"
]

I've also tried with text=hello, text='hello'. None of them worked.

Complete log

```log [ffmpeg] ffmpeg version 5.1.4 Copyright (c) 2000-2023 the FFmpeg developers index.ts:129:12 [ffmpeg] built with emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784) index.ts:129:12 [ffmpeg] configuration: --target-os=none --arch=x86_32 --enable-cross-compile --disable-asm --disable-stripping --disable-programs --disable-doc --disable-debug --disable-runtime-cpudetect --disable-autodetect --nm=emnm --ar=emar --ranlib=emranlib --cc=emcc --cxx=em++ --objcc=emcc --dep-cc=emcc --extra-cflags='-I/opt/include -O3 -msimd128 -sUSE_PTHREADS -pthread' --extra-cxxflags='-I/opt/include -O3 -msimd128 -sUSE_PTHREADS -pthread' --enable-gpl --enable-libx264 --enable-libx265 --enable-libvpx --enable-libmp3lame --enable-libtheora --enable-libvorbis --enable-libopus --enable-zlib --enable-libwebp --enable-libfreetype --enable-libfribidi --enable-libass --enable-libzimg index.ts:129:12 [ffmpeg] libavutil 57. 28.100 / 57. 28.100 index.ts:129:12 [ffmpeg] libavcodec 59. 37.100 / 59. 37.100 index.ts:129:12 [ffmpeg] libavformat 59. 27.100 / 59. 27.100 index.ts:129:12 [ffmpeg] libavdevice 59. 7.100 / 59. 7.100 index.ts:129:12 [ffmpeg] libavfilter 8. 44.100 / 8. 44.100 index.ts:129:12 [ffmpeg] libswscale 6. 7.100 / 6. 7.100 index.ts:129:12 [ffmpeg] libswresample 4. 7.100 / 4. 7.100 index.ts:129:12 [ffmpeg] libpostproc 56. 6.100 / 56. 6.100 index.ts:129:12 [ffmpeg] Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'input.mp4': index.ts:129:12 [ffmpeg] Metadata: index.ts:129:12 [ffmpeg] major_brand : isom index.ts:129:12 [ffmpeg] minor_version : 512 index.ts:129:12 [ffmpeg] compatible_brands: isomiso2avc1mp41 index.ts:129:12 [ffmpeg] encoder : Lavf60.16.100 index.ts:129:12 [ffmpeg] Duration: 00:00:06.00, start: 0.000000, bitrate: 3135 kb/s index.ts:129:12 [ffmpeg] Stream #0:0[0x1](und): Video: h264 (High) (avc1 / 0x31637661), yuvj420p(pc, progressive), 1280x960 [SAR 1:1 DAR 4:3], 3130 kb/s, 36 fps, 36 tbr, 18432 tbn (default) index.ts:129:12 [ffmpeg] Metadata: index.ts:129:12 [ffmpeg] handler_name : VideoHandler index.ts:129:12 [ffmpeg] vendor_id : [0][0][0][0] index.ts:129:12 [ffmpeg] encoder : Lavc60.31.102 libx264 index.ts:129:12 [ffmpeg] Stream mapping: index.ts:129:12 [ffmpeg] Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264)) index.ts:129:12 [ffmpeg] [Parsed_drawtext_0 @ 0xefb4b0] No font filename provided index.ts:129:12 [ffmpeg] [AVFilterGraph @ 0xef8790] Error initializing filter 'drawtext' with args 'text="hello"' index.ts:129:12 [ffmpeg] Error reinitializing filters! index.ts:129:12 [ffmpeg] Failed to inject frame into filter network: Invalid argument index.ts:129:12 [ffmpeg] Error while processing the decoded data for stream #0:0 index.ts:129:12 [ffmpeg] Conversion failed! index.ts:129:12 [ffmpeg] Aborted() ```

[EnixCoda]

I'm new to ffmpeg. I found another random video filter and it worked: scale=iw/2:-1

Perhaps this issue is drawtext-only?

[EnixCoda]

https://ffmpegwasm.netlify.app/docs/getting-started/usage/#display-text-on-the-video

It turned out that font file is required in order to make drawtext work properly. My problem solved after loading & applying font file.

But it would be more friendly to user if ffmpeg.wasm could warn user that font is missing. Because fontfile was not required when running ffmpeg natively

[alpacaPwaa]

@EnixCoda thanks for your reply, I just came back to my project and saw your reply it's very helpful, I did the same and it fix the error.