Ionic 4 WebAssembly is not defined with OpenCV on an older phone

I am trying to develop a simple image processing mobile application using the Ionic Framework (version 4). I decided to use the OpenCV.js library and the way I am adding it to my ionic project is:

  1. I put the opencv.js file in app/assets/lib/opencv.js

  2. I added

 "scripts": [
          "src/assets/lib/opencv.js"
        ]

in my angular.json file.

  1. I put declare var cv: any; on top of any ts file that I needed to use the opencv library in and then I just use cv to reference an opencv.js function like for example cv.imread(image) .

My application works well in the browser, as well as on some test devices (I’ve tried Galaxy Note 10 , Galaxy S8 , Galaxy S6 ). However, when I try to run the application on a Samsung Galaxy S5 , the app shows an error on the console upon startup:

Uncaught ReferenceError: WebAssembly is not defined

and then, when I click a button that calls anything related to openCV I get the following message:

ERROR Error: Uncaught (in promise): ReferenceError: cv is not defined

And of couse the openCV functinality does not work. I realize it must be something related to the phone being pretty old, but I would like to know exactly the reason why it works on other phones but does not on this one. And maybe, if it is possible, it would be great to find out what can be done to make it work on this and other phones like this.

It is a Samsung Galaxy S5 with Android 5.0 .

Also I do not really understand why WebAssembly is required in this particular case. I thought the opencv.js file that I downloaded from here https://docs.opencv.org/master/opencv.js was just a JS file that contains the necessary functions (like a lib). How does webassembly come into play here?

1 Like

If u inspect the opencv code u will see it has wasm code embedded

Hey thanks. Ok, so I see two potential solutions:

  1. find a way to run WebAssembly in WebView on older phones
  2. find a non-WebAssembly version of the used library

As for point 2, I actually found the openCv.js library without embedded wasm code, it was slightly bigger (11,5mb vs 7.5mb in the wasm version). I included it in my ionic project and the project took ages to build (literally around 25 minutes, vs a regular build time of 2 minutes). After it built it did not work either. And it would just freeze completely. Do you have any idea why that is? aybe it’s due to minification of the js code or sth? Can I disable it for just one file? What could be other reasons?

As for point 1, I blame the old WebView for not supporting wasm. Is there any way I can use some plugin for ionic 4 cordova to actually make it work? :slight_smile: For older ionic version I read up about some WKWebView plugins or even the Crosswalk plugin, but I am not sure if it still makes sense in the new Ionic / Cordova

Can you please share some insights with this?
Thanks

Hi

I have no experience with OpenCV so cannot tell what is happening if you use other libs.

As to the webview, you may want to try downgrading, but I think it may become a disappointing experience, knowing that some aspects of angular and/or ionic (such as webcomponents) may not function properly anymore.

Next to some other issues around security and all the efforts trying to get it done at all.

Don’t have the details, but there have been in past some posts around this.

You may want to carefully review the available OS of your users to see if it it is worth the effort.