Could there be a loading progress callback of the wasm file downloading

[milkliker]

Hi there,

Since the wasm file to a large file to download from the remote address, I want to add a progress bar to let user know how this goes go, instead of waiting without any idea.

Could that be possible?

[rikschennink]

Would definitely be nice. I've tried to use XMLHttpRequest to load, show progress, and cache the wasm file but that doesn't work, probably because internally the wasm file is streamed with WebAssembly.instantiateStreaming

A progress hook would be great, found some info on how to do that here:
https://stackoverflow.com/questions/65491241/get-webassembly-instantiatestreaming-progress

I'd submit a PR but at this point I'm far from comfortable enough with ffmpeg and web assembly itself to confidently contribute.

[milkliker]

I make a pull request of adding the path of all the 3 files into options.
#429

And now, we may download or cache all the 3 files (ffmpeg-core.js, ffmpeg-core.worker.js, ffmpeg-core.wasm), which with progress be shown. Then, load as blob url, and pass into as options like:

let corePath, workerPath, wasmPath;

// dowload with progress and set path as blob url

const ffmpeg = createFFmpeg({
   corePath, workerPath, wasmPath
})

[ghnp5]

Hey. Any luck with adding a progress to the download of the wasm file?

[nenge123]

Hey. Any luck with adding a progress to the download of the wasm file?

import Module from 'https://unpkg.com/@ffmpeg/[email protected]/dist/esm/ffmpeg-core.js';
const response = await fetch('https://unpkg.com/@ffmpeg/[email protected]/dist/esm/ffmpeg-core.wasm');
if(!response||!response.body){
    throw 'net error';
}
const total = parseInt(response.headers.get('content-length')||0);
const reader  = response.body.getReader();
const chunk = [];
let loaded = 0;
while(true){
    const { done, value } = await reader.read();
    if(done){
        break;
    }
    loaded += value.byteLength;
    self.postMessage({method:'wasmload',loaded,total,speed:value.byteLength});
    chunk.push(value);
}
const wasmBinary =  await (new Blob(chunk)).arrayBuffer();
const ffmpeg = await Module({wasmBinary});
await ffmpeg.ready;

other.zip

[ghnp5]

Sorry - I had already figured it out! This package provides a way to do it, as long as the wasm file returns a Content-Length, which is the case if I host it locally :) Thank you very much!

[nenge123]

Sorry - I had already figured it out! This package provides a way to do it, as long as the wasm file returns a Content-Length, which is the case if I host it locally :) Thank you very much!

cdn Binary file no Content-Length return