基于 Blazor 打造一款实时字幕

早先在录制视频的时候一直使用的是 obs-auto-subtitle 作为实时字幕展示功能。不过这个是以 OBS 插件的形式存在，不管是语言和功能上都有一定的限制。故而使用 Blazor server 实现一个。

总体思路

  • 实时字幕自然需要语音转文字的功能。考察了一些服务之后，发现同时具备有一定免费额度和有 C# SDK 两个条件的，就只有 Azure Cognitive Service 了。故而选择了它。

  • 使用 Blazor server 从服务端实时刷新页面到前端是非常简单的事情。因此，渲染一个简单的列表文本，然后通过 OBS 的 browser 组件接入画面即可。

快乐编码

有了基本的思路，我们就可以开始快乐的编码了。

简要设计

一般来说，语音转文字服务是一个与服务端进行持续交互的过程。因此需要一个对象来保持和服务端之间的沟通。我们可以设计一个ILiveCaptioningProvider来表示这种行为:

using System;
using System.Threading.Tasks;namespace Newbe.LiveCaptioning.Services
{public interface ILiveCaptioningProvider : IAsyncDisposable{Task StartAsync();void AddCallBack(Func<CaptionItem, Task> captionCallBack);}
}

为了扩展可能适配不同提供商的可能，我们同样设计一个ILiveCaptioningProviderFactory用于表现创建ILiveCaptioningProvider的行为：

namespace Newbe.LiveCaptioning.Services
{public interface ILiveCaptioningProviderFactory{ILiveCaptioningProvider Create();}
}

有了这样两个接口，在页面上只要通过ILiveCaptioningProviderFactory创建ILiveCaptioningProvider，然后不断的接收回调展示在页面上即可。

将内容展示在页面上

有了基本的项目结构和接口，便可以尝试将内容绑定到页面上。要将实时转换的内容展示到界面上需要进行一定的算法转换。

在此之前，我们需要确定一下页面展示的预期：

  • 在页面上展示至少两行文本

  • 当一句话超过一行文本的宽度时自动进行换行

  • 当一句话结束时，下一句话自动换行

例如，上面这句话进行连续阅读时，可能会出现如下效果：

https://www.newbe.pro/images/20210724-001.gif

live caption display

主要需要注意的是，在判断是要更新当前行还是进行换行，这部分逻辑需要注意进行处理。

填充实现

  • 通过 Azure SDK 提供的SpeechRecognizer对象来进行语音识别

  • 通过 Subject 将事件转换为一个简单的可观测流，简化业务回调的处理

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reactive.Linq;
using System.Reactive.Subjects;
using System.Threading.Tasks;
using Microsoft.CognitiveServices.Speech;
using Microsoft.CognitiveServices.Speech.Audio;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;namespace Newbe.LiveCaptioning.Services
{public class AzureLiveCaptioningProvider : ILiveCaptioningProvider{private readonly ILogger<AzureLiveCaptioningProvider> _logger;private readonly IOptions<LiveCaptionOptions> _options;private AudioConfig _audioConfig;private SpeechRecognizer _recognizer;private readonly List<Func<CaptionItem, Task>> _callbacks = new();private Subject<CaptionItem> _sub;public AzureLiveCaptioningProvider(ILogger<AzureLiveCaptioningProvider> logger,IOptions<LiveCaptionOptions> options){_logger = logger;_options = options;}public async Task StartAsync(){var azureProviderOptions = _options.Value.Azure;var speechConfig = SpeechConfig.FromSubscription(azureProviderOptions.Key, azureProviderOptions.Region);speechConfig.SpeechRecognitionLanguage = azureProviderOptions.Language;_audioConfig = AudioConfig.FromDefaultMicrophoneInput();_recognizer = new SpeechRecognizer(speechConfig, _audioConfig);_sub = new Subject<CaptionItem>();_sub.Select(item => Observable.FromAsync(async () =>{try{await Task.WhenAll(_callbacks.Select(f => f.Invoke(item)));}catch (Exception e){_logger.LogError(e, "failed to recognize");}})).Merge().Subscribe();_recognizer.Recognizing += (sender, args) =>{_sub.OnNext(new CaptionItem{Text = args.Result.Text,LineEnd = false});};_recognizer.Recognized += (sender, args) =>{_sub.OnNext(new CaptionItem{Text = args.Result.Text,LineEnd = true});};await _recognizer.StartContinuousRecognitionAsync();}public void AddCallBack(Func<CaptionItem, Task> captionCallBack){_callbacks.Add(captionCallBack);}public ValueTask DisposeAsync(){_recognizer?.Dispose();_audioConfig?.Dispose();_sub?.Dispose();return ValueTask.CompletedTask;}}
}

  • 实现工厂的方式非常多，这里采用 Autofac 来协助完成对象的创建

using Autofac;
using Microsoft.Extensions.Options;namespace Newbe.LiveCaptioning.Services
{public class LiveCaptioningProviderFactory : ILiveCaptioningProviderFactory{private readonly ILifetimeScope _lifetimeScope;private readonly IOptions<LiveCaptionOptions> _options;public LiveCaptioningProviderFactory(ILifetimeScope lifetimeScope,IOptions<LiveCaptionOptions> options){_lifetimeScope = lifetimeScope;_options = options;}public ILiveCaptioningProvider Create(){var liveCaptionProviderType = _options.Value.Provider;switch (liveCaptionProviderType){case LiveCaptionProviderType.Azure:var liveCaptioningProvider = _lifetimeScope.Resolve<AzureLiveCaptioningProvider>();return liveCaptioningProvider;default:throw new ProviderNotFoundException();}}}
}

  • 对页面逻辑进行填充，完成效果

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;
using Newbe.LiveCaptioning.Services;namespace Newbe.LiveCaptioning.Pages
{public partial class Index : IAsyncDisposable{[Inject] public ILiveCaptioningProviderFactory LiveCaptioningProviderFactory { get; set; }[Inject] public ILogger<Index> Logger { get; set; }private ILiveCaptioningProvider _liveCaptioningProvider;private readonly List<CaptionDisplayItem> _captionList = new();protected override async Task OnAfterRenderAsync(bool firstRender){await base.OnAfterRenderAsync(firstRender);if (firstRender){_liveCaptioningProvider = LiveCaptioningProviderFactory.Create();_liveCaptioningProvider.AddCallBack(CaptionCallBack);await _liveCaptioningProvider.StartAsync();}}private int maxCount = 20;private Task CaptionCallBack(CaptionItem arg){return InvokeAsync(() =>{Logger.LogDebug("Received: {Text}", arg.Text);var last = _captionList.FirstOrDefault();var newLine = false;var text = arg.Text;var skipPage = 0;if (arg.Text.Length > maxCount){skipPage = (int) Math.Floor(text.Length * 1.0 / maxCount);text = arg.Text[(skipPage * maxCount)..];}if (last == null || skipPage > last.TagCount){newLine = true;}if (newLine || _captionList.Count == 0){_captionList.Insert(0, new CaptionDisplayItem{Text = text,TagCount = arg.LineEnd ? -1 : skipPage});}else{_captionList[0].Text = text;if (arg.LineEnd){_captionList[0].TagCount = -1;}}if (_captionList.Count > 4){_captionList.RemoveRange(4, _captionList.Count - 4);}StateHasChanged();});}private record CaptionDisplayItem{public string Text { get; set; }public int TagCount { get; set; }}public async ValueTask DisposeAsync(){if (_liveCaptioningProvider != null){await _liveCaptioningProvider.DisposeAsync();}}}
}

通过以上核心的代码，就可以完成从识别到展示相关的内容。

下载与安装

在尝试进行源码了解之前，你可以通过以下步骤来初步体验一下项目的效果。

首先，你可以从 Release 页面下载和你操作系统对应的版本:

https://github.com/newbe36524/Newbe.LiveCaptioning/releases

release

然后，将这个软件包解压到预先创建好的文件夹。

unzip

接着，在 Azure Portal 中创建一个 Cognitive Services。

提示 1：语音转文字每个月有 5 个小时的免费额度,可以参见

https://azure.microsoft.com/pricing/details/cognitive-services/speech-services/?WT.mc_id=DX-MVP-5003606

提示 2：你可以通过这个帮助来创建一个免费的 Azure 账号，新账号包含有 12 个月的免费大礼包，参见

https://docs.microsoft.com/en-us/dynamics-nav/how-to--sign-up-for-a-microsoft-azure-subscription?WT.mc_id=DX-MVP-5003606

create service
region and key

随后，将生成好的 region 和 key 填入到 appsettings.Production.json 中。

记得同时修改 Language 选项，例如美式英语为 en-us，简体中文为 zh-cn。你可以通过以下链接来查看所有支持的语言:

https://docs.microsoft.com/azure/cognitive-services/speech-service/language-support?WT.mc_id=DX-MVP-5003606

update appsettings.Production.json

继而，启动 Newbe.LiveCaptioning.exe，你可以看到如下这样的提示信息，就说明一切已经正常。

region and key

最后，你可以使用浏览器打开http://localhost:5000，并对着你的话筒说话，这样便可以实时产生字幕了。

live caption

在 OBS 中加入字幕

首先，打开你的 OBS，并添加一个 browser 组件。

add browser

在组件的 url 中填入 http://localhost:5000，并设置一个合适的宽度和高度。

add browser

对着你的话筒话说，字幕就出来了。

https://www.newbe.pro/images/20210725-010.gif

test

辅助资料

Azure Speech to Text

可以通过以下链接在初步体验一下识别的效果：

https://azure.microsoft.com/services/cognitive-services/speech-to-text/?WT.mc_id=DX-MVP-5003606#overview

可以通过以下链接找到 C# SDK 的对接方案：

https://docs.microsoft.com/azure/cognitive-services/speech-service/get-started-speech-to-text?WT.mc_id=DX-MVP-5003606

Blazor server

可以通过以下链接来了解，如何通过服务端来推送 UI 变化到前端：

https://swimburger.net/blog/dotnet/pushing-ui-changes-from-blazor-server-to-browser-on-server-raised-events

可以通过以下链接来了解，如何在 UI 线程之外来出发 UI 变化（这不就是 winform 再现):

https://docs.microsoft.com/aspnet/core/blazor/components/rendering?view=aspnetcore-5.0&WT.mc_id=DX-MVP-5003606#receiving-a-call-from-something-external-to-the-blazor-rendering-and-event-handling-system

.Net core publish

通过这里了解如何将 dotnet core 程序发布为一个单文件应用

https://docs.microsoft.com/dotnet/core/deploying/single-file?WT.mc_id=DX-MVP-5003606

了解不同操作系统下发布使用的 RID

https://docs.microsoft.com/dotnet/core/rid-catalog?WT.mc_id=DX-MVP-5003606

Github

了解如何通过 github action 打包发布内容到 release 中:

https://github.com/gittools/gitreleasemanager

小结

这是一个非常简单的项目应用，开发者可以通过该项目初步的了解 Blazor 的使用方法。你可以通过以下地址来获取本项目的源代码：

https://github.com/newbe36524/Newbe.LiveCaptioning

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/300228.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一个数学系毕业的物理学家，是怎么拿到诺贝尔化学奖的？

一个数学系毕业的物理学家，是怎么拿到诺贝尔化学奖的？

全世界只有3.14 % 的人关注了青少年数学之旅2019年10月9日&#xff0c;这个“特别好”教授&#xff0c;1940年&#xff0c;“特别好”考上了耶鲁&#xff0c;1943年&#xff0c;“特别好”终于拿到数学学士学位。“特别好”特别沮丧&#xff0c;▲ “特别好”在牛津大学&#x…
阅读更多...
杀鸡焉用牛刀！放下Windbg，让dotnet-stack来快速定位死锁原因

杀鸡焉用牛刀！放下Windbg，让dotnet-stack来快速定位死锁原因

我们用来分析CPU过高、死锁问题的常见方案是使用Windbg分析dump文件。但是这种方式存在一些缺点&#xff0c;比如dump文件过大难以下载&#xff0c;windbg使用过于复杂难以掌握等。这里介绍一个小工具dotnet-stack&#xff0c;帮助我们检查托管代码调用堆栈&#xff0c;快速定位…
阅读更多...
数学中那些非常奇葩的证明

数学中那些非常奇葩的证明

全世界只有3.14 % 的人关注了青少年数学之旅一、费马大定理证明证&#xff1a;是无理数假设是有理数&#xff0c;p和q是互素正整数那么移项得又由费马大定理可知&#xff1a;与费马大定理(Fermats last therorem)矛盾, Q.E.D. &#xff08;也可易证2的n分之一次方且n属于大于2的…
阅读更多...
使用 Minimal API 改造动态文件提供者

使用 Minimal API 改造动态文件提供者

使用 Minimal API 改造动态文件提供者Intro之前介绍过一个基于动态文件提供者来实现静态网站的动态更新&#xff0c;可以参考 ASP.NET Core 实现一个简单的静态网站滚动更新&#xff0c;在 Minimal API 出现之后想改造成 Minimal API 的写法&#xff0c;但是由于之前版本的 Min…
阅读更多...
[导入]体验Asp.Net Mvc Preview5(3)-探索ModelBinder的工作原理

[导入]体验Asp.Net Mvc Preview5(3)-探索ModelBinder的工作原理

摘要: 在前面的两篇文章中,我们研究了Asp.Net Mvc Preview5的ViewEingine的改进,从本篇开始,我们开始研究Preview5中的新特性:ModelBinder,首先我们来了解下什么是ModelBinder特性,这有什么用处,在以前的版本中,如果我们要在Action中获取数据,一般有三种方式,一是通过Action的参…
阅读更多...
复盘：我的三个月远程办公实践，有自由，也有代价

复盘：我的三个月远程办公实践，有自由，也有代价

这是头哥侃码的第244篇原创有人说&#xff0c;人生就是一个不断尝试的过程。我觉得&#xff0c;有时候这个词其实不准确&#xff0c;因为每个人的性格不同&#xff0c;成长经历及运势不同&#xff0c;所以对 “尝试” 俩字的理解也就不同。在我还是孩子的时候&#xff0c;几乎所…
阅读更多...
Silverlight专题（10）- WatermarkedTextBox使用

Silverlight专题（10）- WatermarkedTextBox使用

问题&#xff1a; 之前的Silverlight版本都有一个WatermarkedTextBox控件 但是到了Silverlight 2 Beta2版本&#xff0c;由于和WPF兼容的考虑 WatermarkedTextBox被移除了 虽然之前我有看到消息说Silverlight 2正式Release的时候会给TextBox一个Watermark属性 但是Silverlight …
阅读更多...
90后一代人还能通过攒钱改变现状吗？

90后一代人还能通过攒钱改变现状吗？

全世界只有3.14 % 的人关注了青少年数学之旅每次打开公号&#xff0c;扑面而来一阵阵焦虑&#xff1a;95后毕业3个月就买房&#xff0c;你的同龄人正在抛弃你毕业3年&#xff0c;年薪超100万&#xff1a;赚钱&#xff0c;是一种修行一线城市财务自由门槛2.9亿&#xff0c;看看你…
阅读更多...
从高德侯军到《李嘉诚：商者无域》

从高德侯军到《李嘉诚：商者无域》

从高德侯军到《李嘉诚&#xff1a;商者无域》 【编者按】转载这篇文章是因为看到了业内著名企业高德董事长侯军跻身2008胡润排行榜&#xff0c;让人不禁联想起高德在业内一贯的潜行风格&#xff0c;而侯军先生也颇有点“忍者神龟”的隐喻&#xff0c;在业内企业家当中属闷声发大…
阅读更多...
测试龙芯 LoongArch .NET之 使用 FastTunnel 做内网穿透远程计算机

测试龙芯 LoongArch .NET之 使用 FastTunnel 做内网穿透远程计算机

龙芯3A5000 已经上市&#xff0c;从老伙计哪里搞来一台3A5000 机器&#xff0c;安装统信UOS。使用体验上看还可以&#xff0c;就是软件生态急需建设&#xff0c;软件生态的建设上自然有我dotnet 的一份力量。龙芯团队已经完成了LoongArch 的.NET Core 3.1版本的研发&#xff0c…
阅读更多...
利用jquery给指定的table动态添加一行、删除一行

利用jquery给指定的table动态添加一行、删除一行

今天在项目中&#xff0c;刚好用到给指定的table添加一行、删除一行&#xff0c;就直接找google&#xff0c;搜出来的东西不尽如人意&#xff0c;不是功能不好就是千篇一律&#xff0c;简直浪费时间还不讨好&#xff0c;于是乎就自己动手封装个&#xff0c;现就把代码分享出来&…
阅读更多...
求求你把输入法调小一点... | 今日最佳

求求你把输入法调小一点... | 今日最佳

全世界只有3.14 % 的人关注了青少年数学之旅
阅读更多...
linux安装卷管理,Linux安装管理ISCSI卷（initiator端）

linux安装卷管理,Linux安装管理ISCSI卷（initiator端）

Internet SCSI(iSCSI)是一种网络协议&#xff0c;使用TCP/IP网络来传输SCSI协议。它是代替FC(Fibre Channel-based&#xff0c;光纤通道&#xff1f;) SAN的很好选Internet SCSI(iSCSI)是一种网络协议&#xff0c;使用TCP/IP网络来传输SCSI协议。它是代替FC(Fibre Channel-base…
阅读更多...
Blazor 事件处理开发指南

Blazor 事件处理开发指南

翻译自 Waqas Anwar 2021年3月25日的文章 《A Developer’s Guide To Blazor Event Handling》 [1]如果您正在开发交互式 Web 应用程序&#xff0c;根据不同的应用程序事件和用户操作动态更新用户界面是十分常见的做法。这些操作会触发事件&#xff0c;而作为开发人员&#xff…
阅读更多...
android 开源组件合集-UI篇(2013-11-07更新)

android 开源组件合集-UI篇(2013-11-07更新)

其实也算不上合集,只是将我经常用到的部分整理一下,如果您有好东西,也可以留言补充 1.actionbar http://actionbarsherlock.com/ https://github.com/JakeWharton/ActionBarSherlock (推荐) 2.下拉刷新pulltorefresh https://github.com/chrisbanes/Android-PullToRefresh 支持…
阅读更多...
改变世界的5大常数，学过数学的人，这一辈子都不会忘记！

改变世界的5大常数，学过数学的人，这一辈子都不会忘记！

全世界只有3.14 % 的人关注了青少年数学之旅何谓数学&#xff1f;数学家Eduardo曾这样回答“数学是永恒&#xff0c;是真理&#xff0c;是一切的答案。”回首往昔数学始终伴随我们左右纵横交错的几何、繁琐复杂的运算难以求解的方程、无从下手的猜想......尽管在数学道路上有多…
阅读更多...
创维linux进入工厂模式,创维电视怎么进入工厂模式？

创维linux进入工厂模式,创维电视怎么进入工厂模式？

满意答案zrwemshwt54推荐于 2019.11.03创维彩电进入与退出工厂模式方法的汇总一&#xff0e; D系列5D01机芯&#xff1a;进入&#xff1a;在遥控器屏显键的正下方&#xff0c;加装一个按键(SERVICE键)&#xff0c;按该键即可进入工厂模式。退出&#xff1a; 按遥控器上的TV/AV键…
阅读更多...
收到在微软商店购买的商品

收到在微软商店购买的商品

今天收到了在微软商店购买的商品&#xff0c;送货速度真快&#xff0c;20号下的订单&#xff0c;今天就拿到了&#xff0c;这么快就从美国通过UPS快递到国内&#xff0c;现在的物流越来越发达了。我购买的商品是&#xff1a;1、WM USB Powered Speakers(USB扬声器)2、LifeCam V…
阅读更多...
[导入]纹理拼接后的Wrap寻址

[导入]纹理拼接后的Wrap寻址

拼接后的纹理:正常的草地(不进行WRAP寻址):文章来源:http://blog.csdn.net/xoyojank/archive/2008/11/03/3212425.aspx转载于:https://www.cnblogs.com/xoyojank/archive/2008/11/04/1343671.html
阅读更多...
自定义EventSource（一）EventCounter

自定义EventSource（一）EventCounter

之前的Counters都是系统内置的&#xff0c;我们只需在进程外&#xff0c;或进程内采集&#xff0c;然后交给专门的展示指标工具即可。本篇说一下自定义EventSource&#xff0c;来采集自己业务中&#xff0c;或自己产品中的指标收集方式。自定义EventSource是以EventCounters作为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023