Search code examples
opencvblazorwebassembly

Is OpenCV with Blazor WASM in .NET6 feasible?


I'd like to process images on clientside with Blazor WASM and OpenCV. I can run OpenCV with the OpenCVSharp4 NuGet Package serverside, but that wont cut it. If I try to let it run on the Client I get:

Unhandled Exception: System.TypeInitializationException: The type initializer for 'OpenCvSharp.Internal.NativeMethods' threw an exception. ---> System.DllNotFoundException: OpenCvSharpExtern

Another try I gave it was to use the opencv.js, but if I try to load it with <script src="opencv.js" async></script> but it fails with

Error: Failed to start platform. Reason: TypeError: Module._malloc is not a function at St (blazor.webassembly.js:1)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'apply') at Module.stackSave (_framework/dotnet.6.0.0.tj42mwroj7.js:1) at ccall (_framework/dotnet.6.0.0.tj42mwroj7.js:1) at Object.wasm_setenv (_framework/dotnet.6.0.0.tj42mwroj7.js:1) at Object.mono_wasm_setenv (_framework/dotnet.6.0.0.tj42mwroj7.js:1) at blazor.webassembly.js:1 at callRuntimeCallbacks (opencv.js:30) at postRun (opencv.js:30) at doRun (opencv.js:30) at run (opencv.js:30) at runCaller (opencv.js:30)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'apply') at Object.Module._malloc (_framework/dotnet.6.0.0.tj42mwroj7.js:1) at Object.mono_wasm_load_bytes_into_heap (_framework/dotnet.6.0.0.tj42mwroj7.js:1) at blazor.webassembly.js:1

I thought about the use of Native Dependencies with the .NET6 but I cant get it to work either. Is there anything essential I am missing?


Solution

  • Use opencv-3.4.7.js higher versions didn't work for me. And also load the opencv.js file before loading blazor wasm.

    <body>
        <div id="app">Loading...</div>
    
        <script src="/lib/opencv-3.4.7.js"></script>
        <script src="_framework/blazor.webassembly.js"></script>
        <script src="_content/MudBlazor/MudBlazor.min.js"></script>
        <script>navigator.serviceWorker.register('service-worker.js');</script>
    </body>