I'm trying to use Mediainfo.js to get some video info on the frontend of an Angular 8 project. But I'm getting the errors below:
GET https://192.168.25.177:4200/MediaInfoModule.wasm 404 (Not Found)
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': HTTP status code is not ok
falling back to ArrayBuffer instantiation
GET https://192.168.25.177:4200/MediaInfoModule.wasm 404 (Not Found)
bothg async and sync fetching of the wasm failed
failed to asynchronously prepare wasm: RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.
ERROR Error: Uncaught (in promise): RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
RuntimeError: abort(RuntimeError: abort(both async and sync fetching of the wasm failed). Build with -s ASSERTIONS=1 for more info.). Build with -s ASSERTIONS=1 for more info.
at abort (vendor.js:131481)
at vendor.js:131481
at ZoneDelegate.invoke (polyfills.js:3709)
at Object.onInvoke (vendor.js:82905)
at ZoneDelegate.invoke (polyfills.js:3708)
at Zone.run (polyfills.js:3474)
at polyfills.js:4205
at ZoneDelegate.invokeTask (polyfills.js:3741)
at Object.onInvokeTask (vendor.js:82886)
at ZoneDelegate.invokeTask (polyfills.js:3740)
at resolvePromise (polyfills.js:4147)
at polyfills.js:4212
at ZoneDelegate.invokeTask (polyfills.js:3741)
at Object.onInvokeTask (vendor.js:82886)
at ZoneDelegate.invokeTask (polyfills.js:3740)
at Zone.runTask (polyfills.js:3518)
at drainMicroTaskQueue (polyfills.js:3909)
I tried to install wasm package, but it returned lots of V8 related errors. And in it's npm page says it's Node only (https://www.npmjs.com/package/wasm)
I also checked the Webpack example (https://github.com/buzz/mediainfo.js/blob/50830088bd775942a3962416ce61f759b13bc7c2/webpack.config.js#L34) But it's far too different from Angular's configuration. I also found this page that shows how to use an wasm module in Angular, but I ain't got a clue on what would I put instead of the example's fibonacci function.
Yet Mediainfo's page claims "All analyzing is done in the browser", so it should be possible.
How can I integrate Mediainfo into Angular 8 ? Any other info on this error that can help me ?
Also if anyone knows how to install wasm in the frontend, it would be helpful in order for me to continue to try the integration.
Edit
I made it work, but in a very clumsy way. I imported the CDN into index.html and put
declare let MediaInfo: any ;
in the component.
There has to be a better way than that.
Also in my production environment I get these messages in the console which don't appear locally:
DevTools failed to load SourceMap: Could not parse content for https://assiste.estaleiro.serpro.gov.br/assets/js/mediainfo.min.js.map: Unexpected token < in JSON at position 0
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
falling back to ArrayBuffer instantiation
What I need is the correct integration with Angular. How do I integrate this using
import MediaInfo from 'mediainfo.js'
Maybe I should put some configuration in app-module or something. I just don't know where to start.
The problem is that mediainfo will try to load the MediaInfoModule.wasm file from the root directory: http://localhost:4200/MediaInfoModule.wasm.
So you just need to make sure that this file is reachable.
Step #1
Copy the node_modules/mediainfo.js/dist/MediaInfoModule.wasm to your project's src directory,
Step #2
Modify the angular.json file to add that file to the assets section, in the options of build target
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
"assets": [
"src/assets",
"src/favicon.ico",
"src/MediaInfoModule.wasm"
],
"styles": [
Step #3
Restart ng serve