Support ASP.NET Blazor Web Assembly Components

[mattleibow]

Description of Change

Add support for Blazor on Web Assembly.

Bugs Fixed

• [FEATURE] WebAssembly Support #1219
• [FEATURE] Support SkiaSharp as a Blazor Extension #1194

API Changes

Behavioral Changes

PR Checklist

• Has tests (if omitted, state reason in description)
• Rebased on top of main at time of PR
• Changes adhere to coding standard
• Updated documentation

Getting Started

The build for this PR has been pushed to out preview feed: https://aka.ms/skiasharp-eap/index.json

You will also need the RC 2 .NET SDK:

• Windows: https://dotnetcli.azureedge.net/dotnet/Sdk/6.0.100-rc.2.21478.37/dotnet-sdk-6.0.100-rc.2.21478.37-win-x64.exe
• macOS: https://dotnetcli.azureedge.net/dotnet/Sdk/6.0.100-rc.2.21478.37/dotnet-sdk-6.0.100-rc.2.21478.37-osx-x64.pkg

  note: macos installer says it failed to install, but it actually did just fine. You can also use the script to install to avoid issues: https://docs.microsoft.com/en-us/dotnet/core/tools/dotnet-install-script

All you need to do is install the SkiaSharp.Views.Blazor NuGet package!

<SKCanvasView PaintSurface="PaintMySurface" style="width:100px; height:100px" />

🔥

[RChrisCoble]

I'm somewhat surprised you're pushing 50 FPS with Blazor. I wasn't sure it could turn around frames that fast without AOT compilation. Pretty sweet!

[mattleibow]

@RChrisCoble I can also get 60 now that I cleaned up some stuff. But... The trick is SkiaSharp is mainly a C++ library which is pre-AOT-ed. So you don't need AOT for anything except a bunch of pinvokes and a few lines of code.

And then skia is just naturally fast. And the 60 FPS is the limit set by the browser ticker. It uses 60 FPS and I hook into it. I bet I can go faster if I used a setInterval or something.

[davidwengier]

Very excited for this! Is there a reason SKCanvasView doesn't have the same requestAnimationFrame functionality? Doesn't it work with normal 2D HTML canvases too?

[artemiusgreat]

@mattleibow Hi Matthew, this is an amazing news.
However, after downloading the sample project I can't find latest versions of referenced Nuget packages.
I'm using .NET 6 Preview 7 and VS 2022 Preview 3.1
Is there anything else I need to install or download?

[mattleibow]

@artemiusgreat you need to add the preview feed for skia: https://aka.ms/skiasharp-eap/index.json

As soon as I can get all the dotnet bits updated (#1815) I will push to nuget.org. But, don't wait on that as CI has been iffy.

[mattleibow]

From @artemiusgreat (#1815 (comment))

Does anybody have any idea why in Mac OS I'm getting this error?
The method OnAfterRenderAsync complains that there is no suitable method to override.
If I remove override from this method, it says that it hides existing method in this class.
This error seems to contradict itself, the method exists but can't be overridden.
Is it a Mono issue?
https://github.com/mattleibow/SkiaSharpBlazorWebAssembly/blob/main/SkiaSharp.Views.Blazor/SKCanvasView.razor.cs#L52

[mattleibow]

Let me have a look at this. Did you try the new VSMac preview? I wonder if there was some issue with the source gen in older IDEs. I know we had issues in the maui repo, but later versions seemed to have been much better.

[mattleibow]

You may have an older SDK. I can get it to build and run via the CLI once I installed the later SDKS.

https://dotnetcli.azureedge.net/dotnet/Sdk/6.0.100-rc.2.21478.37/dotnet-sdk-6.0.100-rc.2.21478.37-osx-x64.pkg

dotnet workload update --from-rollback-file https://aka.ms/dotnet/maui/preview.9.json --source https://aka.ms/dotnet6/nuget/index.json
dotnet workload install wasm-tools --skip-manifest-update --source https://aka.ms/dotnet6/nuget/index.json

[mattleibow]

Just tested on the very latest of IDE builds, and I get an error there. A different error, so I am checking with the IDE team. Not sure why I would get an error in the IDE and not the CLI since they are using the same commands...

my error log: https://gist.github.com/mattleibow/e2f0471a0dc644229213c8572d4535ef

[artemiusgreat]

Just tested on the very latest of IDE builds, and I get an error there. A different error, so I am checking with the IDE team. Not sure why I would get an error in the IDE and not the CLI since they are using the same commands...

my error log: https://gist.github.com/mattleibow/e2f0471a0dc644229213c8572d4535ef

I've been trying to install VS 2022 on Mac for several days but appeared to be it's not as easy as in Windows because Mac users are required to request a link to download a new VS preview. The download link is not available directly. Maybe some licensing issues or something.

Besides this, I have Visual Studio 2019, the latest SDKs, including .NET 6 Preview 7, and updated all Nuget packages including pre-releases. Nevertheless, VS isn't complaining about the latest features but about the basic override modifier.

Laptop:~ Administrator$ dotnet --list-sdks
2.1.505 [/usr/local/share/dotnet/sdk]
2.1.701 [/usr/local/share/dotnet/sdk]
3.0.100 [/usr/local/share/dotnet/sdk]
3.1.413 [/usr/local/share/dotnet/sdk]
5.0.401 [/usr/local/share/dotnet/sdk]
6.0.100-preview.7.21379.14 [/usr/local/share/dotnet/sdk]
6.0.100-rc.1.21463.6 [/usr/local/share/dotnet/sdk]

The version of the Skia is this one.

The latest CLI didn't install for some reason.

Executing commands that you sent I'm getting the error in red.

Then, failing build.

[Pinox]

Hi @mattleibow , awesome stuff. Was checking out https://github.com/microcharts-dotnet/Microcharts last week and was hoping for the day we can run microcharts with blazor as I currently use it in Xamarin Forms. I assume this request with Skia makes that now possible as Microcharts just needs (.NET Standard 2.0 SkiaSharp ) ?

[mattleibow]

Yep!

[dr-vij]

It looks fantastic!

[davidwengier]

Hello @mattleibow I don't think you saw my question so I'm obnoxiously reposting it:

Very excited for this! Is there a reason SKCanvasView doesn't have the same render loop requestAnimationFrame functionality? Doesn't it work with normal 2D HTML canvases too?

IS this in fact a subtle way to drive people to use GL stuff and I should just stop being lazy? 😛

[mattleibow]

Is there a reason SKCanvasView doesn't have the same render loop requestAnimationFrame functionality?

Nope! This is a pre-pre-preview PR. I am going to make both views do the same thing with a render loop. I was going for a canvas view is on-demand by default, but for the html/js stuff, there is no clean way to do a loop for managed code with all weird timers. So, I might as well do it right in js with the frame and then all is well.

[mattleibow]

@davidwengier all done!

I'll push another build to the preview feed as soon as it is done. Hopefully people are just making absolutely amazing blazor+wasm apps already :)

[anpin]

hi @mattleibow, I'm getting the same issue SKCanvasView.OnAfterRenderAsync(bool)': no suitable method found to override on 6.0.200-preview.22055.15on Windows. What could possibly be wrong?

Error message:

"D:\Work\Projects\SkiaSharp\source\SkiaSharpSource.Windows-net6.slnf" (Build target) (1:2) ->
       "D:\Work\Projects\SkiaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor.csproj"
       (CoreCompile target) ->
         D:\Work\Projects\SkiaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SKCanvasView.razor.cs(63,33):
       iaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor.csproj]
         D:\Work\Projects\SkiaSharp\source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SKGLView.razor.cs(70,33): erro
       r CS0115: 'SKGLView.OnAfterRenderAsync(bool)': no suitable method found to override [D:\Work\Projects\SkiaSharp\
       source\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor\SkiaSharp.Views.Blazor.csproj]

[mattleibow]

@anpin I totally missed this. Could you open a new issue for that? Often, closed issues are missed.