feat: 改进视频流组件和构建流程

- 优化摄像头控制和视频显示组件的性能和用户体验
- 更新 GitHub Actions 工作流以支持不同 macOS 版本的构建
- 添加对 macOS Big Sur 和更早版本的兼容性支持
- 改进错误处理和权限管理机制

Author: richardson

.github/workflows/build-and-release.yml

@@ -82,7 +82,7 @@ jobs:
 
     - name: 构建 Tauri 应用 (现代 macOS)
       if: matrix.target == 'macos-modern'
-      uses: tauri-apps/tauri-action@v1.4.3
+      uses: tauri-apps/tauri-action@v0
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
@@ -91,7 +91,7 @@ jobs:
 
     - name: 构建 Tauri 应用 (Big Sur)
       if: matrix.target == 'macos-bigsur'
-      uses: tauri-apps/tauri-action@v1.4.3
+      uses: tauri-apps/tauri-action@v0
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       with:
@@ -110,7 +110,7 @@ jobs:
 
     - name: 构建 Tauri 应用 (Windows)
       if: matrix.target == 'windows'
-      uses: tauri-apps/tauri-action@v1.4.3
+      uses: tauri-apps/tauri-action@v0
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 

src/components/VideoFeed/CameraControls.tsx

@@ -13,6 +13,8 @@ interface CameraControlsProps {
   onCameraSelect: (deviceId: string) => void;
   onToggleCamera: (active: boolean) => void;
   onRefresh: () => void;
+  isLocked: boolean;
+  onLockChange?: (locked: boolean) => void;
 }
 
 const CameraControls: React.FC<CameraControlsProps> = ({
@@ -22,7 +24,9 @@ const CameraControls: React.FC<CameraControlsProps> = ({
   isCameraActive,
   onCameraSelect,
   onToggleCamera,
-  onRefresh
+  onRefresh,
+  isLocked,
+  onLockChange
 }) => {
   return (
     <div className="mb-4 flex items-center justify-between flex-wrap gap-4">
@@ -45,6 +49,17 @@ const CameraControls: React.FC<CameraControlsProps> = ({
             {isCameraActive ? '关闭摄像头' : '开启摄像头'}
           </span>
         </div>
+
+        <div className="flex items-center space-x-2">
+          <Switch
+            checked={isLocked}
+            onCheckedChange={onLockChange}
+            disabled={!isCameraActive}
+          />
+          <span className="text-sm font-medium">
+            {isLocked ? '锁定位置' : '跟踪模式'}
+          </span>
+        </div>
       </div>
 
       <Button

src/components/VideoFeed/VideoDisplay.tsx

@@ -13,6 +13,7 @@ interface VideoDisplayProps {
   // 添加舵机位置的状态
   currentServoX?: number;
   currentServoY?: number;
+  isLocked: boolean;
 }
 
 const VideoDisplay: React.FC<VideoDisplayProps> = ({
@@ -24,7 +25,8 @@ const VideoDisplay: React.FC<VideoDisplayProps> = ({
   currentResult,
   currentServoX = 90,
   currentServoY = 90,
-  debug = false
+  debug = false,
+  isLocked
 }) => {
   const drawRef = useRef<number>();
   const lastDrawnPosition = useRef<{x: number, y: number} | null>(null);
@@ -89,7 +91,7 @@ const VideoDisplay: React.FC<VideoDisplayProps> = ({
         const statusText = [
           `Servo X: ${currentServoX.toFixed(1)}°`,
           `Servo Y: ${currentServoY.toFixed(1)}°`,
-          `Status: ${detectionActive ? 'Tracking' : 'Searching'}`,
+          `Status: ${isLocked ? 'Locked' : (detectionActive ? 'Tracking' : 'Searching')}`,
           ...(detectionActive && currentResult ? [
             `Confidence: ${(currentResult.confidence * 100).toFixed(1)}%`,
             `Size: ${currentResult.size.width.toFixed(0)}x${currentResult.size.height.toFixed(0)}`
@@ -164,7 +166,7 @@ const VideoDisplay: React.FC<VideoDisplayProps> = ({
         cancelAnimationFrame(drawRef.current);
       }
     };
-  }, [canvasRef, currentResult, isActive, debug, currentServoX, currentServoY]);
+  }, [canvasRef, currentResult, isActive, debug, currentServoX, currentServoY, isLocked]);
 
   return (
     <div className="relative w-full h-[360px] bg-gray-900 rounded-lg overflow-hidden">

src/components/VideoFeed/index.tsx

@@ -15,15 +15,19 @@ interface VideoFeedProps {
   debug?: boolean;
   currentServoX?: number;
   currentServoY?: number;
+  isLocked?: boolean;
+  onLockChange?: (locked: boolean) => void;
 }
 
-const VideoFeed: React.FC<VideoFeedProps> = ({ onFaceDetected, debug = false, currentServoX = 90, currentServoY = 90 }) => {
+const VideoFeed: React.FC<VideoFeedProps> = ({ onFaceDetected, debug = false, currentServoX = 90, currentServoY = 90, isLocked = true, onLockChange }) => {
   const [currentResult, setCurrentResult] = useState<FaceDetectionResult | null>(null);
 
   const handleFaceDetected = useCallback((result: FaceDetectionResult, size: { width: number, height: number }) => {
     setCurrentResult(result);
-    onFaceDetected(result, size);
-  }, [onFaceDetected]);
+    if (!isLocked) {
+      onFaceDetected(result, size);
+    }
+  }, [onFaceDetected, isLocked]);
 
   const {
     isCameraActive,
@@ -78,19 +82,22 @@ const VideoFeed: React.FC<VideoFeedProps> = ({ onFaceDetected, debug = false, cu
           onCameraSelect={handleCameraSelect}
           onToggleCamera={toggleCamera}
           onRefresh={fetchCameras}
+          isLocked={isLocked}
+          onLockChange={onLockChange}
         />
 
-<VideoDisplay
-  videoRef={videoRef}
-  canvasRef={canvasRef}
-  isActive={isCameraActive}
-  isLoading={isLoading}
-  hasCameras={cameras.length > 0}
-  currentResult={currentResult}
-  currentServoX={currentServoX} // 从props传入
-  currentServoY={currentServoY} // 从props传入
-  debug={debug}
-/>
+        <VideoDisplay
+          videoRef={videoRef}
+          canvasRef={canvasRef}
+          isActive={isCameraActive}
+          isLoading={isLoading}
+          hasCameras={cameras.length > 0}
+          currentResult={currentResult}
+          currentServoX={currentServoX}
+          currentServoY={currentServoY}
+          debug={debug}
+          isLocked={isLocked}
+        />
 
         {debug && streamInfo && (
           <div className="mt-2 text-sm text-gray-500">