Async and sync fetching of the wasm failed

[nelson777]

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)

Yet Mediainfo's page claims "All analyzing is done in the browser"
How can I use Mediainfo in the browser without it ? Is there any way I can install wasm in the frontend ?
Any other info on this error that can help me ?

[buzz]

Without providing any specifics or a repo for reproduction it's really hard to help you.

Did you read the usage documentation?

[buzz]

Duplicate of #32

[nelson777]

Yes I did, but Angular if far too different from webpack. I took some time to reply because I was trying to find some documentation on how to do this, but couldn't find anything that I could use.
I found this page here: https://malcoded.com/posts/web-assembly-angular/
That shows how to integrate a wasm library in Angular. But then I won't know what would I put instead of the example's Fibonacci function.
There aren't many other details actually. I just did npm i mediainfo.js and imported it in the component like this:

        import MediaInfo from 'mediainfo.js'
        ...

	onChangeFile(fileInput: any) {
                ...
		MediaInfo({ format: 'text' }, (mediainfo) => {
			fileInput.addEventListener('change', () => this.getMetadata(mediainfo, fileInput))
		})
                ...
         } 

	getMetadata(mediainfo, fileinput) {
		const file = fileinput.files[0]
		if (file) {
			console.log('Working…');

			const getSize = () => file.size

			const readChunk = (chunkSize, offset) =>
				new Promise((resolve, reject) => {
					const reader = new FileReader()
					reader.onload = (event : any) => {
						if (event.target.error) {
							reject(event.target.error)
						}
						resolve(new Uint8Array(event.target.result))
					}
					reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
				})

			mediainfo
				.analyzeData(getSize, readChunk)
				.then((result : any) => {
					console.log(result);
				})
				.catch((error : any) => {
					console.log(`An error occured:\n${error.stack}`);
				})
		}
	}

[nelson777]

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.

[buzz]

Use a CDN if you like. If you like to use JS bundling, just make sure MediaInfoModule.wasm can be loaded as stated in the documentation. If you need to know how to do this, refer to your build system (e. g. Angular).

#32 (comment)

[nelson777]

I have opened a bounty in Stackoverflow in order to learn how to integrate Mediainfo with Angular correctly. Maybe you would like to follow the results:

https://stackoverflow.com/questions/63001079/mediainfo-js-integration-in-angular-8