feat(video-streaming): add ApiStatusIndicator, PerformanceDashboard, VideoDebugger, and VideoErrorBoundary components

- Implemented ApiStatusIndicator to monitor video API connection status with health check functionality.
- Created PerformanceDashboard for monitoring video streaming performance metrics in development mode.
- Developed VideoDebugger for diagnosing video streaming issues with direct access to test video URLs.
- Added VideoErrorBoundary to handle errors in video streaming components with user-friendly messages and recovery options.
- Introduced utility functions for performance monitoring and thumbnail caching to optimize video streaming operations.
- Added comprehensive tests for video streaming API connectivity and functionality.
This commit is contained in:
Alireza Vaezi
2025-08-06 11:46:25 -04:00
parent 228efb0f55
commit 81828f61cf
38 changed files with 3117 additions and 441 deletions

View File

@@ -56,27 +56,27 @@ When a camera has issues, follow this order:
1. **Test Connection** - Diagnose the problem
```http
POST http://vision:8000/cameras/camera1/test-connection
POST http://localhost:8000/cameras/camera1/test-connection
```
2. **Try Reconnect** - Most common fix
```http
POST http://vision:8000/cameras/camera1/reconnect
POST http://localhost:8000/cameras/camera1/reconnect
```
3. **Restart Grab** - If reconnect doesn't work
```http
POST http://vision:8000/cameras/camera1/restart-grab
POST http://localhost:8000/cameras/camera1/restart-grab
```
4. **Full Reset** - For persistent issues
```http
POST http://vision:8000/cameras/camera1/full-reset
POST http://localhost:8000/cameras/camera1/full-reset
```
5. **Reinitialize** - For cameras that never worked
```http
POST http://vision:8000/cameras/camera1/reinitialize
POST http://localhost:8000/cameras/camera1/reinitialize
```
## Response Format

View File

@@ -38,7 +38,7 @@ When you run the system, you'll see:
### MQTT Status
```http
GET http://vision:8000/mqtt/status
GET http://localhost:8000/mqtt/status
```
**Response:**
@@ -60,7 +60,7 @@ GET http://vision:8000/mqtt/status
### Machine Status
```http
GET http://vision:8000/machines
GET http://localhost:8000/machines
```
**Response:**
@@ -85,7 +85,7 @@ GET http://vision:8000/machines
### System Status
```http
GET http://vision:8000/system/status
GET http://localhost:8000/system/status
```
**Response:**
@@ -125,13 +125,13 @@ Tests all the API endpoints and shows expected responses.
### 4. **Query APIs Directly**
```bash
# Check MQTT status
curl http://vision:8000/mqtt/status
curl http://localhost:8000/mqtt/status
# Check machine states
curl http://vision:8000/machines
curl http://localhost:8000/machines
# Check overall system status
curl http://vision:8000/system/status
curl http://localhost:8000/system/status
```
## 🔧 Configuration

View File

@@ -40,13 +40,13 @@ Open `camera_preview.html` in your browser and click "Start Stream" for any came
### 3. API Usage
```bash
# Start streaming for camera1
curl -X POST http://vision:8000/cameras/camera1/start-stream
curl -X POST http://localhost:8000/cameras/camera1/start-stream
# View live stream (open in browser)
http://vision:8000/cameras/camera1/stream
http://localhost:8000/cameras/camera1/stream
# Stop streaming
curl -X POST http://vision:8000/cameras/camera1/stop-stream
curl -X POST http://localhost:8000/cameras/camera1/stop-stream
```
## 📡 API Endpoints
@@ -150,10 +150,10 @@ The system supports these concurrent operations:
### Example: Concurrent Usage
```bash
# Start streaming
curl -X POST http://vision:8000/cameras/camera1/start-stream
curl -X POST http://localhost:8000/cameras/camera1/start-stream
# Start recording (while streaming continues)
curl -X POST http://vision:8000/cameras/camera1/start-recording \
curl -X POST http://localhost:8000/cameras/camera1/start-recording \
-H "Content-Type: application/json" \
-d '{"filename": "test_recording.avi"}'
@@ -232,8 +232,8 @@ For issues with streaming functionality:
1. Check the system logs: `usda_vision_system.log`
2. Run the test script: `python test_streaming.py`
3. Verify API health: `http://vision:8000/health`
4. Check camera status: `http://vision:8000/cameras`
3. Verify API health: `http://localhost:8000/health`
4. Check camera status: `http://localhost:8000/cameras`
---