PC软件开发新体验！用 Blazor Hybrid 打造简洁高效的视频处理工具

标签：string 新体验缩略图 Hybrid PC var Blazor public MD5

前言

国庆假期各种活动比较多，直到上班才有时间来更新文章~

不过这两天我还是做了个小玩意（Clipify），起因是想给之前开发来自己用的简单视频剪辑工具 QuickCutSharp 加个功能，不过这个软件是基于 WinForms 开发的，做界面得拖拉控件，感觉繁琐又不灵活，于是索性重新做一个。

原有代码是C#，于是我就继续在这个生态里寻找开发方案，Avalonia、MAUI等都是不错的选择，前者我之前用过，做了个简单的图片管理工具，后者听说是微软新推出的跨平台开发方案，我这次也试了一下，不过单纯处理环境就比较复杂了，直接劝退。

接下来我就把目光瞄准了类似 Electron 这类套壳开发，既然要用前端技术开发软件界面，那么 C# 生态的 Blazor 就可以拿出来了，我之前也用 Blazor 开发过几个项目，感觉使用 Blazor 搭配 TailwindCSS 应该可以有不错的开发体验。

说干就干，我选择了 Blazor Hybrid 这个方向，然后宿主容器依然选择 WinForms，原因是暂时没有跨平台的需求，而且 Blazor Hybrid 目前也没有比较好的跨平台方案，虽然有 MAUI 但太重而且也不支持 Linux…

项目已经开源，Github: https://github.com/Deali-Axy/clipify

一些截图

老规矩前面先放一些截图，软件的功能直接看图就清楚了。

软件主页

提取音频界面

导出视频界面

PS：目前只实现了部分功能

主要技术

正如前言说到的，使用了 Blazor Hybrid 来开发，那么界面就是 Blazor 实现的，然后运行在一个 Winforms 软件的 BlazorWebView 中。

视频相关的功能是调用了 ffmpeg （实际上在没有这个软件之前，我都是手动输入命令操作的…）

Microsoft.AspNetCore.Components.WebView.WindowsForms - 微软官方的 Blazor Hybrid 方案，可以依托 WinForms 运行 Blazor
MediatR - C#版的EventBus，用于实现浏览器和WinForms的通信
xFFmpeg.NET - 用于简化 ffmpeg 的调用（实际上这个库已经停更两三年了，很多功能只能自己去实现，我甚至打算fork一个来适配新版ffmpeg）
Microsoft.Extensions.Logging - 日志组件，没啥好说的，AspNetCore项目里的常客
AntDesign - 一些组件不想自己封装（如modal和message）就用这个

前端方面依然是 pnpm、gulp、tailwindcss、flowbite、fortawesome 这些

关于 Blazor Hybrid

Electron技术大家都很熟悉了，现在连QQ都用Electron重构了，在开发了这个项目之后，我也能理解这种做法，用前端技术来写界面真的爽，只要稍微牺牲一下性能，就可以获得不错的效果，而且现在电脑的性能都已经足够了，正好给web技术上桌面提供了条件。

而 Blazor 对于 C# 开发人员的优势是不需要学习各种 JavaScript 框架就可以开发交互式的 web 应用；虽然我做过不少前端项目，React也用得比较熟了，不过 Blazor Hybrid 还有一个优势是可以直接使用 C# 调用系统功能，Blazor Hybrid 一方面是运行在浏览器中，一方面又是直接在操作系统层面运行，C# 代码可以不受浏览器沙箱的限制，直接访问系统文件、设备等（虽然本项目中还是用到了Blazor与WinForms通信，不过那不是 C# 的功能限制，而是必须用到 WinForms 的功能）。

创建 Blazor Hybrid 项目

创建一个基于 WinForms 的 Blazor Hybrid 项目很简单，首先是创建 .NetCore(.Net8) 的 WinForms 项目，然后添加 Microsoft.AspNetCore.Components.WebView.WindowsForms 依赖

接着把 BlazorWebView 组件添加到 Form 上面

然后开始写代码初始化

public partial class FormMain : Form {
  public FormMain() {
    InitializeComponent();

    var services = new ServiceCollection();
    services.AddLogging(c => {
      c.AddDebug();
      c.AddFilter("Microsoft.AspNetCore.Components.WebView", LogLevel.Trace);
    });

    services.AddAntDesign();
    services.AddMediatR(cfg => { cfg.RegisterServicesFromAssemblyContaining<FormMain>(); });
    services.AddWindowsFormsBlazorWebView();
    #if DEBUG
    services.AddBlazorWebViewDeveloperTools();
    #endif

    services.AddSingleton(this);
    services.AddScoped<IHostingEnvironment, HostingEnvironment>();
    services.AddScoped<DialogService>();
    services.AddScoped<VideoService>();

    blazorWebView1.HostPage = "wwwroot\\index.html";
    blazorWebView1.Services = services.BuildServiceProvider();
    blazorWebView1.RootComponents.Add<App>("#app");
  }
}

关键的就在于最下面的三行代码，设置主页、把服务容器绑定的 Blazor 控件上，设置根组件。

然后其他的就和普通的 Blazor 项目一样。

搭建项目基础架构

本文限于篇幅，只能简单介绍一下。

想要进一步了解的同学可以看官网的指引文档和实例项目。

不过微软官网关于这方面的文档也不是很详细，只是浅尝辄止，很多内容要靠自己摸索。

index.html

按需添加了各种 css 和 js 引用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Clipify</title>
    <base href="/"/>
    <link href="css/app.css" rel="stylesheet"/>
    <link href="css/tailwind.min.css" rel="stylesheet"/>
    <link href="lib/font-awesome/css/all.min.css" rel="stylesheet">
    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
    <link href="Clipify.Forms.styles.css" rel="stylesheet"/>
  </head>

  <body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui" data-nosnippet>
      An unhandled error has occurred.
      <a href="" class="reload">Reload</a>
      <a class="dismiss">
标签：string,新体验,缩略图,Hybrid,PC,var,Blazor,public,MD5	

From： https://www.cnblogs.com/deali/p/18455870