Ffmpeg trying to load js core file as wasm core: expected magic word

[Christilut]

Describe the bug
fferr: wasm streaming compile failed: CompileError: WebAssembly.instantiateStreaming(): expected magic word 00 61 73 6d, found 0a 76 61 72 @+0

I'm using electron and I'm loading a custom core with webpack. The js core loads (see logs below) but when the wasm core tries to load, it seems to load the ffmpeg-core.js file instead of the ffmpeg-core.wasm file. The magic word it finds are the first 4 characters of the JS file.

To Reproduce

Ffmpeg 0.10.1
Custom core that uses less memory, nothing else. The core does work when loaded in a different project where it is simply on a public path.

This is how I load ffmpeg:

    const ffmpeg = createFFmpeg({
      corePath: require('file-loader!@/assets/ffmpeg/ffmpeg-core.js').default,
      log: true
    })

Expected behavior
Should be able to load the wasm core.

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows
• Browser [e.g. chrome, safari] Chrome, Electron 11

Additional context

log.js:15 [info] use ffmpeg.wasm v0.10.1
09:05:07.036 ffmpeg.ts:18 info: load ffmpeg-core
09:05:07.036 log.js:15 [info] load ffmpeg-core
09:05:07.036 ffmpeg.ts:18 info: loading ffmpeg-core
09:05:07.036 log.js:15 [info] loading ffmpeg-core
09:05:07.040 ffmpeg.ts:18 info: fetch http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js
09:05:07.040 log.js:15 [info] fetch http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js
09:05:07.044 ffmpeg.ts:18 info: http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js file size = 107813 bytes
09:05:07.044 log.js:15 [info] http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js file size = 107813 bytes
09:05:07.045 ffmpeg.ts:18 info: http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js blob URL = blob:http://localhost:3000/22f60f05-b453-4ccc-93b5-86ea33c3b71a
09:05:07.045 log.js:15 [info] http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js blob URL = blob:http://localhost:3000/22f60f05-b453-4ccc-93b5-86ea33c3b71a
09:05:07.045 ffmpeg.ts:18 info: fetch http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js
09:05:07.045 log.js:15 [info] fetch http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js
09:05:07.048 ffmpeg.ts:18 info: http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js file size = 107813 bytes
09:05:07.048 log.js:15 [info] http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js file size = 107813 bytes
09:05:07.049 ffmpeg.ts:18 info: http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js blob URL = blob:http://localhost:3000/48e54a2e-90a3-415d-8bf3-f00ad0d3b42e
09:05:07.049 log.js:15 [info] http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js blob URL = blob:http://localhost:3000/48e54a2e-90a3-415d-8bf3-f00ad0d3b42e
09:05:07.049 ffmpeg.ts:18 info: fetch http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js
09:05:07.049 log.js:15 [info] fetch http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js
09:05:07.054 ffmpeg.ts:18 info: http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js file size = 107813 bytes
09:05:07.054 log.js:15 [info] http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js file size = 107813 bytes
09:05:07.054 ffmpeg.ts:18 info: http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js blob URL = blob:http://localhost:3000/90fd5a04-f78e-48b5-8fcb-720adbdfa6b5
09:05:07.054 log.js:15 [info] http://localhost:3000/7e6e51a3b3b0929ab8f8414204599707.js blob URL = blob:http://localhost:3000/90fd5a04-f78e-48b5-8fcb-720adbdfa6b5
09:05:07.061 ffmpeg.ts:18 info: ffmpeg-core.js script loaded
09:05:07.061 log.js:15 [info] ffmpeg-core.js script loaded
09:05:07.071 ffmpeg.ts:18 fferr: wasm streaming compile failed: CompileError: WebAssembly.instantiateStreaming(): expected magic word 00 61 73 6d, found 0a 76 61 72 @+0
09:05:07.071 log.js:15 [fferr] wasm streaming compile failed: CompileError: WebAssembly.instantiateStreaming(): expected magic word 00 61 73 6d, found 0a 76 61 72 @+0
09:05:07.071 ffmpeg.ts:18 fferr: falling back to ArrayBuffer instantiation
09:05:07.072 log.js:15 [fferr] falling back to ArrayBuffer instantiation
09:05:07.073 ffmpeg.ts:18 fferr: failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 0a 76 61 72 @+0
09:05:07.073 log.js:15 [fferr] failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 0a 76 61 72 @+0
09:05:07.073 ffmpeg.ts:18 fferr: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 0a 76 61 72 @+0
09:05:07.074 

[hurryhuang1007]

same issue..

[hurryhuang1007]

I used copy-webpack-plugin to solve this problem. I guess the reason why using file-loader failed was changing the names of worker and wasm files.

[aggregate1166877]

I've found that, strangely, if using a custom path (i.e. not static/js/ffmpeg-core.js), I got the wrong error (the reported one, exactly). Moving things to static/js/ffmpeg-core.js gave me the correct error: I forgot to copy ffmpeg-core.wasm and ffmpeg-core.worker.js (because I took it from unpkg and didn't see the whole structure).

Ensure you have all the needed files in the right places. After that I was able to specify a custom path as needed.