refactor(IVideoDevice): add bool result from open method (#5945)

* refactor: 防止重复添加

* doc: 更新示例

* doc: 更新示例

* refactor: 移除 Flip 方法

* doc: 更新示例

* test: 更新单元测试

* doc: 移除调试信息

* refactor: open 方法增加返回值

* doc: 增加打开设备逻辑

* test: 更新单元测试

* refactor: close 方法增加返回值

* doc: 更新文档

* test: 更新单元测试

* doc: 增加自动选择设备逻辑

* doc: 增加自动关闭视频逻辑

* refactor: 移除水平翻转样式

* chore: bump version 9.6.1-beta02

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

---------

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

Author: ArgoZhang

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

@@ -14,10 +14,9 @@ private IBluetooth? BluetoothService { get; set; }</Pre>
     <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" class="ms-2"></Button>
-            <Button Text="@Localizer["VideoDeviceCloseText"]" Icon="fa-solid fa-stop" OnClick="OnCloseVideo" class="ms-2"></Button>
-            <Button Text="@Localizer["VideoDeviceCaptureText"]" Icon="fa-solid fa-camera" OnClick="OnCapture" class="ms-2"></Button>
-            <Button Text="@Localizer["VideoDeviceFlipText"]" Icon="fa-solid fa-camera-rotate" OnClick="OnFlip" class="ms-2"></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>
         <div class="col-12">
             <Select Items="@_items" @bind-Value="_deviceId" DisplayText="Devices" ShowLabel="true"></Select>

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

@@ -8,7 +8,7 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// <summary>
 /// VideoDevice Component
 /// </summary>
-public partial class VideoDevices
+public partial class VideoDevices : IAsyncDisposable
 {
     [Inject, NotNull]
     private IVideoDevice? VideoDeviceService { get; set; }
@@ -21,13 +21,18 @@ public partial class VideoDevices
 
     private string? _previewUrl;
 
+    private bool _isOpen = false;
+
     private async Task OnRequestDevice()
     {
         var devices = await VideoDeviceService.GetDevices();
         if (devices != null)
         {
+            _devices.Clear();
             _devices.AddRange(devices);
             _items = [.. _devices.Select(i => new SelectedItem(i.DeviceId, i.Label))];
+
+            _deviceId = _items.FirstOrDefault()?.Value;
         }
     }
 
@@ -40,12 +45,13 @@ private async Task OnOpenVideo()
                 DeviceId = _deviceId,
                 VideoSelector = ".bb-video"
             };
-            await VideoDeviceService.Open(constraints);
+            _isOpen = await VideoDeviceService.Open(constraints);
         }
     }
 
     private async Task OnCloseVideo()
     {
+        _isOpen = false;
         _previewUrl = "";
         await VideoDeviceService.Close(".bb-video");
     }
@@ -55,8 +61,22 @@ private async Task OnCapture()
         _previewUrl = await VideoDeviceService.GetPreviewUrl();
     }
 
-    private async Task OnFlip()
+    private async Task DisposeAsync(bool disposing)
+    {
+        if (disposing)
+        {
+            await OnCloseVideo();
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    /// <exception cref="NotImplementedException"></exception>
+    public async ValueTask DisposeAsync()
     {
-        await VideoDeviceService.Flip();
+        await DisposeAsync(true);
+        GC.SuppressFinalize(this);
     }
 }

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

@@ -2,15 +2,13 @@
     min-height: 240px;
     height: auto;
     width: auto;
-    transform: scaleX(-1);
     margin-top: 1rem;
     display: block;
 }
 
 .bb-image {
     border: 1px solid var(--bs-border-color);
     border-radius: var(--bs-border-radius);
-    transform: scaleX(-1);
     margin-top: 1rem;
     display: block;
 }

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

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

src/BootstrapBlazor/Services/MediaDevices/DefaultVideoDevice.cs

@@ -22,12 +22,12 @@ class DefaultVideoDevice(IMediaDevices deviceService) : IVideoDevice
         return ret;
     }
 
-    public Task Open(MediaTrackConstraints constraints)
+    public Task<bool> Open(MediaTrackConstraints constraints)
     {
         return deviceService.Open(constraints);
     }
 
-    public Task Close(string? videoSelector)
+    public Task<bool> Close(string? videoSelector)
     {
         return deviceService.Close(videoSelector);
     }
@@ -41,9 +41,4 @@ public Task Capture()
     {
         return deviceService.GetPreviewUrl();
     }
-
-    public Task Flip()
-    {
-        return deviceService.Flip();
-    }
 }

src/BootstrapBlazor/Services/MediaDevices/IMediaDevices.cs

@@ -21,14 +21,14 @@ public interface IMediaDevices
     /// </summary>
     /// <param name="constraints"></param>
     /// <returns></returns>
-    Task Open(MediaTrackConstraints constraints);
+    Task<bool> 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="videoSelector"></param>
     /// <returns></returns>
-    Task Close(string? videoSelector);
+    Task<bool> Close(string? videoSelector);
 
     /// <summary>
     /// The capture() method of the MediaDevices interface captures a still image from the specified video stream and saves it to the specified location.
@@ -41,10 +41,4 @@ public interface IMediaDevices
     /// </summary>
     /// <returns></returns>
     Task<string?> GetPreviewUrl();
-
-    /// <summary>
-    /// Flip the video device.
-    /// </summary>
-    /// <returns></returns>
-    Task Flip();
 }

src/BootstrapBlazor/Services/MediaDevices/IVideoDevice.cs

@@ -21,14 +21,14 @@ public interface IVideoDevice
     /// </summary>
     /// <param name="constraints"></param>
     /// <returns></returns>
-    Task Open(MediaTrackConstraints constraints);
+    Task<bool> Open(MediaTrackConstraints constraints);
 
     /// <summary>
     /// Close the video device with the specified selector.
     /// </summary>
     /// <param name="videoSelector"></param>
     /// <returns></returns>
-    Task Close(string? videoSelector);
+    Task<bool> Close(string? videoSelector);
 
     /// <summary>
     /// Capture a still image from the video stream.
@@ -53,10 +53,4 @@ public interface IVideoDevice
     /// </summary>
     /// <returns></returns>
     Task<string?> GetPreviewUrl();
-
-    /// <summary>
-    /// Flip the video device.
-    /// </summary>
-    /// <returns></returns>
-    Task Flip();
 }

src/BootstrapBlazor/wwwroot/modules/media.js

@@ -29,34 +29,52 @@ export async function open(options) {
     if (height) {
         constrains.video.height = { ideal: height };
     }
-    const stream = await navigator.mediaDevices.getUserMedia(constrains);
-    const media = registerBootstrapBlazorModule("MediaDevices");
-    media.stream = stream;
 
-    if (videoSelector) {
-        const video = document.querySelector(videoSelector);
-        if (video) {
-            video.srcObject = stream;
+    let ret = false;
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia(constrains);
+        const media = registerBootstrapBlazorModule("MediaDevices");
+        media.stream = stream;
+
+        if (videoSelector) {
+            const video = document.querySelector(videoSelector);
+            if (video) {
+                video.srcObject = stream;
+            }
         }
+        ret = true;
+    }
+    catch (err) {
+        console.error("Error accessing media devices.", err);
     }
+    return ret;
 }
 
 export async function close(videoSelector) {
-    if (videoSelector) {
-        const video = document.querySelector(videoSelector);
-        if (video) {
-            video.pause();
-            const stream = video.srcObject;
+    let ret = false;
+
+    try {
+        if (videoSelector) {
+            const video = document.querySelector(videoSelector);
+            if (video) {
+                video.pause();
+                const stream = video.srcObject;
+                closeStream(stream);
+                video.srcObject = null;
+            }
+        }
+        const media = registerBootstrapBlazorModule("MediaDevices");
+        const { stream } = media;
+        if (stream && stream.active) {
             closeStream(stream);
-            video.srcObject = null;
         }
+        media.stream = null;
+        ret = true;
     }
-    const media = registerBootstrapBlazorModule("MediaDevices");
-    const { stream } = media;
-    if (stream && stream.active) {
-        closeStream(stream);
+    catch (err) {
+        console.error("Error closing media devices.", err);
     }
-    media.stream = null;
+    return ret;
 }
 
 export async function getPreviewUrl() {
@@ -75,31 +93,6 @@ export async function getPreviewUrl() {
     return url;
 }
 
-export async function flip() {
-    const media = registerBootstrapBlazorModule("MediaDevices");
-    const { stream } = media;
-    if (stream && stream.active) {
-        const tracks = stream.getVideoTracks();
-        if (tracks) {
-            const track = tracks[0];
-            const constraints = track.getSettings();
-            const { facingMode } = constraints;
-            if (facingMode === void 0) {
-                console.log('facingMode is not supported');
-                return;
-            }
-
-            if (facingMode === "user" || facingMode.exact === "user" || facingMode.ideal === "user") {
-                constraints.facingMode = { ideal: "environment" }
-            }
-            else {
-                constraints.facingMode = { ideal: "user" }
-            }
-            await track.applyConstraints(constraints);
-        }
-    }
-}
-
 const closeStream = stream => {
     if (stream) {
         const tracks = stream.getTracks();

test/UnitTest/Services/VideoDeviceTest.cs

@@ -26,6 +26,8 @@ public async Task GetDevices_Ok()
     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);
 
         var service = Context.Services.GetRequiredService<IVideoDevice>();
         var options = new MediaTrackConstraints()
@@ -36,8 +38,11 @@ public async Task Open_Ok()
             Width = 480,
             VideoSelector = ".bb-video"
         };
-        await service.Open(options);
-        await service.Close(".bb-video");
+        var open = await service.Open(options);
+        Assert.True(open);
+
+        var close = await service.Close(".bb-video");
+        Assert.True(close);
 
         Assert.Equal("test-device-id", options.DeviceId);
         Assert.Equal("user", options.FacingMode);
@@ -46,7 +51,6 @@ public async Task Open_Ok()
         Assert.Equal(".bb-video", options.VideoSelector);
 
         await service.Capture();
-        await service.Flip();
         var url = await service.GetPreviewUrl();
         Assert.Equal("blob:https://test-preview", url);
     }