doc: 更新文档

Author: ArgoZhang

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

@@ -5,42 +5,26 @@
 
 <h4>@Localizer["VideoDeviceIntro"]</h4>
 
-<p>@((MarkupString)Localizer["VideoDeviceDescription"].Value)</p>
-
 <Pre>[Inject, NotNull]
 private IBluetooth? BluetoothService { get; set; }</Pre>
 
-<Tips>
-    <ul class="ul-demo">
-        <li>@((MarkupString)Localizer["VideoDeviceTipsLi1"].Value)</li>
-        <li>@((MarkupString)Localizer["VideoDeviceTipsLi2"].Value)</li>
-    </ul>
-    <div>@((MarkupString)Localizer["VideoDeviceTipsTitle"].Value)</div>
-</Tips>
-
 <DemoBlock Title="@Localizer["BaseUsageTitle"]"
            Introduction="@Localizer["BaseUsageIntro"]"
            Name="Normal">
-    <section ignore>
-        @Localizer["UsageDesc"]
-    </section>
     <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"></Button>
-            <Button Text="@Localizer["VideoDeviceCloseText"]" Icon="fa-solid fa-stop" OnClick="OnCloseVideo"></Button>
-            <Button Text="@Localizer["VideoDeviceCaptureText"]" Icon="fa-solid fa-camera" OnClick="OnCapture"></Button>
-            <Button Text="@Localizer["VideoDeviceFlipText"]" Icon="fa-solid fa-camera" OnClick="OnFlip"></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>
+        </div>
+        <div class="col-12">
+            <Select Items="@_items" @bind-Value="_deviceId" DisplayText="Devices" ShowLabel="true"></Select>
         </div>
     </div>
 
-    <Select Items="@_items" @bind-Value="_deviceId"></Select>
-
-    <div>Video</div>
-
-    <video class="bb-video" muted playsinline autoplay style="height: auto; width: auto;"></video>
-
-    <div>Preview</div>
+    <video class="bb-video" muted playsinline autoplay></video>
 
     @if (!string.IsNullOrEmpty(_previewUrl))
     {

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

@@ -46,6 +46,7 @@ private async Task OnOpenVideo()
 
     private async Task OnCloseVideo()
     {
+        _previewUrl = "";
         await VideoDeviceService.Close(".bb-video");
     }
 

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

@@ -0,0 +1,16 @@
+.bb-video {
+    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.Server/Locales/en-US.json

@@ -7117,5 +7117,16 @@
     "UrlDesc": "Use your iPhone's camera or the QR code scanning function to scan the QR code below, then open the <code>Safari</code> browser and open the current address",
     "WiFiDesc": "Use your iPhone's camera or the QR code scanner to scan the QR code below to automatically join the <code>WiFi</code> network.",
     "EmailDesc": "Use your iPhone's camera or the QR code scanner to scan the QR code below, then open the <code>Email</code> app to send an email."
+  },
+  "BootstrapBlazor.Server.Components.Samples.VideoDevices": {
+    "VideoDeviceTitle": "IVideoDevice",
+    "VideoDeviceIntro": "Get video equipment operation capabilities through this service",
+    "BaseUsageTitle": "Basic usage",
+    "BaseUsageIntro": "Perform different operations by calling different API methods",
+    "VideoDeviceRequestText": "List",
+    "VideoDeviceOpenText": "Open",
+    "VideoDeviceCloseText": "Close",
+    "VideoDeviceCaptureText": "Capture",
+    "VideoDeviceFlipText": "Flip"
   }
 }

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

@@ -7117,5 +7117,16 @@
     "UrlDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，打开 <code>Safari</code> 浏览器并且打开当前地址",
     "WiFiDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，自动加入 <code>WiFi</code> 网络",
     "EmailDesc": "使用 <code>iPhone</code> 手机相机或者扫描二维码功能扫描下方二维码后，打开 <code>Email</code> 应用发送邮件"
+  },
+  "BootstrapBlazor.Server.Components.Samples.VideoDevices": {
+    "VideoDeviceTitle": "IVideoDevice 视频设备服务",
+    "VideoDeviceIntro": "通过此服务获得视频设备操作能力",
+    "BaseUsageTitle": "基本用法",
+    "BaseUsageIntro": "通过调用不同的 api 方法进行不同操作",
+    "VideoDeviceRequestText": "枚举设备",
+    "VideoDeviceOpenText": "打开设备",
+    "VideoDeviceCloseText": "关闭设备",
+    "VideoDeviceCaptureText": "截图",
+    "VideoDeviceFlipText": "翻转镜头"
   }
 }