Mediainfo.js integration in Angular 8

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.

153 thoughts on “Mediainfo.js integration in Angular 8”

Leave a Comment