feat(IVideoDevice): add GetPreviewData method (#5965)

* refactor: 代码重构消除警告信息

* feat: 增加 GetPreviewData 方法

* feat: 增加预览数据

* refactor: 增加异常保护

* doc: 增加下载示例

* refactor: 移除 async 关键字

* test: 增加单元测试

* chore: bump version 9.6.1-beta03

Co-Authored-By: pomeara <8163710+pomeara@users.noreply.github.com>

* test: 更新单元测试

* doc: 更新资源文件

---------

Co-authored-by: pomeara <8163710+pomeara@users.noreply.github.com>

Author: ArgoZhang

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

@@ -18,6 +18,7 @@ private IVideoDevice? VideoDeviceService { get; set; }</Pre>
                 <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="@Localizer["VideoDeviceDownloadText"]" Icon="fa-solid fa-download" OnClick="OnDownload" 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>

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

@@ -13,6 +13,9 @@ public partial class VideoDevices : IAsyncDisposable
     [Inject, NotNull]
     private IVideoDevice? VideoDeviceService { get; set; }
 
+    [Inject, NotNull]
+    private DownloadService? DownloadService { get; set; }
+
     private readonly List<IMediaDeviceInfo> _devices = [];
 
     private List<SelectedItem> _items = [];
@@ -61,6 +64,15 @@ private async Task OnCapture()
         _previewUrl = await VideoDeviceService.GetPreviewUrl();
     }
 
+    private async Task OnDownload()
+    {
+        var stream = await VideoDeviceService.GetPreviewData();
+        if (stream != null)
+        {
+            await DownloadService.DownloadFromStreamAsync("preview.png", stream);
+        }
+    }
+
     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/Locales/en-US.json

@@ -7128,7 +7128,7 @@
     "VideoDeviceOpenText": "Open",
     "VideoDeviceCloseText": "Close",
     "VideoDeviceCaptureText": "Capture",
-    "VideoDeviceFlipText": "Flip"
+    "VideoDeviceDownloadText": "Download"
   },
   "BootstrapBlazor.Server.Components.Samples.AudioDevices": {
     "AudioDeviceTitle": "IAudioDevice",

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

@@ -7128,7 +7128,7 @@
     "VideoDeviceOpenText": "打开设备",
     "VideoDeviceCloseText": "关闭设备",
     "VideoDeviceCaptureText": "截图",
-    "VideoDeviceFlipText": "翻转镜头"
+    "VideoDeviceDownloadText": "下载"
   },
   "BootstrapBlazor.Server.Components.Samples.AudioDevices": {
     "AudioDeviceTitle": "IAudioDevice 音频设备服务",

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Services/MediaDevices/DefaultMediaDevices.cs

@@ -45,6 +45,18 @@ public async Task Capture()
         return await module.InvokeAsync<string?>("getPreviewUrl");
     }
 
+    public async Task<Stream?> GetPreviewData()
+    {
+        Stream? ret = null;
+        var module = await LoadModule();
+        var stream = await module.InvokeAsync<IJSStreamReference?>("getPreviewData");
+        if (stream != null)
+        {
+            ret = await stream.OpenReadStreamAsync(stream.Length);
+        }
+        return ret;
+    }
+
     public async Task<bool> Apply(MediaTrackConstraints constraints)
     {
         var module = await LoadModule();

src/BootstrapBlazor/Services/MediaDevices/DefaultVideoDevice.cs

@@ -37,6 +37,11 @@ public Task Capture()
         return deviceService.Capture();
     }
 
+    public Task<Stream?> GetPreviewData()
+    {
+        return deviceService.GetPreviewData();
+    }
+
     public Task<string?> GetPreviewUrl()
     {
         return deviceService.GetPreviewUrl();

src/BootstrapBlazor/Services/MediaDevices/IMediaDevices.cs

@@ -43,6 +43,12 @@ public interface IMediaDevices
     /// <returns></returns>
     Task<string?> GetPreviewUrl();
 
+    /// <summary>
+    /// Gets the stream of the captured image.
+    /// </summary>
+    /// <returns></returns>
+    Task<Stream?> GetPreviewData();
+
     /// <summary>
     /// Apply the media track constraints.
     /// </summary>

src/BootstrapBlazor/Services/MediaDevices/IVideoDevice.cs

@@ -36,24 +36,18 @@ public interface IVideoDevice
     /// <returns></returns>
     Task Capture();
 
-    ///// <summary>
-    ///// Preview a still image from the video stream.
-    ///// </summary>
-    ///// <returns></returns>
-    //Task Preview();
-
-    ///// <summary>
-    ///// Gets the stream of the captured image.
-    ///// </summary>
-    ///// <returns></returns>
-    //Task<Stream?> GetPreviewImage();
-
     /// <summary>
     /// Gets the preview URL of the captured image.
     /// </summary>
     /// <returns></returns>
     Task<string?> GetPreviewUrl();
 
+    /// <summary>
+    /// Gets the stream of the captured image.
+    /// </summary>
+    /// <returns></returns>
+    Task<Stream?> GetPreviewData();
+
     /// <summary>
     /// Apply the media track constraints.
     /// </summary>

src/BootstrapBlazor/wwwroot/modules/media.js

@@ -6,8 +6,13 @@ export async function enumerateDevices() {
         console.log("enumerateDevices() not supported.");
     }
     else {
-        await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-        ret = await navigator.mediaDevices.enumerateDevices();
+        try {
+            await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+            ret = await navigator.mediaDevices.enumerateDevices();
+        }
+        catch (e) {
+            console.warn(e);
+        }
     }
     return ret;
 }
@@ -25,12 +30,12 @@ export async function open(type, options) {
 
 export async function close(selector) {
     const media = registerBootstrapBlazorModule("MediaDevices");
-    let ret = false;
+    let ret;
     if (media.stream) {
         ret = await closeVideoDevice(selector);
     }
     else {
-        ret = await stop(selector);
+        ret = stop(selector);
     }
     return ret;
 }
@@ -143,11 +148,17 @@ export async function getPreviewUrl() {
             const capture = new ImageCapture(track);
             const blob = await capture.takePhoto();
             url = URL.createObjectURL(blob);
+            media.previewBlob = blob;
         }
     }
     return url;
 }
 
+export function getPreviewData() {
+    const media = registerBootstrapBlazorModule("MediaDevices");
+    return media.previewBlob;
+}
+
 const closeStream = stream => {
     if (stream) {
         const tracks = stream.getTracks();
@@ -205,7 +216,7 @@ export async function record(options) {
     return ret;
 }
 
-export async function stop(selector) {
+export function stop(selector) {
     let ret = false;
     const media = registerBootstrapBlazorModule("MediaDevices");
     if (selector) {