feat(IAudioDevice): add IAudioDevice service

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

@@ -0,0 +1,29 @@
+@page "/audio-device"
+@inject IStringLocalizer<AudioDevices> Localizer
+
+<h3>@Localizer["AudioDeviceTitle"]</h3>
+
+<h4>@Localizer["AudioDeviceIntro"]</h4>
+
+<Pre>[Inject, NotNull]
+private IAudioDevice? AudioDeviceService { get; set; }</Pre>
+
+<DemoBlock Title="@Localizer["BaseUsageTitle"]"
+           Introduction="@Localizer["BaseUsageIntro"]"
+           Name="Normal">
+    <div class="row form-inline g-3">
+        <div class="col-12">
+            <div class="bb-actions">
+                <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>
+            </div>
+        </div>
+        <div class="col-12">
+            <Select Items="@_items" @bind-Value="_deviceId" DisplayText="Devices" ShowLabel="true"></Select>
+        </div>
+    </div>
+
+    <audio class="bb-audio d-none" controls></audio>
+</DemoBlock>
+

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

@@ -0,0 +1,74 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// AudioDevice Component
+/// </summary>
+public partial class AudioDevices : IAsyncDisposable
+{
+    [Inject, NotNull]
+    private IAudioDevice? AudioDeviceService { get; set; }
+
+    private readonly List<IMediaDeviceInfo> _devices = [];
+
+    private List<SelectedItem> _items = [];
+
+    private string? _deviceId;
+
+    private bool _isOpen = false;
+
+    private async Task OnRequestDevice()
+    {
+        var devices = await AudioDeviceService.GetDevices();
+        if (devices != null)
+        {
+            _devices.Clear();
+            _devices.AddRange(devices);
+            _items = [.. _devices.Select(i => new SelectedItem(i.DeviceId, i.Label))];
+
+            _deviceId = _items.FirstOrDefault()?.Value;
+        }
+    }
+
+    private async Task OnOpen()
+    {
+        if (!string.IsNullOrEmpty(_deviceId))
+        {
+            var constraints = new MediaTrackConstraints
+            {
+                DeviceId = _deviceId,
+                Selector = ".bb-audio"
+            };
+            _isOpen = await AudioDeviceService.Open(constraints);
+        }
+    }
+
+    private async Task OnClose()
+    {
+        _isOpen = false;
+        await AudioDeviceService.Close(".bb-audio");
+    }
+
+    private async Task DisposeAsync(bool disposing)
+    {
+        if (disposing)
+        {
+            await OnClose();
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    /// <exception cref="NotImplementedException"></exception>
+    public async ValueTask DisposeAsync()
+    {
+        await DisposeAsync(true);
+        GC.SuppressFinalize(this);
+    }
+}

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

@@ -0,0 +1,10 @@
+.bb-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem .5rem;
+}
+
+.bb-audio {
+    margin-top: 1rem;
+    width: 100%;
+}

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

@@ -6,7 +6,7 @@
 <h4>@Localizer["VideoDeviceIntro"]</h4>
 
 <Pre>[Inject, NotNull]
-private IBluetooth? BluetoothService { get; set; }</Pre>
+private IVideoDevice? VideoDeviceService { get; set; }</Pre>
 
 <DemoBlock Title="@Localizer["BaseUsageTitle"]"
            Introduction="@Localizer["BaseUsageIntro"]"

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

@@ -43,7 +43,7 @@ private async Task OnOpenVideo()
             var constraints = new MediaTrackConstraints
             {
                 DeviceId = _deviceId,
-                VideoSelector = ".bb-video"
+                Selector = ".bb-video"
             };
             _isOpen = await VideoDeviceService.Open(constraints);
         }
@@ -61,7 +61,7 @@ private async Task OnCapture()
         _previewUrl = await VideoDeviceService.GetPreviewUrl();
     }
 
-    private Task OnApply(int width, int height) => VideoDeviceService.Apply(new MediaTrackConstraints() { Width = width, Height = height });
+    private async Task OnApply(int width, int height) => await VideoDeviceService.Apply(new MediaTrackConstraints() { Width = width, Height = height });
 
     private async Task DisposeAsync(bool disposing)
     {

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1551,7 +1551,13 @@ void AddServices(DemoMenuItem item)
                 new()
                 {
                     IsNew = true,
-                    Text = Localizer["VideoDevices"],
+                    Text = Localizer["AudioDevice"],
+                    Url = "audio-device"
+                },
+                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["VideoDevice"],
                     Url = "video-device"
                 },
                 new()

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

@@ -4921,7 +4921,8 @@
     "ShieldBadge": "ShieldBadge",
     "OtpInput": "OtpInput",
     "TotpService": "ITotpService",
-    "VideoDevices": "IVideoDevice"
+    "VideoDevice": "IVideoDevice",
+    "AudioDevice": "IAudioDevice"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7128,5 +7129,14 @@
     "VideoDeviceCloseText": "Close",
     "VideoDeviceCaptureText": "Capture",
     "VideoDeviceFlipText": "Flip"
+  },
+  "BootstrapBlazor.Server.Components.Samples.AudioDevices": {
+    "AudioDeviceTitle": "IAudioDevice",
+    "AudioDeviceIntro": "Get audio equipment operation capabilities through this service",
+    "BaseUsageTitle": "Basic usage",
+    "BaseUsageIntro": "Perform different operations by calling different API methods",
+    "AudioDeviceRequestText": "List",
+    "AudioDeviceOpenText": "Record",
+    "AudioDeviceCloseText": "Stop"
   }
 }

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

@@ -4921,7 +4921,8 @@
     "ShieldBadge": "徽章组件 ShieldBadge",
     "OtpInput": "验证码输入框 OtpInput",
     "TotpService": "时间密码验证服务 ITotpService",
-    "VideoDevices": "视频设备服务 IVideoDevice"
+    "VideoDevice": "视频设备服务 IVideoDevice",
+    "AudioDevice": "音频设备服务 IAudioDevice"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7128,5 +7129,16 @@
     "VideoDeviceCloseText": "关闭设备",
     "VideoDeviceCaptureText": "截图",
     "VideoDeviceFlipText": "翻转镜头"
+  },
+  "BootstrapBlazor.Server.Components.Samples.AudioDevices": {
+    "AudioDeviceTitle": "IAudioDevice 音频设备服务",
+    "AudioDeviceIntro": "通过此服务获得音频设备操作能力",
+    "BaseUsageTitle": "基本用法",
+    "BaseUsageIntro": "通过调用不同的 api 方法进行不同操作",
+    "AudioDeviceRequestText": "枚举设备",
+    "AudioDeviceOpenText": "录音",
+    "AudioDeviceCloseText": "停止",
+    "AudioDevicePauseText": "暂停",
+    "AudioDeviceResumeText": "恢复"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -231,7 +231,8 @@
     "shield-badge": "ShieldBadges",
     "opt-input": "OtpInputs",
     "otp-service": "OtpServices",
-    "video-device": "VideoDevices"
+    "video-device": "VideoDevices",
+    "audio-device": "AudioDevices"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs

@@ -88,6 +88,7 @@ public static IServiceCollection AddBootstrapBlazor(this IServiceCollection serv
         services.TryAddScoped<IBluetooth, DefaultBluetooth>();
         services.TryAddScoped<IMediaDevices, DefaultMediaDevices>();
         services.TryAddScoped<IVideoDevice, DefaultVideoDevice>();
+        services.TryAddScoped<IAudioDevice, DefaultAudioDevice>();
         services.AddScoped<TabItemTextOptions>();
         services.AddScoped<DialogService>();
         services.AddScoped<MaskService>();

src/BootstrapBlazor/Services/MediaDevices/DefaultAudioDevice.cs

@@ -0,0 +1,34 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+class DefaultAudioDevice(IMediaDevices deviceService) : IAudioDevice
+{
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    public async Task<List<IMediaDeviceInfo>?> GetDevices()
+    {
+        var ret = new List<IMediaDeviceInfo>();
+        var devices = await deviceService.EnumerateDevices();
+        if (devices != null)
+        {
+            ret.AddRange(devices.Where(d => d.Kind == "audioinput"));
+        }
+        return ret;
+    }
+
+    public Task<bool> Open(MediaTrackConstraints constraints)
+    {
+        return deviceService.Open("audio", constraints);
+    }
+
+    public Task<bool> Close(string? selector)
+    {
+        return deviceService.Close(selector);
+    }
+}

src/BootstrapBlazor/Services/MediaDevices/DefaultMediaDevices.cs

@@ -21,16 +21,16 @@ private async Task<JSModule> LoadModule()
         return await module.InvokeAsync<List<MediaDeviceInfo>?>("enumerateDevices");
     }
 
-    public async Task<bool> Open(MediaTrackConstraints constraints)
+    public async Task<bool> Open(string type, MediaTrackConstraints constraints)
     {
         var module = await LoadModule();
-        return await module.InvokeAsync<bool>("open", constraints);
+        return await module.InvokeAsync<bool>("open", type, constraints);
     }
 
-    public async Task<bool> Close(string? videoSelector)
+    public async Task<bool> Close(string? selector)
     {
         var module = await LoadModule();
-        return await module.InvokeAsync<bool>("close", videoSelector);
+        return await module.InvokeAsync<bool>("close", selector);
     }
 
     public async Task Capture()

src/BootstrapBlazor/Services/MediaDevices/DefaultVideoDevice.cs

@@ -24,12 +24,12 @@ class DefaultVideoDevice(IMediaDevices deviceService) : IVideoDevice
 
     public Task<bool> Open(MediaTrackConstraints constraints)
     {
-        return deviceService.Open(constraints);
+        return deviceService.Open("video", constraints);
     }
 
-    public Task<bool> Close(string? videoSelector)
+    public Task<bool> Close(string? selector)
     {
-        return deviceService.Close(videoSelector);
+        return deviceService.Close(selector);
     }
 
     public Task Capture()

src/BootstrapBlazor/Services/MediaDevices/IAudioDevice.cs

@@ -0,0 +1,32 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Audio Media Device Interface
+/// </summary>
+public interface IAudioDevice
+{
+    /// <summary>
+    /// Gets the list of audio devices.
+    /// </summary>
+    /// <returns></returns>
+    Task<List<IMediaDeviceInfo>?> GetDevices();
+
+    /// <summary>
+    /// Opens the audio device with the specified constraints.
+    /// </summary>
+    /// <param name="constraints"></param>
+    /// <returns></returns>
+    Task<bool> Open(MediaTrackConstraints constraints);
+
+    /// <summary>
+    /// Close the audio device with the specified selector.
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <returns></returns>
+    Task<bool> Close(string? selector);
+}

src/BootstrapBlazor/Services/MediaDevices/IMediaDevices.cs

@@ -19,16 +19,17 @@ public interface IMediaDevices
     /// <summary>
     /// The open() method of the MediaDevices interface creates a new MediaStream object and starts capturing media from the specified device.
     /// </summary>
+    /// <param name="type">video or audio</param>
     /// <param name="constraints"></param>
     /// <returns></returns>
-    Task<bool> Open(MediaTrackConstraints constraints);
+    Task<bool> Open(string type, MediaTrackConstraints constraints);
 
     /// <summary>
     /// The close() method of the MediaDevices interface stops capturing media from the specified device and closes the MediaStream object.
     /// </summary>
-    /// <param name="videoSelector"></param>
+    /// <param name="selector"></param>
     /// <returns></returns>
-    Task<bool> Close(string? videoSelector);
+    Task<bool> Close(string? selector);
 
     /// <summary>
     /// The capture() method of the MediaDevices interface captures a still image from the specified video stream and saves it to the specified location.

src/BootstrapBlazor/Services/MediaDevices/IVideoDevice.cs

@@ -26,9 +26,9 @@ public interface IVideoDevice
     /// <summary>
     /// Close the video device with the specified selector.
     /// </summary>
-    /// <param name="videoSelector"></param>
+    /// <param name="selector"></param>
     /// <returns></returns>
-    Task<bool> Close(string? videoSelector);
+    Task<bool> Close(string? selector);
 
     /// <summary>
     /// Capture a still image from the video stream.

src/BootstrapBlazor/Services/MediaDevices/MediaTrackConstraints.cs

@@ -11,27 +11,27 @@ namespace BootstrapBlazor.Components;
 public class MediaTrackConstraints
 {
     /// <summary>
-    /// 
+    ///
     /// </summary>
     public string DeviceId { get; set; } = "";
 
     /// <summary>
-    /// 
+    ///
     /// </summary>
-    public string? VideoSelector { get; set; }
+    public string? Selector { get; set; }
 
     /// <summary>
-    /// 
+    ///
     /// </summary>
     public int? Width { get; set; }
 
     /// <summary>
-    /// 
+    ///
     /// </summary>
     public int? Height { get; set; }
 
     /// <summary>
-    /// 
+    ///
     /// </summary>
     public string? FacingMode { get; set; }
 }