refactor: 增加镜头翻转功能

Author: ArgoZhang

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

@@ -42,6 +42,7 @@
             <Button Text="Television 4K (3840 * 2160)" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(3840, 2160)"></Button>
             <Button Text="Cinema 4K (4096 * 2160)" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(4096, 2160)"></Button>
             <Button Text="8K" IsDisabled="StopDisabled" OnClickWithoutRender="() => OnApply(7680, 4320)"></Button>
+            <Button Text="Flip" IsDisabled="StopDisabled" OnClickWithoutRender="OnFlip"></Button>
         </div>
         <ConsoleLogger @ref="Logger" />
         <div class="mt-3">

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

@@ -135,6 +135,8 @@ private async Task OnClickPreview()
 
     private Task OnApply(int width, int height) => Camera.Resize(width, height);
 
+    private Task OnFlip() => Camera.Flip();
+
     private Task OnError(string err)
     {
         PlayDisabled = false;

src/BootstrapBlazor/Components/Camera/Camera.razor.cs

@@ -153,6 +153,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <returns></returns>
     public Task Resize(int width, int height) => InvokeVoidAsync("resize", Id, width, height);
 
+    /// <summary>
+    /// 反转摄像头方法
+    /// </summary>
+    /// <returns></returns>
+    public Task Flip() => InvokeVoidAsync("flip", Id);
+
     /// <summary>
     /// 初始化设备方法
     /// </summary>

src/BootstrapBlazor/Components/Camera/Camera.razor.js

@@ -40,6 +40,9 @@ const play = (camera, option = {}) => {
         ...option
     }
     navigator.mediaDevices.getUserMedia(constrains).then(stream => {
+        const supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
+        console.log(supportedConstraints);
+
         camera.video = { deviceId: option.video.deviceId };
         camera.video.element = camera.el.querySelector('video')
         camera.video.element.srcObject = stream
@@ -142,12 +145,40 @@ export async function resize(id, width, height) {
         return
     }
 
-    const constrains = {
+    const constraints = {
         facingMode: "environment",
         width: { ideal: width },
         height: { ideal: height }
     }
-    await camera.video.track.applyConstraints(constrains);
+    await camera.video.track.applyConstraints(constraints);
+}
+
+
+export async function flip(id) {
+    const camera = Data.get(id)
+    if (camera === null || camera.video === void 0) {
+        return
+    }
+
+    const { track } = camera.video;
+    if (track) {
+        const constraints = track.getConstraints();
+        if (constraints.facingMode === void 0) {
+            constraints.facingMode = { exact: "environment" }
+        }
+        const { exact } = constraints.facingMode;
+        if (exact === void 0) {
+            constraints.facingMode = { ideal: "environment" }
+        }
+        else if (exact === "user") {
+            constraints.facingMode = { ideal: "environment" }
+        }
+        else {
+            constraints.facingMode = { ideal: "user" }
+        }
+        console.log(constraints);
+        await track.applyConstraints(constraints);
+    }
 }
 
 export function dispose(id) {