feat(IVideoDevice): add IVideoDevice service

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

@@ -0,0 +1,42 @@
+@page "/media-device"
+@inject IStringLocalizer<MediaDevice> Localizer
+
+<h3>@Localizer["MediaDeviceTitle"]</h3>
+
+<h4>@Localizer["MediaDeviceIntro"]</h4>
+
+<p>@((MarkupString)Localizer["MediaDeviceDescription"].Value)</p>
+
+<Pre>[Inject, NotNull]
+    private IBluetooth? BluetoothService { get; set; }</Pre>
+
+<Tips>
+    <ul class="ul-demo">
+        <li>@((MarkupString)Localizer["MediaDeviceTipsLi1"].Value)</li>
+        <li>@((MarkupString)Localizer["MediaDeviceTipsLi2"].Value)</li>
+    </ul>
+    <div>@((MarkupString)Localizer["MediaDeviceTipsTitle"].Value)</div>
+</Tips>
+
+<DemoBlock Title="@Localizer["BaseUsageTitle"]"
+           Introduction="@Localizer["BaseUsageIntro"]"
+           Name="Normal">
+    <section ignore>
+        @Localizer["UsageDesc"]
+    </section>
+    <div class="row form-inline g-3">
+        <div class="col-12">
+            <Button Text="@Localizer["MediaDeviceRequestText"]" Icon="fa-solid fa-photo-film" OnClick="OnRequestDevice"></Button>
+            <Button Text="@Localizer["MediaDeviceOpenText"]" Icon="fa-solid fa-play" OnClick="OnOpenVideo"></Button>
+            <Button Text="@Localizer["MediaDeviceCloseText"]" Icon="fa-solid fa-stop" OnClick="OnCloseVideo"></Button>
+            <Button Text="@Localizer["MediaDeviceCaptureText"]" Icon="fa-solid fa-camera" OnClick="OnCapture"></Button>
+        </div>
+    </div>
+
+    <Select Items="@_items" @bind-Value="_deviceId"></Select>
+
+    <video class="bb-video" muted playsinline autoplay style="height: auto; width: auto;"></video>
+
+    <canvas class="b-video-image"></canvas>
+</DemoBlock>
+

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

@@ -0,0 +1,54 @@
+// 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>
+/// 
+/// </summary>
+public partial class MediaDevice
+{
+    [Inject, NotNull]
+    private IMediaVideo? VideoDeviceService { get; set; }
+
+    private readonly List<IMediaDeviceInfo> _devices = [];
+
+    private List<SelectedItem> _items = [];
+
+    private string? _deviceId;
+
+    private async Task OnRequestDevice()
+    {
+        var devices = await VideoDeviceService.GetDevices();
+        if (devices != null)
+        {
+            _devices.AddRange(devices);
+            _items = [.. _devices.Select(i => new SelectedItem(i.DeviceId, i.Label))];
+        }
+    }
+
+    private async Task OnOpenVideo()
+    {
+        if (!string.IsNullOrEmpty(_deviceId))
+        {
+            var constraints = new MediaTrackConstraints
+            {
+                DeviceId = _deviceId,
+                VideoSelector = ".bb-video"
+            };
+            await VideoDeviceService.Open(constraints);
+        }
+    }
+
+    private async Task OnCloseVideo()
+    {
+        await VideoDeviceService.Close(".bb-video");
+    }
+
+    private async Task OnCapture()
+    {
+        await VideoDeviceService.Capture(".bb-video");
+    }
+}

src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs

@@ -86,6 +86,8 @@ public static IServiceCollection AddBootstrapBlazor(this IServiceCollection serv
         services.TryAddScoped<IBrowserFingerService, DefaultBrowserFingerService>();
         services.TryAddScoped<ISerialService, DefaultSerialService>();
         services.TryAddScoped<IBluetooth, DefaultBluetooth>();
+        services.TryAddScoped<IMediaDevices, DefaultMediaDevices>();
+        services.TryAddScoped<IMediaVideo, DefaultMediaVideo>();
         services.AddScoped<TabItemTextOptions>();
         services.AddScoped<DialogService>();
         services.AddScoped<MaskService>();

src/BootstrapBlazor/Services/MediaDevices/DefaultMediaDevices.cs

@@ -0,0 +1,43 @@
+// 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 DefaultMediaDevices(IJSRuntime jsRuntime) : IMediaDevices
+{
+    private DotNetObjectReference<DefaultMediaDevices>? _interop = null;
+    private JSModule? _module = null;
+
+    private async Task<JSModule> LoadModule()
+    {
+        _interop ??= DotNetObjectReference.Create(this);
+        _module ??= await jsRuntime.LoadModuleByName("media");
+        return _module;
+    }
+
+    public async Task<IEnumerable<IMediaDeviceInfo>?> EnumerateDevices()
+    {
+        var module = await LoadModule();
+        return await module.InvokeAsync<List<MediaDeviceInfo>?>("enumerateDevices");
+    }
+
+    public async Task Open(MediaTrackConstraints constraints)
+    {
+        var module = await LoadModule();
+        await module.InvokeVoidAsync("open", constraints);
+    }
+
+    public async Task Close(string selector)
+    {
+        var module = await LoadModule();
+        await module.InvokeVoidAsync("close", selector);
+    }
+
+    public async Task Capture(string selector)
+    {
+        var module = await LoadModule();
+        await module.InvokeVoidAsync("capture", selector);
+    }
+}

src/BootstrapBlazor/Services/MediaDevices/DefaultMediaVideo.cs

@@ -0,0 +1,39 @@
+// 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 DefaultMediaVideo(IMediaDevices deviceService) : IMediaVideo
+{
+    /// <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 == "videoinput"));
+        }
+        return ret;
+    }
+
+    public Task Open(MediaTrackConstraints constraints)
+    {
+        return deviceService.Open(constraints);
+    }
+
+    public Task Close(string selector)
+    {
+        return deviceService.Close(selector);
+    }
+
+    public Task Capture(string selector)
+    {
+        return deviceService.Capture(selector);
+    }
+}

src/BootstrapBlazor/Services/MediaDevices/DisplayMediaOptions.cs

@@ -0,0 +1,13 @@
+// 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>
+/// 
+/// </summary>
+public class DisplayMediaOptions
+{
+}

src/BootstrapBlazor/Services/MediaDevices/IMediaDeviceInfo.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>
+/// The MediaDeviceInfo interface of the Media Capture and Streams API contains information that describes a single media input or output device.
+/// </summary>
+public interface IMediaDeviceInfo
+{
+    /// <summary>
+    /// The deviceId read-only property of the MediaDeviceInfo interface returns a string that is an identifier for the represented device and is persisted across sessions.
+    /// </summary>
+    public string DeviceId { get; }
+
+    /// <summary>
+    /// The groupId read-only property of the MediaDeviceInfo interface returns a string that is a group identifier.
+    /// </summary>
+    public string GroupId { get; }
+
+    /// <summary>
+    /// The kind read-only property of the MediaDeviceInfo interface returns an enumerated value, that is either "videoinput", "audioinput" or "audiooutput".
+    /// </summary>
+    public string Kind { get; }
+
+    /// <summary>
+    /// The label read-only property of the MediaDeviceInfo interface returns a string describing this device (for example "External USB Webcam").
+    /// </summary>
+    public string Label { get; }
+}

src/BootstrapBlazor/Services/MediaDevices/IMediaDevices.cs

@@ -0,0 +1,39 @@
+// 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>
+/// The MediaDevices interface of the Media Capture and Streams API provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data.
+/// </summary>
+public interface IMediaDevices
+{
+    /// <summary>
+    /// An array of MediaDeviceInfo objects. Each object in the array describes one of the available media input and output devices.
+    /// </summary>
+    /// <returns></returns>
+    Task<IEnumerable<IMediaDeviceInfo>?> EnumerateDevices();
+
+    /// <summary>
+    /// The open() method of the MediaDevices interface creates a new MediaStream object and starts capturing media from the specified device.
+    /// </summary>
+    /// <param name="constraints"></param>
+    /// <returns></returns>
+    Task Open(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="selector"></param>
+    /// <returns></returns>
+    Task 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.
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <returns></returns>
+    Task Capture(string selector);
+}

src/BootstrapBlazor/Services/MediaDevices/IMediaVideo.cs

@@ -0,0 +1,39 @@
+// 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>
+/// 
+/// </summary>
+public interface IMediaVideo
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <returns></returns>
+    Task<List<IMediaDeviceInfo>?> GetDevices();
+
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <param name="constraints"></param>
+    /// <returns></returns>
+    Task Open(MediaTrackConstraints constraints);
+
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <returns></returns>
+    Task Close(string selector);
+
+    /// <summary>
+    /// 
+    /// </summary>
+    /// <param name="selector"></param>
+    /// <returns></returns>
+    Task Capture(string selector);
+}

src/BootstrapBlazor/Services/MediaDevices/MediaDeviceInfo.cs

@@ -0,0 +1,17 @@
+// 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 MediaDeviceInfo : IMediaDeviceInfo
+{
+    public string DeviceId { get; set; } = "";
+
+    public string GroupId { get; set; } = "";
+
+    public string Kind { get; set; } = "";
+
+    public string Label { get; set; } = "";
+}

src/BootstrapBlazor/Services/MediaDevices/MediaStream.cs

@@ -0,0 +1,13 @@
+// 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>
+/// The MediaStream interface of the Media Capture and Streams API represents a stream of media content. A stream consists of several tracks, such as video or audio tracks. Each track is specified as an instance of MediaStreamTrack.
+/// </summary>
+public class MediaStream
+{
+}

src/BootstrapBlazor/Services/MediaDevices/MediaTrackConstraints.cs

@@ -0,0 +1,37 @@
+// 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>
+/// The MediaTrackConstraints interface of the Media Capture and Streams API is used to specify constraints on the media tracks that are requested from a media device. It is used in conjunction with the getUserMedia() method to specify the desired properties of the media tracks, such as resolution, frame rate, and aspect ratio.
+/// </summary>
+public class MediaTrackConstraints
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public string DeviceId { get; set; } = "";
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? VideoSelector { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public int Width { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public int Height { get; set; }
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public string? FacingMode { get; set; }
+}