Browser run FFmpeg command hangs indefinitely

[bleonard-tl]

Describe the bug
A clear and concise description of what the bug is.

When using FFmpeg.wasm in a browser context, running a FFmpeg command hangs indefinitely. It runs the command till the end of the FFmpeg execution, but never releases the process to continue execution of other js code

To Reproduce
Steps to reproduce the behavior:

1. Follow the README to setup npm version of the library for Nextjs
2. Set up a simple browser side ffmpeg command (see below for example code)
3. See error

Expected behavior
A clear and concise description of what you expected to happen.

I expect it to continue execution after running and finishing the FFmpeg command

Screenshots
If applicable, add screenshots to help explain your problem.

This is always the point where the execution stops ^

    ffmpeg.FS(
      "writeFile",
      filename,
      await fetchFile(`http://localhost:3000/${filename}`)
    );
    console.log("Processing");

    await ffmpeg.run("-y", "-i", filename, "-c:v", "libx264", outputFilename);
    console.log("Finished");
    console.log("Done");
    
    const data = await ffmpeg.FS("readFile", outputFilename);

    const video = document.getElementById("output-video");
    let blob = new Blob([data.buffer], { type: "video/mp4" });

    video.src = URL.createObjectURL(blob);
    video.play();

The processing console log and the ffmpeg run are being executed, but it never reaches past that point, even with different FFmpeg commands and file formats

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS: 13.4
• Browser [e.g. chrome, safari] Brave: 1.52.126
• Version [e.g. 22] Chromium: 114.0.5735.133

Additional context
Add any other context about the problem here.

I believe the reason this bug is occurring is due to the removal of the exit message from FFmpeg.wasm-core in this commit

    /*	
     * Print an unique message here to detect	
     * end of operation in JavaScript.	
     */	
    printf("FFMPEG_END\n");	

    exit(ret);

In createFFmpeg.js there is a function that references the same string

  const detectCompletion = (message) => {
    if (message === "FFMPEG_END" && runResolve !== null) {
      runResolve();
      runResolve = null;
      runReject = null;
      running = false;
    }
  };

If I'm not mistaken then it's just as easy as bringing the removed code back. Though this was part of a "fix some errors" commit so there may have been a reason @DreamOfIce that you removed it that I'm not aware of?

[DreamOfIce]

It looks like you build and use the next branch yourself?

If so, which commit did you use? The next branch was recently refactored using TypeScript, and I know there are some commits that are problematic.
Theoretically this problem does not exist in v0.12 release and the latest commit.
You can try the above versions, and if you still have problems with these versions, please let me know.

BTW, in production environments it is recommended to use the stable release, I do not guarantee the availability of the mainline branch.

[bleonard-tl]

Yup built from next branch! I had unrelated problems with my own implementation and serving from node_modules so it was easier for me to just build from scratch using the latest commit.

I understand the releases are more stable, but I also would like to contribute back to this project again hopefully in the future so I though I might as well just dive in and see how it works as is!

I have made a PR to core with the changes after confirming that they do indeed fix the hanging bug I mentioned here, feel free to give any feedback you deem necessary and I'll make my best effort to address it.

[DreamOfIce]

In the new version written in TypeScript, we use the emscripten_proxy_callback() method, and the resolve and reject of Promise as callbacks, so FFMPEG_END is no longer needed.

This avoids issues such as dependency on internal details and also allows us to get the exit code.

[DreamOfIce]

However, there was a problem with a callback in part of the commit that would not be called properly, causing the problem you describe. This has been fixed and passed the tests in the latest commit.

[DreamOfIce]

Does the latest commit of the next branch still have this problem in the browser?
Can I close this issue?

[bleonard-tl]

Ah I misunderstood the release pattern! My apologies and thank you for clearing things up, I agree the way you have it done is much better!

[Xhale1]

@DreamOfIce I'm having this issue on the current 0.12.0 release (not building from any particular commit).

If this is solved in a more recent commit would it be possible to create a new 0.12.1 release on npm?

[DreamOfIce]

@DreamOfIce I'm having this issue on the current 0.12.0 release (not building from any particular commit).

If this is solved in a more recent commit would it be possible to create a new 0.12.1 release on npm?

There are still a lot of legacy issues with v0.12, and a completely refactored v0.13 will be released soon (should be in the next few days).
Also, the problems with v0.12 are largely design issues that are difficult to fix.
So a new v0.12 release is not being considered at this time.

[DreamOfIce]

@bleonard-tl @Xhale1 I am excited to inform you that the refactored v0.13.0 has been released, please refer to the migration guide to upgrade.