Why can't ffmpeg.wasm work well on Chrome? Please answer.

[CxyJerry]

Describe the bug
I want to use ffmpeg.wasm in my project. It may need to run in browsers such as chrome, firefox, safari, etc. However, a problem was discovered during the integration process: the demo I wrote can run well in firefox. It runs, but there is no way to run it in chrome. It will stop running after the video information appears (it may also be other unexpected situations). I don't know how to solve it. I hope the author can help me look at it and give me some suggestion

To Reproduce

<script setup>
import {FFmpeg} from "@ffmpeg/ffmpeg";
import {fetchFile, toBlobURL} from "@ffmpeg/util";
import {ref} from "vue";

const videoFile = ref('')
const videoSrc = ref('')

const ffmpeg = new FFmpeg()
const init_ffmpeg = async () => {
  ffmpeg.on('log', e => {
    console.log(e.message)
  })
  ffmpeg.on('progress', e => {
    console.log(e.progress)
  })
  const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm'
  if (ffmpeg.loaded) {
    return
  }
  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 加载完成')
}

const handleFileUpload = (event) => {
  videoFile.value = event.target.files[0];
}

const convert = async () => {
  console.log('enter convert')
  await init_ffmpeg()
  await ffmpeg.writeFile("123456.mp4", await fetchFile(videoFile.value))
  console.log(videoFile.value.name)
  try {
    const target_name = "123456.mov"
    const res = await ffmpeg.exec([
      '-i', "123456.mp4",
      target_name
    ])
    console.log('result：', res)
    const snatshot = await ffmpeg.readFile(target_name)
    videoSrc.value = URL.createObjectURL(new Blob([snatshot.buffer], {type: 'video/quicktime'}))
    await ffmpeg.deleteFile("123456.mp4")
    await ffmpeg.deleteFile(target_name)

  } catch (e) {
    console.log(e)
  }
}
</script>

Expected behavior
I hope that I can convert mp4 files to mov files normally on the chrome browser without stopping working directly.

Screenshots

Desktop (please complete the following information):

• OS: Windows10
• Browser: Chrome
• Version: 125.0.06422.61

[thipperz]

core-mt is broken in so many ways atm - I changed to the single thread version and all problems are gone.

still sad though

[CxyJerry]

core-mt is broken in so many ways atm - I changed to the single thread version and all problems are gone.

still sad though

Can you tell me how you modified it into a single-threaded version? If possible, I hope you can give me a reference demo.

[LostBeard]

Can you tell me how you modified it into a single-threaded version?

Simply use the non-multithreaded core (core instead of core-mt)

[tauqeer-trailfive]

@CxyJerry
const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm';

[CxyJerry]

Can you tell me how you modified it into a single-threaded version?

Simply use the non-multithreaded core (core instead of core-mt)

Thank you very much for your answer but I tried changing ffmpeg wasm version from core-mt to core but still doesn't work in chrome

[CxyJerry]

@CxyJerry const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm';

Thank you very much for your answer but I tried changing ffmpeg wasm version from core-mt to core but still doesn't work in chrome

[nenge123]

it can work, but is it too slow!

Microsoft Edge
版本 127.0.2651.98 (正式版本) (64 位)
Microsoft Edge/Chromium version 127

function upload(fn,accept){
    let input = document.createElement('input');
    input.type = 'file';
    input.accept = accept;
    input.addEventListener('change',e=>fn(e.target.files));
    input.click();
}
    upload(async files=>{
        const worker = new MyWorker({url:'WorkerAppFFmpeg.js',type:'module',install:true});
        worker.methods.set('log',function(data,port){
            console.log(data.message);
        });
        worker.methods.set('wasmload',function(data,port){
            console.log(data);
        });
        worker.methods.set('progress',function(data,port){
            console.log(data);
        });
        await worker.setMethod();
        console.log(await worker.ready);
        await worker.callMethod('writeFile','0.mp4',new Uint8Array(await files[0].arrayBuffer()));
        await worker.callMethod('exec',['-i','0.mp4','a.mov'],-1);
        const file = await worker.callMethod('readFile','a.mov');
        worker.terminate();
        this.downURL(URL.createObjectURL(new Blob([file])),'a.mov');
    });

other file

other.zip

ffmpeg version 5.1.4 Copyright (c) 2000-2023 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' --extra-cxxflags='-I/opt/include -O3 -msimd128' --disable-pthreads --disable-w32threads --disable-os2threads --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
  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, mov,mp4,m4a,3gp,3g2,mj2, from '0.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf59.27.100
  Duration: 00:00:13.24, start: 0.000000, bitrate: 1965 kb/s
  Stream #0:0[0x1](und): Video: h264 (High) (avc1 / 0x31637661), yuv420p(progressive), 1440x1080, 1826 kb/s, 30 fps, 30 tbr, 15360 tbn (default)
    Metadata:
      handler_name    : VideoHandler
      vendor_id       : [0][0][0][0]
      encoder         : Lavc59.37.100 libx264
  Stream #0:1[0x2](und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 129 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
      vendor_id       : [0][0][0][0]
Stream mapping:
  Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264))
  Stream #0:1 -> #0:1 (aac (native) -> aac (native))
[libx264 @ 0xe05090] using cpu capabilities: none!
[libx264 @ 0xe05090] profile High, level 4.0, 4:2:0, 8-bit
[libx264 @ 0xe05090] 264 - core 164 - H.264/MPEG-4 AVC codec - Copyleft 2003-2022 - http://www.videolan.org/x264.html - options: cabac=1 ref=3 deblock=1:0:0 analyse=0x3:0x113 me=hex subme=7 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=-2 threads=1 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=1 b_bias=0 direct=1 weightb=1 open_gop=0 weightp=2 keyint=250 keyint_min=25 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=crf mbtree=1 crf=23.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
Output #0, mov, to 'a.mov':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf59.27.100
  Stream #0:0(und): Video: h264 (avc1 / 0x31637661), yuv420p(progressive), 1440x1080, q=2-31, 30 fps, 15360 tbn (default)
    Metadata:
      handler_name    : VideoHandler
      vendor_id       : [0][0][0][0]
      encoder         : Lavc59.37.100 libx264
    Side data:
      cpb: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: N/A
  Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
      vendor_id       : [0][0][0][0]
      encoder         : Lavc59.37.100 aac
{method: 'progress', progress: 0, time: 0}
.....
{method: 'progress', progress: 1, time: 13235374}
video:2823kB audio:209kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.525693%
[libx264 @ 0xe05090] frame I:3     Avg QP:19.69  size: 97039
[libx264 @ 0xe05090] frame P:158   Avg QP:20.51  size: 12750
[libx264 @ 0xe05090] frame B:236   Avg QP:22.09  size:  2477
[libx264 @ 0xe05090] consecutive B-frames:  5.8% 42.3%  7.6% 44.3%
[libx264 @ 0xe05090] mb I  I16..4: 31.3% 45.0% 23.8%
[libx264 @ 0xe05090] mb P  I16..4:  6.6% 10.4%  0.6%  P16..4: 19.9%  4.2%  1.6%  0.0%  0.0%    skip:56.7%
[libx264 @ 0xe05090] mb B  I16..4:  0.6%  0.8%  0.0%  B16..8: 10.5%  1.1%  0.2%  direct: 2.5%  skip:84.4%  L0:39.9% L1:55.7% BI: 4.4%
[libx264 @ 0xe05090] 8x8 transform intra:57.5% inter:76.2%
[libx264 @ 0xe05090] coded y,uvDC,uvAC intra: 26.9% 61.9% 10.8% inter: 2.8% 9.2% 0.3%
[libx264 @ 0xe05090] i16 v,h,dc,p: 25% 45%  7% 23%
[libx264 @ 0xe05090] i8 v,h,dc,ddl,ddr,vr,hd,vl,hu: 22% 31% 26%  3%  4%  4%  5%  3%  3%
[libx264 @ 0xe05090] i4 v,h,dc,ddl,ddr,vr,hd,vl,hu: 25% 28% 16%  4%  6%  6%  5%  5%  5%
[libx264 @ 0xe05090] i8c dc,h,v,p: 43% 31% 19%  8%
[libx264 @ 0xe05090] Weighted P-Frames: Y:0.0% UV:0.0%
[libx264 @ 0xe05090] ref P L0: 75.3%  8.7% 12.4%  3.6%
[libx264 @ 0xe05090] ref B L0: 91.0%  7.9%  1.0%
[libx264 @ 0xe05090] ref B L1: 98.8%  1.2%
[libx264 @ 0xe05090] kb/s:1747.24
[aac @ 0xdedca0] Qavg: 1035.761
Aborted()

[joey-slingshot]

@CxyJerry const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm';

Thank you very much for your answer but I tried changing ffmpeg wasm version from core-mt to core but still doesn't work in chrome

@CxyJerry
are you using Webpack instead of Vite? If so, you should use the umd URL

const baseURL = 'https://unpkg.com/@ffmpeg/[email protected]/dist/umd';