'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 1:^[1]

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>

Solution 2:^[2]

Yes it is feasible Refer below Proj file

    <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <WasmBuildNative>true</WasmBuildNative>
    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <RunAOTCompilation>True</RunAOTCompilation>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
    <RunAOTCompilation>True</RunAOTCompilation>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.1" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.1" PrivateAssets="all" />
    <PackageReference Include="OpenCvSharp4" Version="4.5.5.20211231" />
    <PackageReference Include="OpenCvSharp4.runtime.wasm" Version="4.5.5.20211231" />
  </ItemGroup>

</Project>

Check out the Sample code

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Diego Vega
Solution 2	Anuj Divkar

'Is OpenCV with Blazor WASM in .NET6 feasible?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]