Search code examples
typescriptopencvionic-frameworkelectroncapacitor

How to use opencv.js in capacitor's electron build ? ReferenceError: cv is not defined


I'm facing an issue with opencv.js with my ionic capacitor app.

I put my opencv.js into src/assets/lib/opencv.js and I declare it like that in my ts file: declare var cv: any and in my main index.html I symply do <script src="./assets/lib/opencv.js"></script>

It work well when i'm using ionic serve but when I'm running an npx cap open electron it doesn't work because of ReferenceError: cv is not defined

I tried to use typescript way to import the file like import "./assets/lib/opencv.js" or import * as cv from "./assetS/lib/opencv.js" but it doesn't work at all. Maybe I missing something with that way to import my file.

Do you have, please, some idea or things to try ?

Many thanks in advance.

Edit : I found the solution.

  • Remove html import from index.html
  • Add import cv 'import cv from './../../assets/lib/opencv.js' in your ts file
  • Add async tag to your action button (mine was min rect method)

If you get error with "crypto" , "fs" , etc ... add :

"browser": {
    "fs": false,
    "crypto": false,
    ...
  }

Solution

  • I found the solution.

    • Remove html import from index.html
    • Add import cv 'import cv from './../../assets/lib/opencv.js' in your ts file
    • Add async tag to your action button (mine was min rect method)

    If you get error with "crypto" , "fs" , etc ... add :

    "browser": {
        "fs": false,
        "crypto": false,
        ...
      }