doc: 更新示例

Author: ArgoZhang

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

@@ -35,11 +35,15 @@ private IBluetooth? BluetoothService { get; set; }</Pre>
 
     <Select Items="@_items" @bind-Value="_deviceId"></Select>
 
+    <div>Video</div>
+
     <video class="bb-video" muted playsinline autoplay style="height: auto; width: auto;"></video>
 
-    <canvas class="bb-video-image"></canvas>
+    <div>Preview</div>
 
-    <div>Image</div>
-    <img class="bb-image" src="" />
+    @if (!string.IsNullOrEmpty(_previewUrl))
+    {
+        <img class="bb-image" src="@_previewUrl" />
+    }
 </DemoBlock>
 

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

@@ -11,17 +11,19 @@ namespace BootstrapBlazor.Server.Components.Samples;
 public partial class MediaDevice
 {
     [Inject, NotNull]
-    private IVideoDevice? MediaVideoService { get; set; }
+    private IVideoDevice? VideoDeviceService { get; set; }
 
     private readonly List<IMediaDeviceInfo> _devices = [];
 
     private List<SelectedItem> _items = [];
 
     private string? _deviceId;
 
+    private string? _previewUrl;
+
     private async Task OnRequestDevice()
     {
-        var devices = await MediaVideoService.GetDevices();
+        var devices = await VideoDeviceService.GetDevices();
         if (devices != null)
         {
             _devices.AddRange(devices);
@@ -38,18 +40,17 @@ private async Task OnOpenVideo()
                 DeviceId = _deviceId,
                 VideoSelector = ".bb-video"
             };
-            await MediaVideoService.Open(constraints);
+            await VideoDeviceService.Open(constraints);
         }
     }
 
     private async Task OnCloseVideo()
     {
-        await MediaVideoService.Close(".bb-video");
+        await VideoDeviceService.Close(".bb-video");
     }
 
     private async Task OnCapture()
     {
-        await Task.Delay(1);
-        //await VideoDeviceService.Capture(".bb-video");
+        _previewUrl = await VideoDeviceService.GetPreviewUrl();
     }
 }