ffmpeg.wasm icon indicating copy to clipboard operation
ffmpeg.wasm copied to clipboard

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

Open Jveshi opened this issue 2 years ago • 21 comments

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 image image

Desktop:

  • OS: windows 10
  • Browser: Chrome, Edge

Jveshi avatar Aug 03 '23 07:08 Jveshi

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

jeromewu avatar Aug 03 '23 15:08 jeromewu

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 avatar Aug 03 '23 17:08 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 avatar Aug 03 '23 17:08 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? image image

Jveshi avatar Aug 03 '23 18:08 Jveshi

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

jeromewu avatar Aug 05 '23 06:08 jeromewu

The result is the same, the program stops at the beginning after reading the file. multi thread core 批注 2023-08-06 012138 single thread core 批注 2023-08-06 012521

Jveshi avatar Aug 05 '23 17:08 Jveshi

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

jeromewu avatar Aug 06 '23 00:08 jeromewu

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

Jveshi avatar Aug 06 '23 02:08 Jveshi

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

jeromewu avatar Aug 06 '23 03:08 jeromewu

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?

Jveshi avatar Aug 06 '23 04:08 Jveshi

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.

TheForsakenSpirit avatar Aug 10 '23 15:08 TheForsakenSpirit

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

jeromewu avatar Aug 10 '23 15:08 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 ?

olup avatar Aug 13 '23 09:08 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 ?

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.

jeromewu avatar Aug 13 '23 13:08 jeromewu

Thanks @jeromewu - So by having :

const baseURL = "https://unpkg.com/@ffmpeg/[email protected]/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 ?

olup avatar Aug 13 '23 16:08 olup

Yes, that's correct.

jeromewu avatar Aug 14 '23 00:08 jeromewu

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

jerryliuoft avatar Sep 03 '23 21:09 jerryliuoft

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" }));
    }
  };

image

foureight84 avatar Dec 22 '23 10:12 foureight84

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

jumpjack avatar Mar 04 '24 13:03 jumpjack

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.

Jveshi avatar Mar 04 '24 14:03 Jveshi

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

evayde avatar Jun 26 '24 13:06 evayde