feat: 实现 GetPreviewUrl 方法

Author: ArgoZhang

src/BootstrapBlazor/Services/MediaDevices/DefaultMediaDevices.cs

@@ -7,12 +7,10 @@ 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;
     }
@@ -40,4 +38,10 @@ public async Task Capture()
         var module = await LoadModule();
         await module.InvokeVoidAsync("capture");
     }
+
+    public async Task<string?> GetPreviewUrl()
+    {
+        var module = await LoadModule();
+        return await module.InvokeAsync<string?>("getPreviewUrl");
+    }
 }

src/BootstrapBlazor/Services/MediaDevices/DefaultVideoDevice.cs

@@ -49,6 +49,6 @@ public Task Preview()
 
     public Task<string?> GetPreviewUrl()
     {
-        throw new NotImplementedException();
+        return deviceService.GetPreviewUrl();
     }
 }

src/BootstrapBlazor/Services/MediaDevices/IMediaDevices.cs

@@ -35,4 +35,10 @@ public interface IMediaDevices
     /// </summary>
     /// <returns></returns>
     Task Capture();
+
+    /// <summary>
+    /// Gets the preview URL of the captured image.
+    /// </summary>
+    /// <returns></returns>
+    Task<string?> GetPreviewUrl();
 }

src/BootstrapBlazor/wwwroot/modules/media.js

@@ -59,16 +59,6 @@ export async function close(videoSelector) {
     media.stream = null;
 }
 
-const closeStream = stream => {
-    if (stream) {
-        const tracks = stream.getTracks();
-
-        tracks.forEach(track => {
-            track.stop();
-        });
-    }
-}
-
 export async function capture(videoSelector) {
     const video = document.querySelector(videoSelector);
     if (video) {
@@ -89,3 +79,29 @@ export async function capture(videoSelector) {
         }
     }
 }
+
+export async function getPreviewUrl() {
+    let url = null;
+    const media = registerBootstrapBlazorModule("MediaDevices");
+    const { stream } = media;
+    if (stream) {
+        const tracks = stream.getVideoTracks();
+        if (tracks) {
+            const track = tracks[0];
+            const capture = new ImageCapture(track);
+            const blob = await capture.takePhoto();
+            url = URL.createObjectURL(blob);
+        }
+    }
+    return url;
+}
+
+const closeStream = stream => {
+    if (stream) {
+        const tracks = stream.getTracks();
+
+        tracks.forEach(track => {
+            track.stop();
+        });
+    }
+}