refactor(IVideoDevice): add Apply method (#5949)

* chore: bump version 9.6.1-beta02

Co-Authored-By: SteelTeng <[email protected]>

* doc: 微调样式

* feat: 增加 apply 实现方法

* doc: 更新示例

* test: 更新单元测试

---------

Co-authored-by: SteelTeng <[email protected]>

Author: ArgoZhang

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

@@ -13,10 +13,15 @@ private IBluetooth? BluetoothService { get; set; }</Pre>
            Name="Normal">
     <div class="row form-inline g-3">
         <div class="col-12">
-            <Button Text="@Localizer["VideoDeviceRequestText"]" Icon="fa-solid fa-photo-film" OnClick="OnRequestDevice"></Button>
-            <Button Text="@Localizer["VideoDeviceOpenText"]" Icon="fa-solid fa-play" OnClick="OnOpenVideo" IsDisabled="_isOpen || string.IsNullOrEmpty(_deviceId)" class="ms-2"></Button>
-            <Button Text="@Localizer["VideoDeviceCloseText"]" Icon="fa-solid fa-stop" OnClick="OnCloseVideo" IsDisabled="!_isOpen" class="ms-2"></Button>
-            <Button Text="@Localizer["VideoDeviceCaptureText"]" Icon="fa-solid fa-camera" OnClick="OnCapture" IsDisabled="!_isOpen" class="ms-2"></Button>
+            <div class="bb-actions">
+                <Button Text="@Localizer["VideoDeviceRequestText"]" Icon="fa-solid fa-photo-film" OnClick="OnRequestDevice"></Button>
+                <Button Text="@Localizer["VideoDeviceOpenText"]" Icon="fa-solid fa-play" OnClick="OnOpenVideo" IsDisabled="_isOpen || string.IsNullOrEmpty(_deviceId)"></Button>
+                <Button Text="@Localizer["VideoDeviceCloseText"]" Icon="fa-solid fa-stop" OnClick="OnCloseVideo" IsDisabled="!_isOpen"></Button>
+                <Button Text="@Localizer["VideoDeviceCaptureText"]" Icon="fa-solid fa-camera" OnClick="OnCapture" IsDisabled="!_isOpen"></Button>
+                <Button Text="QVGA" IsDisabled="!_isOpen" OnClickWithoutRender="() => OnApply(320, 240)"></Button>
+                <Button Text="VGA" IsDisabled="!_isOpen" OnClickWithoutRender="() => OnApply(640, 480)"></Button>
+                <Button Text="HD" IsDisabled="!_isOpen" OnClickWithoutRender="() => OnApply(1280, 960)"></Button>
+            </div>
         </div>
         <div class="col-12">
             <Select Items="@_items" @bind-Value="_deviceId" DisplayText="Devices" ShowLabel="true"></Select>

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

@@ -61,6 +61,8 @@ 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 DisposeAsync(bool disposing)
     {
         if (disposing)

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

@@ -1,14 +1,22 @@
-.bb-video {
+.bb-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: .5rem .5rem;
+}
+
+.bb-video {
     min-height: 240px;
     height: auto;
     width: auto;
-    margin-top: 1rem;
+    margin: 1rem;
     display: block;
 }
 
 .bb-image {
     border: 1px solid var(--bs-border-color);
     border-radius: var(--bs-border-radius);
-    margin-top: 1rem;
+    margin: 1rem 1rem 0 1rem;
     display: block;
+    width: calc(100% - 2rem);
+    max-width: 640px;
 }

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.6.1-beta01</Version>
+    <Version>9.6.1-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Services/MediaDevices/DefaultMediaDevices.cs

@@ -44,4 +44,10 @@ public async Task Capture()
         var module = await LoadModule();
         return await module.InvokeAsync<string?>("getPreviewUrl");
     }
+
+    public async Task<bool> Apply(MediaTrackConstraints constraints)
+    {
+        var module = await LoadModule();
+        return await module.InvokeAsync<bool>("apply", constraints);
+    }
 }

src/BootstrapBlazor/Services/MediaDevices/DefaultVideoDevice.cs

@@ -41,4 +41,9 @@ public Task Capture()
     {
         return deviceService.GetPreviewUrl();
     }
+
+    public Task<bool> Apply(MediaTrackConstraints constraints)
+    {
+        return deviceService.Apply(constraints);
+    }
 }

src/BootstrapBlazor/Services/MediaDevices/IMediaDevices.cs

@@ -41,4 +41,11 @@ public interface IMediaDevices
     /// </summary>
     /// <returns></returns>
     Task<string?> GetPreviewUrl();
+
+    /// <summary>
+    /// Apply the media track constraints.
+    /// </summary>
+    /// <param name="constraints"></param>
+    /// <returns></returns>
+    Task<bool> Apply(MediaTrackConstraints constraints);
 }

src/BootstrapBlazor/Services/MediaDevices/IVideoDevice.cs

@@ -53,4 +53,11 @@ public interface IVideoDevice
     /// </summary>
     /// <returns></returns>
     Task<string?> GetPreviewUrl();
+
+    /// <summary>
+    /// Apply the media track constraints.
+    /// </summary>
+    /// <param name="constraints"></param>
+    /// <returns></returns>
+    Task<bool> Apply(MediaTrackConstraints constraints);
 }

src/BootstrapBlazor/wwwroot/modules/media.js

@@ -77,6 +77,41 @@ export async function close(videoSelector) {
     return ret;
 }
 
+export async function apply(options) {
+    let ret = false;
+    try {
+        const media = registerBootstrapBlazorModule("MediaDevices");
+        const { stream } = media;
+        if (stream && stream.active) {
+            const tracks = stream.getVideoTracks();
+            if (tracks) {
+                const track = tracks[0];
+                const settings = track.getSettings();
+                const { aspectRatio } = settings;
+                if (options.width) {
+                   settings.width = {
+                       exact: options.width,
+                   };
+                   settings.height = {
+                       exact: Math.floor(options.width / aspectRatio)
+                   };
+                }
+                if (options.facingMode) {
+                    settings.facingMode = {
+                        ideal: options.facingMode,
+                    }
+                }
+                console.log(settings);
+                await track.applyConstraints(settings);
+            }
+        }
+    }
+    catch (err) {
+        console.error("Error apply constraints media devices.", err);
+    }
+    return ret;
+}
+
 export async function getPreviewUrl() {
     let url = null;
     const media = registerBootstrapBlazorModule("MediaDevices");

test/UnitTest/Services/VideoDeviceTest.cs

@@ -28,6 +28,7 @@ public async Task Open_Ok()
         Context.JSInterop.Setup<string?>("getPreviewUrl").SetResult("blob:https://test-preview");
         Context.JSInterop.Setup<bool>("open", _ => true).SetResult(true);
         Context.JSInterop.Setup<bool>("close", _ => true).SetResult(true);
+        Context.JSInterop.Setup<bool>("apply", _ => true).SetResult(true);
 
         var service = Context.Services.GetRequiredService<IVideoDevice>();
         var options = new MediaTrackConstraints()
@@ -44,6 +45,9 @@ public async Task Open_Ok()
         var close = await service.Close(".bb-video");
         Assert.True(close);
 
+        var apply = await service.Apply(new MediaTrackConstraints() { Width = 640, Height = 480, VideoSelector = ".bb-video" });
+        Assert.True(apply);
+
         Assert.Equal("test-device-id", options.DeviceId);
         Assert.Equal("user", options.FacingMode);
         Assert.Equal(640, options.Height);