feat(IVideoDevice): add GetData method (#5967)

* feat: 增加 GetData 方法

* refactor: 增加 getAudioData 方法

* doc: 增加下载按钮

* refactor: 更新实现逻辑

* test: 更新单元测试

* doc: 更新示例

* doc: 更新示例文档

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/AudioDevices.razor

@@ -17,6 +17,7 @@ private IAudioDevice? AudioDeviceService { get; set; }</Pre>
                 <Button Text="@Localizer["AudioDeviceRequestText"]" Icon="fa-solid fa-microphone" OnClick="OnRequestDevice"></Button>
                 <Button Text="@Localizer["AudioDeviceOpenText"]" Icon="fa-solid fa-play" OnClick="OnOpen" IsDisabled="_isOpen || string.IsNullOrEmpty(_deviceId)"></Button>
                 <Button Text="@Localizer["AudioDeviceCloseText"]" Icon="fa-solid fa-stop" OnClick="OnClose" IsDisabled="!_isOpen"></Button>
+                <Button Text="@Localizer["AudioDeviceDownloadText"]" Icon="fa-solid fa-download" OnClick="OnDownload" IsDisabled="!_isDownload"></Button>
             </div>
         </div>
         <div class="col-12">

src/BootstrapBlazor.Server/Components/Samples/AudioDevices.razor.cs

@@ -13,6 +13,9 @@ public partial class AudioDevices : IAsyncDisposable
     [Inject, NotNull]
     private IAudioDevice? AudioDeviceService { get; set; }
 
+    [Inject, NotNull]
+    private DownloadService? DownloadService { get; set; }
+
     private readonly List<IMediaDeviceInfo> _devices = [];
 
     private List<SelectedItem> _items = [];
@@ -21,6 +24,8 @@ public partial class AudioDevices : IAsyncDisposable
 
     private bool _isOpen = false;
 
+    private bool _isDownload = false;
+
     private async Task OnRequestDevice()
     {
         var devices = await AudioDeviceService.GetDevices();
@@ -49,8 +54,18 @@ private async Task OnOpen()
 
     private async Task OnClose()
     {
-        _isOpen = false;
         await AudioDeviceService.Close(".bb-audio");
+        _isOpen = false;
+        _isDownload = true;
+    }
+
+    private async Task OnDownload()
+    {
+        var stream = await AudioDeviceService.GetData();
+        if (stream != null)
+        {
+            await DownloadService.DownloadFromStreamAsync($"data_{DateTime.Now:HHmmss}.wav", stream);
+        }
     }
 
     private async Task DisposeAsync(bool disposing)

src/BootstrapBlazor.Server/Components/Samples/VideoDevices.razor.cs

@@ -69,7 +69,7 @@ private async Task OnDownload()
         var stream = await VideoDeviceService.GetPreviewData();
         if (stream != null)
         {
-            await DownloadService.DownloadFromStreamAsync("preview.png", stream);
+            await DownloadService.DownloadFromStreamAsync($"preview_{DateTime.Now:HHmmss}.png", stream);
         }
     }
 

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -7137,6 +7137,9 @@
     "BaseUsageIntro": "Perform different operations by calling different API methods",
     "AudioDeviceRequestText": "List",
     "AudioDeviceOpenText": "Record",
-    "AudioDeviceCloseText": "Stop"
+    "AudioDeviceCloseText": "Stop",
+    "AudioDevicePauseText": "Pause",
+    "AudioDeviceResumeText": "Resume",
+    "AudioDeviceDownloadText": "Download"
   }
 }

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -7139,6 +7139,7 @@
     "AudioDeviceOpenText": "录音",
     "AudioDeviceCloseText": "停止",
     "AudioDevicePauseText": "暂停",
-    "AudioDeviceResumeText": "恢复"
+    "AudioDeviceResumeText": "恢复",
+    "AudioDeviceDownloadText": "下载"
   }
 }

src/BootstrapBlazor/Services/MediaDevices/DefaultAudioDevice.cs

@@ -31,4 +31,9 @@ public Task<bool> Close(string? selector)
     {
         return deviceService.Close(selector);
     }
+
+    public Task<Stream?> GetData()
+    {
+        return deviceService.GetAudioData();
+    }
 }

src/BootstrapBlazor/Services/MediaDevices/DefaultMediaDevices.cs

@@ -62,4 +62,16 @@ public async Task<bool> Apply(MediaTrackConstraints constraints)
         var module = await LoadModule();
         return await module.InvokeAsync<bool>("apply", constraints);
     }
+
+    public async Task<Stream?> GetAudioData()
+    {
+        Stream? ret = null;
+        var module = await LoadModule();
+        var stream = await module.InvokeAsync<IJSStreamReference?>("getAudioData");
+        if (stream != null)
+        {
+            ret = await stream.OpenReadStreamAsync(stream.Length);
+        }
+        return ret;
+    }
 }

src/BootstrapBlazor/Services/MediaDevices/IAudioDevice.cs

@@ -29,4 +29,10 @@ public interface IAudioDevice
     /// <param name="selector"></param>
     /// <returns></returns>
     Task<bool> Close(string? selector);
+
+    /// <summary>
+    /// Gets the stream of the audio.
+    /// </summary>
+    /// <returns></returns>
+    Task<Stream?> GetData();
 }

src/BootstrapBlazor/Services/MediaDevices/IMediaDevices.cs

@@ -55,4 +55,10 @@ public interface IMediaDevices
     /// <param name="constraints"></param>
     /// <returns></returns>
     Task<bool> Apply(MediaTrackConstraints constraints);
+
+    /// <summary>
+    /// Gets the stream of the audio.
+    /// </summary>
+    /// <returns></returns>
+    Task<Stream?> GetAudioData();
 }

src/BootstrapBlazor/wwwroot/modules/media.js

@@ -202,6 +202,7 @@ export async function record(options) {
                         audio.classList.remove("d-none");
                         audio.classList.remove("hidden");
                         audio.removeAttribute("hidden");
+                        media.audioBlob = blob;
                     }
                 }
                 delete media.audioSelector;
@@ -233,3 +234,8 @@ export function stop(selector) {
     }
     return ret;
 }
+
+export function getAudioData() {
+    const media = registerBootstrapBlazorModule("MediaDevices");
+    return media.audioBlob
+}