Enhance camera management features: add debug endpoint for camera manager state, implement live camera routes without authentication, and improve logging for camera initialization and status checks. Update Docker configuration to include environment variables for the web app.

management-dashboard-web-app/CAMERA_ROUTE_IMPLEMENTATION.md

@@ -0,0 +1,210 @@
+# 🎥 Camera Route Implementation Guide
+
+This document explains the implementation of the new public camera live view routes (`/camera#/live`) that don't require authentication.
+
+## 🚀 What Was Implemented
+
+### 1. **LiveCameraView Component** (`src/components/LiveCameraView.tsx`)
+- Displays live camera feed without authentication requirements
+- Handles streaming start/stop automatically
+- Provides error handling and loading states
+- Full-screen live view with camera label and status indicator
+
+### 2. **CameraRoute Component** (`src/components/CameraRoute.tsx`)
+- Validates camera route parameters
+- Ensures only valid camera numbers (camera1, camera2, etc.) are accepted
+- Renders the LiveCameraView for valid routes
+
+### 3. **Updated App.tsx**
+- Added route pattern matching for `/camera#/live`
+- Integrated camera routes into existing authentication flow
+- Maintains backward compatibility with existing functionality
+
+### 4. **Test Page** (`public/camera-test.html`)
+- Simple HTML page to test camera routes
+- Provides links to test different camera numbers
+- Explains expected behavior
+
+## 📋 Required Dependencies
+
+The following packages need to be installed to complete the implementation:
+
+```bash
+# Install React Router
+npm install react-router-dom
+
+# Install TypeScript types
+npm install --save-dev @types/react-router-dom
+```
+
+**Note:** Due to permission issues, these packages couldn't be installed automatically. You'll need to resolve the permissions or install them manually.
+
+## 🔧 How to Complete the Setup
+
+### Option 1: Fix Permissions and Install
+```bash
+# Fix node_modules permissions
+sudo chown -R $USER:$USER node_modules
+sudo chmod -R 755 node_modules
+
+# Install dependencies
+npm install
+```
+
+### Option 2: Manual Installation
+```bash
+# Remove problematic node_modules
+rm -rf node_modules
+
+# Reinstall everything
+npm install
+```
+
+### Option 3: Use Yarn Instead
+```bash
+# Install yarn if not available
+npm install -g yarn
+
+# Install dependencies with yarn
+yarn install
+```
+
+## 🧪 Testing the Implementation
+
+### 1. **Start the Development Server**
+```bash
+npm run dev
+```
+
+### 2. **Test Camera Routes**
+Open these URLs in your browser:
+- `http://localhost:5173/camera1/live` - Live view of camera1
+- `http://localhost:5173/camera2/live` - Live view of camera2
+- `http://localhost:5173/camera3/live` - Live view of camera3
+
+### 3. **Use the Test Page**
+Open `http://localhost:5173/camera-test.html` to access the test interface.
+
+### 4. **Expected Behavior**
+- ✅ **Valid routes** should show live camera feed
+- ❌ **Invalid routes** should show error message
+- 🔒 **Protected routes** should redirect to login
+
+## 🏗️ Architecture Details
+
+### Route Pattern
+```
+/camera{number}/live
+```
+- `{number}` must be a positive integer
+- Examples: `/camera1/live`, `/camera2/live`, `/camera10/live`
+- Invalid: `/camera/live`, `/camera0/live`, `/camera-1/live`
+
+### Component Flow
+```
+App.tsx → Route Detection → CameraRoute → LiveCameraView
+```
+
+### API Integration
+The LiveCameraView component integrates with existing camera API endpoints:
+- `POST /cameras/{camera_name}/start-stream` - Start streaming
+- `GET /cameras/{camera_name}/stream` - Get MJPEG stream
+- `POST /cameras/{camera_name}/stop-stream` - Stop streaming
+
+## 🎯 Key Features
+
+### ✅ **Public Access**
+- No authentication required
+- Anyone can view live camera feeds
+- Perfect for monitoring displays
+
+### ✅ **Non-Blocking Streaming**
+- Uses existing CameraStreamer infrastructure
+- Separate camera connections for streaming vs. recording
+- Doesn't interfere with recording operations
+
+### ✅ **Real-time Video**
+- MJPEG format for low latency
+- Automatic stream management
+- Error handling and retry functionality
+
+### ✅ **Responsive Design**
+- Full-screen live view
+- Camera identification labels
+- Live status indicators
+
+## 🔍 Troubleshooting
+
+### Common Issues
+
+#### 1. **Permission Errors During Installation**
+```bash
+# Fix ownership
+sudo chown -R $USER:$USER .
+
+# Fix permissions
+sudo chmod -R 755 .
+```
+
+#### 2. **Camera Stream Not Loading**
+- Check if camera API is running (`http://localhost:8000`)
+- Verify camera configuration in `config.compose.json`
+- Check browser console for errors
+
+#### 3. **Route Not Working**
+- Ensure React app is running
+- Check browser console for routing errors
+- Verify component imports are correct
+
+#### 4. **TypeScript Errors**
+- Install missing type definitions
+- Check import paths
+- Verify component interfaces
+
+### Debug Steps
+1. Check browser console for errors
+2. Verify API endpoints are accessible
+3. Test camera streaming directly via API
+4. Check component rendering in React DevTools
+
+## 🚀 Next Steps
+
+### Immediate
+1. Install required dependencies
+2. Test basic functionality
+3. Verify camera streaming works
+
+### Future Enhancements
+1. **Add React Router** for better routing
+2. **Implement URL-based navigation** between cameras
+3. **Add camera selection interface**
+4. **Implement stream quality controls**
+5. **Add recording controls** (if needed)
+
+### Production Considerations
+1. **Security**: Consider adding rate limiting
+2. **Performance**: Optimize for multiple concurrent viewers
+3. **Monitoring**: Add analytics and usage tracking
+4. **Access Control**: Implement optional authentication if needed
+
+## 📚 Related Documentation
+
+- [Camera API Documentation](../camera-management-api/docs/API_DOCUMENTATION.md)
+- [Streaming Guide](../camera-management-api/docs/guides/STREAMING_GUIDE.md)
+- [Vision System README](VISION_SYSTEM_README.md)
+
+## 🤝 Support
+
+If you encounter issues:
+1. Check the troubleshooting section above
+2. Review browser console for error messages
+3. Verify camera API is running and accessible
+4. Test API endpoints directly with curl or Postman
+
+---
+
+**Implementation Status**: ✅ Components Created | ⚠️ Dependencies Pending | <20><> Ready for Testing
+
+
+
+

management-dashboard-web-app/package-lock.json

@@ -13,19 +13,21 @@
         "@tailwindcss/vite": "^4.1.11",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-router-dom": "^6.28.0",
         "tailwindcss": "^4.1.11"
       },
       "devDependencies": {
         "@eslint/js": "^9.30.1",
         "@types/react": "^19.1.8",
         "@types/react-dom": "^19.1.6",
+        "@types/react-router-dom": "^5.3.3",
         "@vitejs/plugin-react": "^4.6.0",
         "eslint": "^9.30.1",
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
         "globals": "^16.3.0",
         "typescript": "~5.8.3",
-        "typescript-eslint": "^8.35.1",
+        "typescript-eslint": "^8.28.1",
         "vite": "^7.0.4"
       }
     },
@@ -1054,6 +1056,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
+      "integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.19",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
@@ -1709,6 +1720,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1751,6 +1769,29 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -3562,6 +3603,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
+      "integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.30.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
+      "integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.23.0",
+        "react-router": "6.30.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

management-dashboard-web-app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "lint": "eslint",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -15,19 +15,21 @@
     "@tailwindcss/vite": "^4.1.11",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-router-dom": "^6.28.0",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.6.0",
     "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
     "typescript": "~5.8.3",
-    "typescript-eslint": "^8.35.1",
+    "typescript-eslint": "^8.28.1",
     "vite": "^7.0.4"
   }
-}
+}

management-dashboard-web-app/public/camera-test.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Camera Route Test</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .test-links {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
+        }
+
+        .test-links h2 {
+            color: #333;
+            margin-top: 0;
+        }
+
+        .test-links a {
+            display: inline-block;
+            margin: 10px 10px 10px 0;
+            padding: 10px 20px;
+            background-color: #007bff;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            transition: background-color 0.3s;
+        }
+
+        .test-links a:hover {
+            background-color: #0056b3;
+        }
+
+        .info {
+            background: #e7f3ff;
+            border: 1px solid #b3d9ff;
+            border-radius: 5px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+
+        .info h3 {
+            margin-top: 0;
+            color: #0066cc;
+        }
+
+        .note {
+            background: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 5px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>🎥 Camera Route Test</h1>
+
+    <div class="info">
+        <h3>Test the New Camera Routes</h3>
+        <p>This page helps you test the new camera live view routes that don't require authentication.</p>
+        <p><strong>Note:</strong> Make sure the React app is running and the camera API is accessible.</p>
+    </div>
+
+    <div class="test-links">
+        <h2>Test Camera Routes</h2>
+        <p>Click the links below to test different camera routes:</p>
+
+        <a href="/camera1/live" target="_blank">Camera 1 Live View</a>
+        <a href="/camera2/live" target="_blank">Camera 2 Live View</a>
+        <a href="/camera3/live" target="_blank">Camera 3 Live View</a>
+        <a href="/camera10/live" target="_blank">Camera 10 Live View</a>
+    </div>
+
+    <div class="note">
+        <h3>Expected Behavior</h3>
+        <ul>
+            <li>✅ <strong>Valid routes</strong> (like /camera1/live) should show the live camera feed</li>
+            <li>❌ <strong>Invalid routes</strong> (like /camera/live) should show an error message</li>
+            <li>🔒 <strong>Protected routes</strong> (like /) should redirect to login if not authenticated</li>
+        </ul>
+    </div>
+
+    <div class="info">
+        <h3>API Endpoints</h3>
+        <p>The camera routes use these backend API endpoints:</p>
+        <ul>
+            <li><code>POST /cameras/{camera_name}/start-stream</code> - Start streaming</li>
+            <li><code>GET /cameras/{camera_name}/stream</code> - Get MJPEG stream</li>
+            <li><code>POST /cameras/{camera_name}/stop-stream</code> - Stop streaming</li>
+        </ul>
+    </div>
+
+    <script>
+        // Add click tracking for analytics
+        document.querySelectorAll('.test-links a').forEach(link => {
+            link.addEventListener('click', function () {
+                console.log('Testing camera route:', this.href);
+            });
+        });
+    </script>
+</body>
+
+</html>
+
+
+

management-dashboard-web-app/src/App.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { supabase } from './lib/supabase'
 import { Login } from './components/Login'
 import { Dashboard } from './components/Dashboard'
+import { CameraRoute } from './components/CameraRoute'
 
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
@@ -84,6 +85,18 @@ function App() {
     }
   }
 
+  // Check if current route is a camera live route
+  const isCameraLiveRoute = (route: string) => {
+    const cameraRoutePattern = /^\/camera(\d+)\/live$/
+    return cameraRoutePattern.test(route)
+  }
+
+  // Extract camera number from route
+  const getCameraNumber = (route: string) => {
+    const match = route.match(/^\/camera(\d+)\/live$/)
+    return match ? `camera${match[1]}` : null
+  }
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-50">
@@ -107,6 +120,14 @@ function App() {
     )
   }
 
+  // Handle camera live routes (no authentication required)
+  if (isCameraLiveRoute(currentRoute)) {
+    const cameraNumber = getCameraNumber(currentRoute)
+    if (cameraNumber) {
+      return <CameraRoute cameraNumber={cameraNumber} />
+    }
+  }
+
   return (
     <>
       {isAuthenticated ? (

management-dashboard-web-app/src/components/CameraRoute.tsx

@@ -0,0 +1,25 @@
+import { LiveCameraView } from './LiveCameraView'
+
+interface CameraRouteProps {
+    cameraNumber: string
+}
+
+export function CameraRoute({ cameraNumber }: CameraRouteProps) {
+    // Validate camera number (only allow camera1, camera2, etc.)
+    if (!cameraNumber || !/^camera\d+$/.test(cameraNumber)) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gray-900">
+                <div className="text-center text-white">
+                    <h1 className="text-2xl font-bold mb-4">Invalid Camera</h1>
+                    <p className="text-gray-300">Camera number must be in format: camera1, camera2, etc.</p>
+                </div>
+            </div>
+        )
+    }
+
+    return <LiveCameraView cameraName={cameraNumber} />
+}
+
+
+
+

management-dashboard-web-app/src/components/LiveCameraView.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect, useRef } from 'react'
+
+interface LiveCameraViewProps {
+    cameraName: string
+}
+
+export function LiveCameraView({ cameraName }: LiveCameraViewProps) {
+    const [isStreaming, setIsStreaming] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const [loading, setLoading] = useState(true)
+    const imgRef = useRef<HTMLImageElement>(null)
+
+    const API_BASE = import.meta.env.VITE_VISION_API_URL || 'http://localhost:8000'
+
+    useEffect(() => {
+        startStreaming()
+        return () => stopStreaming()
+    }, [cameraName])
+
+    const startStreaming = async () => {
+        try {
+            setLoading(true)
+            setError(null)
+
+            // Start the stream
+            const response = await fetch(`${API_BASE}/cameras/${cameraName}/start-stream`, {
+                method: 'POST'
+            })
+
+            if (response.ok) {
+                setIsStreaming(true)
+                // Set the stream source with timestamp to prevent caching
+                if (imgRef.current) {
+                    imgRef.current.src = `${API_BASE}/cameras/${cameraName}/stream?t=${Date.now()}`
+                }
+            } else {
+                throw new Error(`Failed to start stream: ${response.statusText}`)
+            }
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Failed to start stream'
+            setError(errorMessage)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const stopStreaming = async () => {
+        try {
+            if (isStreaming) {
+                await fetch(`${API_BASE}/cameras/${cameraName}/stop-stream`, {
+                    method: 'POST'
+                })
+                setIsStreaming(false)
+            }
+        } catch (err) {
+            console.error('Error stopping stream:', err)
+        }
+    }
+
+    const handleImageError = () => {
+        setError('Failed to load camera stream')
+    }
+
+    const handleImageLoad = () => {
+        setError(null)
+    }
+
+    if (loading) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gray-900">
+                <div className="text-center text-white">
+                    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto"></div>
+                    <p className="mt-4">Starting camera stream...</p>
+                </div>
+            </div>
+        )
+    }
+
+    if (error) {
+        return (
+            <div className="min-h-screen flex items-center justify-center bg-gray-900">
+                <div className="text-center text-white">
+                    <div className="bg-red-600 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </div>
+                    <h2 className="text-xl font-semibold mb-2">Stream Error</h2>
+                    <p className="text-gray-300 mb-4">{error}</p>
+                    <button
+                        onClick={startStreaming}
+                        className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md"
+                    >
+                        Retry
+                    </button>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="min-h-screen bg-gray-900 flex items-center justify-center">
+            <div className="relative">
+                {/* Camera Label */}
+                <div className="absolute top-4 left-4 z-10">
+                    <div className="bg-black bg-opacity-75 text-white px-3 py-1 rounded-md text-sm font-medium">
+                        {cameraName} - Live View
+                    </div>
+                </div>
+
+                {/* Live Stream */}
+                <img
+                    ref={imgRef}
+                    alt={`Live stream from ${cameraName}`}
+                    className="max-w-full max-h-screen object-contain"
+                    onError={handleImageError}
+                    onLoad={handleImageLoad}
+                />
+
+                {/* Status Indicator */}
+                <div className="absolute bottom-4 right-4 z-10">
+                    <div className="flex items-center space-x-2 bg-black bg-opacity-75 text-white px-3 py-1 rounded-md">
+                        <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                        <span className="text-sm">LIVE</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+
+
+

management-dashboard-web-app/src/components/VisionSystem.tsx

@@ -196,9 +196,10 @@ const CamerasStatus = memo(({
             const hasSerial = !!camera.device_info?.serial_number
 
             // Determine if camera is connected based on status
-            const isConnected = camera.status === 'available' || camera.status === 'connected'
+            const isConnected = camera.status === 'available' || camera.status === 'connected' || camera.status === 'streaming'
             const hasError = camera.status === 'error'
             const statusText = camera.status || 'unknown'
+            const isStreaming = camera.status === 'streaming'
 
             return (
               <div key={cameraName} className="border border-gray-200 rounded-lg p-4">
@@ -209,11 +210,12 @@ const CamerasStatus = memo(({
                       <span className="text-gray-500 text-sm font-normal ml-2">({cameraName})</span>
                     )}
                   </h4>
-                  <div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isConnected ? 'bg-green-100 text-green-800' :
-                    hasError ? 'bg-yellow-100 text-yellow-800' :
-                      'bg-red-100 text-red-800'
+                  <div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isStreaming ? 'bg-blue-100 text-blue-800' :
+                    isConnected ? 'bg-green-100 text-green-800' :
+                      hasError ? 'bg-yellow-100 text-yellow-800' :
+                        'bg-red-100 text-red-800'
                     }`}>
-                    {isConnected ? 'Connected' : hasError ? 'Error' : 'Disconnected'}
+                    {isStreaming ? 'Streaming' : isConnected ? 'Connected' : hasError ? 'Error' : 'Disconnected'}
                   </div>
                 </div>
 
@@ -224,7 +226,8 @@ const CamerasStatus = memo(({
                       hasError ? 'text-yellow-600' :
                         'text-red-600'
                       }`}>
-                      {statusText.charAt(0).toUpperCase() + statusText.slice(1)}
+                      {isStreaming ? 'Streaming' :
+                        statusText.charAt(0).toUpperCase() + statusText.slice(1)}
                     </span>
                   </div>
 
@@ -238,6 +241,16 @@ const CamerasStatus = memo(({
                     </div>
                   )}
 
+                  {isStreaming && (
+                    <div className="flex justify-between">
+                      <span className="text-gray-500">Streaming:</span>
+                      <span className="text-blue-600 font-medium flex items-center">
+                        <div className="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></div>
+                        Live
+                      </span>
+                    </div>
+                  )}
+
                   {hasDeviceInfo && (
                     <>
                       {camera.device_info.model && (
@@ -923,7 +936,7 @@ export function VisionSystem() {
 
       {/* Notification */}
       {notification && (
-        <div className={`fixed top-4 right-4 z-50 p-4 rounded-md shadow-lg ${notification.type === 'success'
+        <div className={`fixed top-4 right-4 z-[999999] p-4 rounded-md shadow-lg ${notification.type === 'success'
           ? 'bg-green-50 border border-green-200 text-green-800'
           : 'bg-red-50 border border-red-200 text-red-800'
           }`}>