Chrome and Edge not support multi-thread (Test in playground)

[Jveshi]

Describe the bug Chrome and Edge not support multi-thread

Try it out on the playground page and find that there is a problem with multithreading https://ffmpegwasm.netlify.app/playground/ According to the description not all browsers support. But looking at the specific instructions, Page Not Found. https://ffmpegwasm.netlify.app/docs/getting-started/multi-thread I tried it in Chrome and Edge, other browsers didn't

Screenshots

Desktop:

• OS: windows 10
• Browser: Chrome, Edge

[jeromewu]

Can you provide more description for the problem you encountered? I always tested the website using Chrome, so I think it should work.

[Jveshi]

Can you provide more description for the problem you encountered? I always tested the website using Chrome, so I think it should work.

Console Output： ffmpeg version 5.1.3 Copyright (c) 2000-2022 the FFmpeg developers built with emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.40 (5c27e79dd0a9c4e27ef2326841698cdd4f6b5784) 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 libavutil 57. 28.100 / 57. 28.100 libavcodec 59. 37.100 / 59. 37.100 libavformat 59. 27.100 / 59. 27.100 libavdevice 59. 7.100 / 59. 7.100 libavfilter 8. 44.100 / 8. 44.100 libswscale 6. 7.100 / 6. 7.100 libswresample 4. 7.100 / 4. 7.100 libpostproc 56. 6.100 / 56. 6.100 Input #0, avi, from 'video.avi': Duration: 00:00:03.14, start: 0.000000, bitrate: 736 kb/s Stream #0:0: Video: indeo4 (IV41 / 0x31345649), yuv410p, 256x240, 731 kb/s, 35 fps, 35 tbr, 35 tbn Stream mapping: Stream #0:0 -> #0:0 (indeo4 (native) -> h264 (libx264))

---

Except for turning on the "Use Multithreading" switch during operation, there are no other changes. After clicking the "Run" button, the progress bar does not change, and the video.mp4 file does not appear in the file list on the left. After turning off the "Use Multithreading" switch everything works fine.

[Jveshi]

I know that Chrome is used so much that it must have been tested. But testing in playground is unsuccessful, so I'm confused.

[Jveshi]

at https://github.com/ffmpegwasm/ffmpeg.wasm/issues/529 You suggest me to use core-mt, but I just modified the code and it was unsuccessful. The program stops at this state There is no error in the console. Using a single-threaded core will work, but of course it will be slow. Is it related to the processor and graphics card used?

[jeromewu]

Not sure why it is hanged, maybe you can try this minimal offline setup and see if it works:

https://github.com/ffmpegwasm/ffmpeg.wasm/blob/main/apps/vanilla-app/public/transcode-mt.html

[Jveshi]

The result is the same, the program stops at the beginning after reading the file. multi thread core

single thread core

[jeromewu]

I cannot reproduce the pronlem, not sure why. May I ask the number of CPU core you have?

[Jveshi]

I cannot reproduce the pronlem, not sure why. May I ask the number of CPU core you have?

AMD Ryzen 9 5900X 12-Core Processor

[jeromewu]

That should be enough for spawning more web workers, then I have no idea why it doesn't work.

[Jveshi]

That should be enough for spawning more web workers, then I have no idea why it doesn't work.

It's a pity, I hope the next version can solve the problem, thank you for your reply. In addition, I would like to ask you about 4K encoding and H265 encoding. at https://github.com/ffmpegwasm/ffmpeg.wasm/issues/511 Is this feature supported?

[TheForsakenSpirit]

Can someone forward me to instruction how to switch to single thread in code?

I have same issue in Chrome, on Ubuntu machine with i7-11800H. Playground just stuck on first frame: frame= 1 fps=0.0 q=0.0 size= 0kB time=00:00:00.00 bitrate=N/A speed= 0x But it works in Firefox. Also works on Mac M1.

[jeromewu]

Here is the full example for single thread version: https://ffmpegwasm.netlify.app/docs/getting-started/usage#transcoding-video

[olup]

With version 0.12.4, is it normal I don't have a thread option in the loadfunction config ? Is there a new different way to activate mutli threading ?

[jeromewu]

With version 0.12.4, is it normal I don't have a thread option in the loadfunction config ? Is there a new different way to activate mutli threading ?

Yes, you just need to make sure you are using @ffmpeg/core-mt and passing coreURL, wasmURL and workerURL when loading, no need to provide any other options.

[olup]

Thanks @jeromewu - So by having :

const baseURL = "https://unpkg.com/@ffmpeg/core-mt@0.12.2/dist/esm";
const loadFFmpeg = async () => {
  console.log("Loading ffmpeg");
  await ffmpeg.load({
    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
    workerURL: await toBlobURL(
      `${baseURL}/ffmpeg-core.worker.js`,
      "text/javascript"
    ),
  });
  console.log("FFmpeg loaded");
  state.isFfmpegLoaded.set(true);
};

I am already multithreading ?

[jeromewu]

Yes, that's correct.

[jerryliuoft]

I'm also running into the same problem. Single core works, but mt just stuck at stream mapping: (this is using the playground).

[foureight84]

Looks like this is the exact same issue that I am having and also mentioned in #654. Currently trying to use this with NextJS 14. I can also confirm that it works fine on Firefox.

• OS: Windows 11 23H2
• Browser: Chrome 120.0.6099.111 (Official Build) (64-bit)
• Version: 0.12.9 - current master

const load = async () => {
    try {
      const baseURL = `https://localhost`;
      const ffmpeg = ffmpegRef.current;
      ffmpeg.on("log", ({ message }) => {
        console.log("log", message);
      });

      ffmpeg.on("progress", ({ progress, time }) => {
        console.log("progress", `${progress * 100} %, time: ${time / 1000000} s`);
      });

      await ffmpeg.load({
        coreURL: await toBlobURL(`${baseURL}/js/ffmpeg-core.js`, "text/javascript"),
        wasmURL: await toBlobURL(`${baseURL}/js/ffmpeg-core.wasm`, "application/wasm"),
        workerURL: await toBlobURL(`${baseURL}/js/ffmpeg-core.worker.js`, "text/javascript"),
      });

      setFFmpegLoaded(true);
    } catch (e) {
      console.log(e);
    }
  };

const handleFile = async (e) => {
    const file = e.target.files?.item(0);
    setFile(file);
    const ffmpeg = ffmpegRef.current;
    await ffmpeg.writeFile(file.name, await fetchFile(file));
    console.log("file.name", file.name);
    await ffmpeg.exec([
      "-i",
      file.name,
      "-c:v",
      "libx264",
      "-preset",
      "medium",
      "-crf",
      "20",
      "-c:a",
      "aac",
      "-b:a",
      "160k",
      "-vf",
      "format=yuv420p",
      "-movflags",
      "+faststart",
      "output.mp4",
    ]);
    const data = (await ffmpeg.readFile("output.mp4")) as any;

    if (videoRef.current) {
      videoRef.current.src = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));
    }
  };

[jumpjack]

Could this issue be related to this one? https://github.com/ffmpegwasm/ffmpeg.wasm/issues/263

[Jveshi]

Could this issue be related to this one? #263

I think it is not for this reason. This is already a problem in 2021. It was still an old version at that time. At present, my project still relies on the old version of V0.11.0 and can be used normally. I tested the recently released v0.12.10 in the Playground, and the problem still exists.

[evayde]

I have this issue when not explicitly setting threads to <= 4. So... -threads 4 works, -threads 0 or -threads 16 doesnt work.

Chrome 126 Intel i9 12900K