Merge pull request #2962 from xinnan-tech/test_live2d

fix: 调整切换摄像头位置

main/xiaozhi-server/test/css/test_page.css

@@ -1280,15 +1280,30 @@ body {
     transform: scaleX(-1);
 }
 
+.camera-switch-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.camera-switch-container {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+}
+
 .camera-switch {
     display: none;
-    position: fixed;
-    bottom: 23px;
-    right: 20px;
-    z-index: 999;
+    height: 20px;
     color: #fff;
 }
 
+.camera-switch .btn-icon {
+    margin-bottom: 0;
+}
+
 .camera-switch.active {
     display: block;
 }

main/xiaozhi-server/test/js/app.js

@@ -129,6 +129,7 @@ class App {
         const cameraContainer = document.getElementById('cameraContainer');
         const cameraVideo = document.getElementById('cameraVideo');
         const cameraSwitch = document.getElementById('cameraSwitch');
+        const cameraSwitchMask = document.getElementById('cameraSwitchMask');
         const dialBtn = document.getElementById('dialBtn');
 
         if (!cameraContainer || !cameraVideo) {
@@ -240,6 +241,7 @@ class App {
                     const originalTransform = currentTransform === 'none' ? 'translate(0px, 0px)' : currentTransform;
                     cameraContainer.style.setProperty('--original-transform', originalTransform);
                     cameraContainer.classList.add('flip');
+                    if (cameraSwitchMask) cameraSwitchMask.style.opacity = 0; 
                     this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
                     window.stopCamera();
                     window.startCamera();
@@ -253,6 +255,7 @@ class App {
                         window.switchCameraTimer = null;
                         cameraContainer.classList.remove('flip');
                         cameraContainer.style.removeProperty('--original-transform');
+                        if (cameraSwitchMask) cameraSwitchMask.style.opacity = 1; 
                     }, 500);
                 }
             };

main/xiaozhi-server/test/js/ui/controller.js

@@ -100,9 +100,13 @@ class UIController {
 
         // Camera switch button
         const cameraSwitch = document.getElementById('cameraSwitch');
-        if (cameraSwitch) {
-            cameraSwitch.addEventListener('click', () => {
-                window.switchCamera();
+        const cameraSwitchMask = document.getElementById('cameraSwitchMask');
+        if (cameraSwitchMask) {
+            cameraSwitchMask.addEventListener('click', () => {
+                const isCameraActive = cameraSwitch.classList.contains('active');
+                if (isCameraActive) {
+                    window.switchCamera();
+                }
             })
         }
 

main/xiaozhi-server/test/test_page.html

@@ -45,17 +45,17 @@
     <!-- 主容器 -->
     <div class="container">
 
-        <!-- 摄像头切换按钮 -->
-        <div class="camera-switch" id="cameraSwitch">
-            <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
-                <path
-                    d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15V18M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" />
-            </svg>
-        </div>
-
         <!-- 摄像头显示区域（可拖动） -->
         <div class="camera-container" id="cameraContainer">
             <video id="cameraVideo" autoplay playsinline muted></video>
+            <div class="camera-switch-mask" id="cameraSwitchMask">
+                <div class="camera-switch-container">
+                    <!-- 摄像头切换按钮 -->
+                    <div class="camera-switch" id="cameraSwitch">
+                        <svg class="btn-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7319" width="32" height="32"><path d="M722.1 530.3c0-44.9-13.8-86.5-37.2-120.9-0.3-0.6-0.6-1.2-0.9-1.7-2.9-4.2-6.1-8.1-9.2-12-0.4-0.5-0.7-1-1.1-1.5-21.4-26.3-48.3-46.7-78.7-59.9-0.8-0.4-1.7-0.8-2.5-1.2-4.9-2-9.8-3.8-14.9-5.5-1.8-0.6-3.6-1.3-5.4-1.8-4.4-1.3-8.8-2.4-13.3-3.5-2.5-0.6-4.9-1.2-7.4-1.7-1.2-0.2-2.4-0.6-3.6-0.8-3.3-0.6-6.7-0.8-10-1.3-2.3-0.3-4.6-0.7-6.9-0.9-5.6-0.5-11.2-0.8-16.7-0.9-1 0-2-0.1-3-0.1-0.2 0-0.3 0.1-0.5 0.1-42.8 0-84.6 13.1-120.4 38.6-11.5 8.1-14.2 24.1-6.2 35.7 8 11.6 23.8 14.4 35.2 6.3 27.7-19.7 60-29.6 93.1-29.3 4.8 0 9.5 0.3 14.1 0.7 1.4 0.2 2.8 0.4 4.3 0.5 3.8 0.5 7.6 1 11.3 1.8 1.6 0.3 3.3 0.8 4.9 1.1 3.7 0.8 7.3 1.7 10.9 2.8 1.1 0.4 2.2 0.8 3.4 1.2 4.1 1.3 8.1 2.8 12 4.5 0.4 0.2 0.8 0.4 1.2 0.5 23.6 10.3 44.3 26.1 60.4 45.9 0.1 0.1 0.2 0.3 0.3 0.4 22.7 28 36.4 63.9 36.4 102.9h-42.2L697 632.9l67.5-102.6h-42.4z m-119 133c-27.9 19.8-60.5 29.7-93.9 29.3-4.4-0.1-8.8-0.3-13.1-0.7-1.8-0.2-3.5-0.5-5.3-0.7-3.4-0.5-6.8-0.9-10.1-1.6-2-0.4-4-0.9-6.1-1.4-3.3-0.8-6.5-1.5-9.7-2.5-1.5-0.5-3-1-4.6-1.5-3.7-1.2-7.3-2.5-10.8-4-0.8-0.3-1.6-0.7-2.4-1.1-4.1-1.9-8.2-3.8-12.2-6l-0.6-0.3c-13.4-7.5-25.7-16.8-36.4-27.7-0.2-0.2-0.3-0.4-0.5-0.6-3.3-3.4-6.5-6.9-9.5-10.7-0.6-0.8-1.3-1.6-1.9-2.5-21.9-27.8-35.1-63-35.1-101.2h42.2l-67.5-102.6-67.5 102.6h42.2c0 45 13.9 86.7 37.3 121.1 0.3 0.5 0.5 1 0.8 1.5 2.4 3.5 5.1 6.8 7.7 10.1 1 1.3 1.9 2.6 2.9 3.8 3.9 4.7 7.9 9.2 12.1 13.5 0.4 0.4 0.8 0.9 1.2 1.3 14.1 14.3 30.1 26.4 47.4 36 0.5 0.3 0.9 0.6 1.4 0.8 5 2.7 10.1 5.2 15.3 7.5l3.9 1.8c4.4 1.9 9 3.5 13.6 5.1 2.2 0.7 4.4 1.5 6.6 2.2 4 1.2 8.1 2.2 12.3 3.2 2.8 0.7 5.5 1.4 8.3 1.9 1.2 0.3 2.3 0.6 3.4 0.8 3.9 0.7 7.8 1.1 11.8 1.6l4.2 0.6c7 0.7 14.1 1.2 21.1 1.2 42.9 0 84.7-13.3 120.6-38.8 11.4-8.2 14.2-24.1 6.2-35.8-8-11.5-23.8-14.3-35.3-6.2z m271.3-421.6H763c-26.5 0-82.9-119.7-112.5-119.7H370.6c-29.6 0-85.9 119.7-112.4 119.7H147.5c-46.3 0-83.9 40.2-83.9 89.7v478.8c0 49.6 37.6 89.8 83.9 89.8h726.9c46.3 0 83.9-40.1 83.9-89.8V331.4c0-49.5-37.6-89.7-83.9-89.7z m28 538.6c0 33.1-25 59.8-55.9 59.8h-671c-30.9 0-55.9-26.8-55.9-59.8V361.4c0-33 25-59.8 55.9-59.8h111.2c25.8 0 82-119.7 111.6-119.7h223.2c29.5 0 85.6 119.7 111.5 119.7h113.5c30.9 0 55.9 26.8 55.9 59.8v418.9z" p-id="7320" fill="#ffffff"></path></svg>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <!-- 连接状态指示器 - 页面顶部中部 -->