大家好，我是本期的实验室研究员——俞坤。明天我将通过试验和残缺的操作过程，向大家介绍如何基于 Blazor 打造一个能针对语音和视频中的声音，主动生成实时字幕的字幕零碎。接下来就让咱们一起到实验室中一探到底吧！
微软MVP实验室研究员
思路浅析很多童鞋可能接触过相似的技术，例如咱们在录制视频时，能够应用 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，而后一直的接管回调展现在页面上即可。
二、将内容展现在页面上有了根本的我的项目构造和接口，便能够尝试将内容绑定到页面上。要将实时转换的内容展现到界面上须要进行肯定的算法转换。
在此之前，咱们须要确定一下页面展现的预期：
在页面上展现至多两行文本当一句话超过一行文本的宽度时主动进行换行当一句话完结时，下一句话主动换行例如，下面这句话进行间断浏览时，可能会呈现如下成果：
次要须要留神的是，在判断是要更新以后行还是进行换行，这部分逻辑须要留神进行解决。
三、填充事实通过 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(); } } }}通过以上外围代码，即可实现从辨认到展现相干的内容。
...