implemented Live Cam feature

app/config.py

@@ -28,4 +28,10 @@ class Config:
         'Motorcycle': {'min': 1, 'max': 2},
         'Bus': {'min': 1, 'max': 50},
         'Truck': {'min': 1, 'max': 3}
-    }
+    }
+    
+    # Live Stream Settings
+    LIVE_STREAM_RETRY_ATTEMPTS = 5
+    LIVE_STREAM_RETRY_DELAY = 2  # seconds between reconnection attempts
+    LIVE_STREAM_CONNECTION_TIMEOUT = 10  # seconds to wait for initial connection
+    LIVE_STREAM_BUFFER_SIZE = 1  # minimize latency by keeping buffer small

app/routes/setup.py

@@ -4,7 +4,7 @@ from datetime import datetime
 import os
 import uuid
 from app.services.firebase_service import FirebaseService
-from app.services.processing_service import start_processing, get_job_status
+from app.services.processing_service import start_processing, get_job_status, stop_processing
 from app.config import Config
 import cv2
 import base64
@@ -144,6 +144,7 @@ def start_processing_route():
     camera_data = cameras.get(camera_role, {})
     video_path = camera_data.get('video_path')
     line_points = camera_data.get('line_points')
+    is_live_stream = camera_data.get('is_live_stream', False)
     
     if not all([session_id, video_path, line_points]):
         return jsonify({'error': f'Missing configuration for {camera_role} camera'}), 400
@@ -169,7 +170,8 @@ def start_processing_route():
             line_points=line_points,
             location=location,
             video_start_time=video_start_time,
-            camera_role=camera_role
+            camera_role=camera_role,
+            is_live_stream=is_live_stream
         )
         
         return jsonify({
@@ -177,12 +179,113 @@ def start_processing_route():
             'session_id': session_id,
             'camera_role': camera_role,
             'status': job.status,
+            'is_live_stream': is_live_stream,
             'message': f'Processing started for {camera_role} camera'
         })
         
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 
+
+@setup_bp.route('/configure-stream', methods=['POST'])
+def configure_stream():
+    """Configure a live camera stream (RTSP/HTTP)"""
+    try:
+        data = request.get_json()
+        stream_url = data.get('stream_url')
+        camera_role = data.get('camera_role', 'ENTRY')
+        
+        if not stream_url:
+            return jsonify({'error': 'Stream URL is required'}), 400
+        
+        # Validate URL format
+        if not stream_url.lower().startswith(('rtsp://', 'http://', 'https://', 'rtmp://')):
+            return jsonify({'error': 'Invalid stream URL. Must start with rtsp://, http://, https://, or rtmp://'}), 400
+        
+        print(f"Connecting to stream: {stream_url} for {camera_role} camera")
+        
+        # Attempt to connect and capture first frame
+        cap = cv2.VideoCapture(stream_url)
+        cap.set(cv2.CAP_PROP_BUFFERSIZE, Config.LIVE_STREAM_BUFFER_SIZE)
+        
+        if not cap.isOpened():
+            return jsonify({'error': 'Cannot connect to stream. Please check the URL.'}), 400
+        
+        # Try to read a frame with timeout
+        ret, frame = cap.read()
+        cap.release()
+        
+        if not ret or frame is None:
+            return jsonify({'error': 'Connected but cannot read from stream.'}), 400
+        
+        # Create/get session ID
+        session_id = session.get('current_session')
+        if not session_id:
+            session_id = str(uuid.uuid4())
+            session['current_session'] = session_id
+        
+        # Initialize camera storage if needed
+        if 'cameras' not in session:
+            session['cameras'] = {'ENTRY': {}, 'EXIT': {}}
+        
+        # Store stream configuration
+        session['cameras'][camera_role]['video_path'] = stream_url
+        session['cameras'][camera_role]['is_live_stream'] = True
+        session['cameras'][camera_role]['has_video'] = True
+        session.modified = True
+        
+        # Prepare frame for line drawing
+        frame = cv2.resize(frame, (Config.FRAME_WIDTH, Config.FRAME_HEIGHT))
+        _, buffer = cv2.imencode('.jpg', frame)
+        frame_base64 = base64.b64encode(buffer).decode('utf-8')
+        
+        # Get existing line points if any
+        line_points = session['cameras'][camera_role].get('line_points')
+        
+        print(f"Stream configured successfully for {camera_role} camera")
+        return jsonify({
+            'success': True,
+            'session_id': session_id,
+            'camera_role': camera_role,
+            'frame': frame_base64,
+            'width': Config.FRAME_WIDTH,
+            'height': Config.FRAME_HEIGHT,
+            'line_points': line_points,
+            'is_live_stream': True
+        })
+        
+    except Exception as e:
+        print(f"Stream configuration error: {str(e)}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': str(e)}), 500
+
+
+@setup_bp.route('/stop-processing', methods=['POST'])
+def stop_processing_route():
+    """Stop a running processing job"""
+    try:
+        session_id = session.get('current_session')
+        data = request.get_json()
+        camera_role = data.get('camera_role')  # None = stop all
+        
+        if not session_id:
+            return jsonify({'error': 'No active session'}), 400
+        
+        stopped = stop_processing(session_id, camera_role)
+        
+        if stopped:
+            return jsonify({
+                'success': True,
+                'message': f'Stop signal sent for {camera_role or "all cameras"}'
+            })
+        else:
+            return jsonify({'error': 'No active processing job found'}), 404
+            
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
 @setup_bp.route('/processing-status/<session_id>')
 def processing_status(session_id):
     """Get the status of a processing job"""

app/services/processing_service.py

@@ -38,6 +38,7 @@ class ProcessingStatus(str, Enum):
     PENDING = 'pending'
     PROCESSING = 'processing'
     COMPLETED = 'completed'
+    STOPPED = 'stopped'
     ERROR = 'error'
 
 
@@ -47,6 +48,12 @@ class CameraRole(str, Enum):
     EXIT = 'EXIT'
 
 
+class VideoSource(str, Enum):
+    """Video input source types."""
+    FILE = 'file'
+    LIVE_STREAM = 'live_stream'
+
+
 @dataclass
 class ProcessingConfig:
     """Configuration constants for video processing."""
@@ -107,6 +114,10 @@ class ProcessingJob:
     progress: int = 0
     error: Optional[str] = None
     thread: Optional[threading.Thread] = None
+    # Live stream support
+    is_live_stream: bool = False
+    should_stop: bool = False
+    frames_processed: int = 0
     
     def to_dict(self) -> dict:
         """Convert job to dictionary for serialization."""
@@ -116,9 +127,15 @@ class ProcessingJob:
             'progress': self.progress,
             'error': self.error,
             'location': self.location,
-            'camera_role': self.camera_role
+            'camera_role': self.camera_role,
+            'is_live_stream': self.is_live_stream,
+            'frames_processed': self.frames_processed
         }
     
+    def stop(self) -> None:
+        """Signal the job to stop processing."""
+        self.should_stop = True
+    
     @property
     def line_points_int(self) -> Tuple[Tuple[int, int], Tuple[int, int]]:
         """Get line points as integer tuples."""
@@ -138,18 +155,20 @@ def start_processing(
     line_points: List[List[float]],
     location: str,
     video_start_time: datetime = None,
-    camera_role: str = CameraRole.ENTRY.value
+    camera_role: str = CameraRole.ENTRY.value,
+    is_live_stream: bool = False
 ) -> ProcessingJob:
     """
     Start video processing in a background thread.
     
     Args:
         session_id: Unique identifier for the session
-        video_path: Path to the video file
+        video_path: Path to the video file or stream URL
         line_points: Counting line coordinates [[x1,y1], [x2,y2]]
         location: Location name for the session
         video_start_time: Timestamp for the video start
         camera_role: 'ENTRY' or 'EXIT' camera designation
+        is_live_stream: Whether the source is a live stream (RTSP/HTTP)
         
     Returns:
         ProcessingJob instance for tracking progress
@@ -157,6 +176,10 @@ def start_processing(
     # Clear stale frames from queue
     _clear_frame_queue(camera_role)
     
+    # Auto-detect live stream if not explicitly set
+    if not is_live_stream:
+        is_live_stream = _is_live_stream(video_path)
+    
     # Create job
     job = ProcessingJob(
         session_id=session_id,
@@ -164,7 +187,8 @@ def start_processing(
         line_points=line_points,
         location=location,
         camera_role=camera_role,
-        video_start_time=video_start_time or datetime.now()
+        video_start_time=video_start_time or datetime.now(),
+        is_live_stream=is_live_stream
     )
     
     # Store job in global registry
@@ -184,6 +208,44 @@ def start_processing(
     return job
 
 
+def stop_processing(session_id: str, camera_role: str = None) -> bool:
+    """
+    Stop a running processing job.
+    
+    Args:
+        session_id: The session ID to stop
+        camera_role: Specific camera to stop, or None to stop all
+        
+    Returns:
+        True if job(s) were signaled to stop, False if not found
+    """
+    if session_id not in processing_jobs:
+        return False
+    
+    stopped = False
+    jobs = processing_jobs[session_id]
+    
+    if camera_role:
+        # Stop specific camera
+        if camera_role in jobs:
+            jobs[camera_role].stop()
+            stopped = True
+    else:
+        # Stop all cameras in session
+        for job in jobs.values():
+            job.stop()
+            stopped = True
+    
+    return stopped
+
+
+def _is_live_stream(video_path: str) -> bool:
+    """Check if the video source is a live stream URL."""
+    if not video_path:
+        return False
+    return video_path.lower().startswith(('rtsp://', 'http://', 'https://', 'rtmp://'))
+
+
 def get_job_status(session_id: str) -> Optional[Dict[str, dict]]:
     """
     Get the status of all processing jobs for a session.
@@ -226,15 +288,21 @@ def _run_processing_job(job: ProcessingJob) -> None:
         session_data = SessionData(job.session_id, job.location)
         session_data.line_coordinates = job.line_points
         
-        # Process the video
-        _process_video(processor, firebase, job, session_data)
+        # Process based on source type
+        if job.is_live_stream:
+            _process_live_stream(processor, firebase, job, session_data)
+        else:
+            _process_video(processor, firebase, job, session_data)
         
         # Save final results
         firebase.save_session(session_data, camera_role=job.camera_role)
         
-        # Mark complete
-        job.status = ProcessingStatus.COMPLETED.value
-        job.progress = 100
+        # Mark complete (or stopped for live streams)
+        if job.should_stop:
+            job.status = ProcessingStatus.STOPPED.value
+        else:
+            job.status = ProcessingStatus.COMPLETED.value
+            job.progress = 100
         
         _emit_status_update(job)
         _emit_processing_complete(job, session_data.get_statistics())
@@ -336,6 +404,170 @@ def _process_video(
     return output_path
 
 
+def _process_live_stream(
+    processor: VideoProcessor,
+    firebase: FirebaseService,
+    job: ProcessingJob,
+    session_data: SessionData
+) -> None:
+    """
+    Process live stream continuously until stopped.
+    
+    Key differences from file processing:
+    - No total_frames (runs indefinitely)
+    - Handles reconnection on failure
+    - Runs until job.should_stop is True
+    - No video file output (streaming only)
+    
+    Args:
+        processor: VideoProcessor instance for detection
+        firebase: FirebaseService for persistence
+        job: Current processing job
+        session_data: Session data container
+    """
+    import time
+    
+    cap = None
+    retry_count = 0
+    max_retries = Config.LIVE_STREAM_RETRY_ATTEMPTS
+    retry_delay = Config.LIVE_STREAM_RETRY_DELAY
+    
+    # Initialize tracker and annotators
+    fps = 30.0  # Default for live streams
+    tracker = _create_tracker(fps)
+    annotators = _create_annotators()
+    tracking = TrackingState()
+    
+    frame_queue = frame_queues.get(job.camera_role)
+    frame_idx = 0
+    last_event_count = 0
+    last_save_time = datetime.now()
+    
+    print(f"Starting live stream processing for {job.camera_role}: {job.video_path}")
+    
+    try:
+        while not job.should_stop:
+            # Connect/reconnect to stream
+            if cap is None or not cap.isOpened():
+                if retry_count >= max_retries:
+                    raise ConnectionError(f"Lost connection to stream after {max_retries} retries")
+                
+                if retry_count > 0:
+                    print(f"Reconnecting to stream (attempt {retry_count + 1}/{max_retries})...")
+                    _emit_status_update(job)  # Notify client of reconnection attempt
+                    time.sleep(retry_delay)
+                
+                cap = cv2.VideoCapture(job.video_path)
+                cap.set(cv2.CAP_PROP_BUFFERSIZE, Config.LIVE_STREAM_BUFFER_SIZE)
+                
+                if not cap.isOpened():
+                    retry_count += 1
+                    cap = None
+                    continue
+                
+                # Successfully connected
+                actual_fps = cap.get(cv2.CAP_PROP_FPS)
+                if actual_fps > 0:
+                    fps = actual_fps
+                    tracker = _create_tracker(fps)
+                
+                retry_count = 0
+                print(f"Connected to live stream at {fps:.1f} FPS")
+            
+            # Read frame
+            ret, frame = cap.read()
+            if not ret:
+                retry_count += 1
+                cap.release()
+                cap = None
+                continue
+            
+            # Reset retry count on successful read
+            retry_count = 0
+            
+            # Process frame
+            annotated_frame = _process_single_frame(
+                frame=frame,
+                processor=processor,
+                tracker=tracker,
+                annotators=annotators,
+                tracking=tracking,
+                job=job,
+                session_data=session_data,
+                frame_idx=frame_idx,
+                fps=fps
+            )
+            
+            # Stream frame for live display
+            _stream_frame(frame_queue, annotated_frame, frame_idx)
+            
+            # Update job stats
+            job.frames_processed = frame_idx
+            
+            # Periodic updates (every 10 frames)
+            if frame_idx % PROC_CONFIG.PROGRESS_UPDATE_INTERVAL == 0:
+                last_event_count = _handle_live_stream_updates(
+                    job=job,
+                    session_data=session_data,
+                    firebase=firebase,
+                    frame_idx=frame_idx,
+                    last_event_count=last_event_count
+                )
+                
+                # Save to Firebase periodically (every 30 seconds)
+                if (datetime.now() - last_save_time).total_seconds() > 30:
+                    firebase.save_session(session_data, update_events=False, camera_role=job.camera_role)
+                    last_save_time = datetime.now()
+            
+            frame_idx += 1
+            
+    finally:
+        if cap:
+            cap.release()
+        print(f"Live stream processing stopped for {job.camera_role}. Frames processed: {frame_idx}")
+
+
+def _handle_live_stream_updates(
+    job: ProcessingJob,
+    session_data: SessionData,
+    firebase: FirebaseService,
+    frame_idx: int,
+    last_event_count: int
+) -> int:
+    """
+    Handle periodic updates for live stream processing.
+    
+    Returns:
+        Updated event count
+    """
+    # For live streams, emit a "live" status instead of progress percentage
+    socketio.emit(
+        'processing_progress',
+        {
+            'session_id': job.session_id,
+            'progress': -1,  # -1 indicates live stream
+            'camera_role': job.camera_role,
+            'frames_processed': frame_idx,
+            'is_live': True
+        },
+        room=job.session_id,
+        namespace='/'
+    )
+    
+    # Check for new events
+    current_count = len(session_data.events)
+    if current_count > last_event_count:
+        # Emit new events
+        for event in session_data.events[last_event_count:]:
+            _emit_vehicle_event(job, event)
+            firebase.save_event(job.session_id, event)
+        
+        # Emit updated statistics
+        _emit_statistics_update(job, session_data.get_statistics())
+    
+    return current_count
+
+
 def _process_single_frame(
     frame: np.ndarray,
     processor: VideoProcessor,

app/static/css/style.css

@@ -296,6 +296,15 @@ body {
     background-color: #16a34a;
 }
 
+.btn-danger {
+    background-color: var(--danger-color);
+    color: white;
+}
+
+.btn-danger:hover {
+    background-color: #dc2626;
+}
+
 .btn-outline {
     background-color: transparent;
     border: 2px solid var(--border-color);
@@ -1400,6 +1409,42 @@ body {
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
 
+/* Source Type Toggle */
+.source-toggle {
+    display: flex;
+    background-color: var(--background-color);
+    padding: 0.25rem;
+    border-radius: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.toggle-btn {
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.375rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+}
+
+.toggle-btn:hover {
+    color: var(--text-primary);
+}
+
+.toggle-btn.active {
+    background-color: #ffffff;
+    color: var(--primary-color);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
 /* Config Card */
 .source-config-card {
     background-color: #f8fafc;
@@ -1611,6 +1656,12 @@ body {
     color: var(--primary-color);
 }
 
+.camera-status.live {
+    color: var(--danger-color);
+    font-weight: 600;
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
 .camera-preview-card .video-wrapper {
     min-height: 280px;
     aspect-ratio: 3/2;

app/static/js/dashboard.js

@@ -19,9 +19,15 @@ const PROCESSING_STATUS = Object.freeze({
     PENDING: 'pending',
     PROCESSING: 'processing',
     COMPLETED: 'completed',
+    STOPPED: 'stopped',
     ERROR: 'error'
 });
 
+const SOURCE_TYPE = Object.freeze({
+    FILE: 'file',
+    STREAM: 'stream'
+});
+
 const CONFIG = Object.freeze({
     MAX_LOG_EVENTS: 50,
     NOTIFICATION_DURATION_MS: 5000,
@@ -88,7 +94,8 @@ const createCameraConfig = () => ({
     hasLine: false,
     videoName: '',
     processingStatus: PROCESSING_STATUS.PENDING,
-    progress: 0
+    progress: 0,
+    isLiveStream: false
 });
 
 /**
@@ -488,6 +495,8 @@ class WorkbenchManager {
     constructor() {
         this.currentCameraRole = CAMERA_ROLES.ENTRY;
         this.sessionCompleted = false;
+        this.sourceType = SOURCE_TYPE.FILE;  // Current source type selection
+        this.hasLiveStreams = false;  // Track if any camera is using live stream
 
         // LineDrawer instances per camera
         this.lineDrawers = {
@@ -538,13 +547,21 @@ class WorkbenchManager {
             videoUpload: getElement('video-upload'),
             fileName: getElement('file-name-display'),
             startBtn: getElement('btn-start-analysis'),
+            stopBtn: getElement('btn-stop-analysis'),
             clearLineBtn: getElement('clear-line-btn'),
             configStatusText: getElement('config-status-text'),
             configStatusDot: getElement('config-status-dot'),
             processingStatus: getElement('processing-status'),
             locationInput: getElement('location-input'),
             modeLabel: getElement('mode-label'),
-            liveBadge: getElement('live-badge')
+            liveBadge: getElement('live-badge'),
+            // Source type elements
+            sourceFileBtn: getElement('source-file-btn'),
+            sourceStreamBtn: getElement('source-stream-btn'),
+            fileSourceConfig: getElement('file-source-config'),
+            streamSourceConfig: getElement('stream-source-config'),
+            streamUrlInput: getElement('stream-url-input'),
+            streamStatusDisplay: getElement('stream-status-display')
         };
     }
 
@@ -559,7 +576,7 @@ class WorkbenchManager {
     // -------------------------------------------------------------------------
 
     setupEventListeners() {
-        const { videoUpload, clearLineBtn, startBtn } = this.globalElements;
+        const { videoUpload, clearLineBtn, startBtn, stopBtn } = this.globalElements;
 
         if (videoUpload) {
             videoUpload.addEventListener('change', (e) => this.handleVideoUpload(e));
@@ -570,6 +587,132 @@ class WorkbenchManager {
         if (startBtn) {
             startBtn.addEventListener('click', () => this.startAnalysis());
         }
+        if (stopBtn) {
+            stopBtn.addEventListener('click', () => this.stopAnalysis());
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Source Type Management
+    // -------------------------------------------------------------------------
+
+    /**
+     * Switch between file upload and live stream source types
+     * @param {string} type - 'file' or 'stream'
+     */
+    setSourceType(type) {
+        this.sourceType = type;
+        const { sourceFileBtn, sourceStreamBtn, fileSourceConfig, streamSourceConfig } = this.globalElements;
+
+        if (type === SOURCE_TYPE.FILE) {
+            sourceFileBtn?.classList.add('active');
+            sourceStreamBtn?.classList.remove('active');
+            fileSourceConfig?.classList.remove('hidden');
+            streamSourceConfig?.classList.add('hidden');
+        } else {
+            sourceFileBtn?.classList.remove('active');
+            sourceStreamBtn?.classList.add('active');
+            fileSourceConfig?.classList.add('hidden');
+            streamSourceConfig?.classList.remove('hidden');
+        }
+
+        feather.replace();
+    }
+
+    /**
+     * Connect to a live stream and capture first frame
+     */
+    async connectStream() {
+        const { streamUrlInput, streamStatusDisplay } = this.globalElements;
+        const streamUrl = streamUrlInput?.value?.trim();
+
+        if (!streamUrl) {
+            alert('Please enter a stream URL');
+            return;
+        }
+
+        // Validate URL format
+        if (!streamUrl.match(/^(rtsp|http|https|rtmp):\/\//i)) {
+            alert('Invalid URL. Must start with rtsp://, http://, https://, or rtmp://');
+            return;
+        }
+
+        streamStatusDisplay.textContent = 'Connecting...';
+
+        try {
+            const response = await fetch('/setup/configure-stream', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    stream_url: streamUrl,
+                    camera_role: this.currentCameraRole
+                })
+            });
+            const data = await response.json();
+
+            if (data.success) {
+                const config = this.cameraConfigs[this.currentCameraRole];
+                config.hasVideo = true;
+                config.videoName = 'Live Stream';
+                config.isLiveStream = true;
+                this.hasLiveStreams = true;
+
+                streamStatusDisplay.textContent = 'Connected';
+                streamStatusDisplay.style.color = 'var(--success-color)';
+
+                // Load the captured frame for line drawing
+                await this.loadStreamFrame(this.currentCameraRole, data.frame, data.line_points);
+                this.updateStartButtonState();
+            } else {
+                streamStatusDisplay.textContent = data.error || 'Connection failed';
+                streamStatusDisplay.style.color = 'var(--danger-color)';
+            }
+        } catch (error) {
+            streamStatusDisplay.textContent = 'Connection error';
+            streamStatusDisplay.style.color = 'var(--danger-color)';
+            console.error('Stream connection error:', error);
+        }
+    }
+
+    /**
+     * Load a stream frame for line drawing
+     */
+    async loadStreamFrame(role, frameBase64, existingLinePoints) {
+        const camEls = this.cameraElements[role];
+        const config = this.cameraConfigs[role];
+
+        // Update visibility
+        if (camEls.placeholder) camEls.placeholder.style.display = 'none';
+        if (camEls.canvas) camEls.canvas.style.display = 'block';
+        if (camEls.liveFeed) camEls.liveFeed.classList.add('hidden');
+
+        // Create LineDrawer
+        const canvasId = `${role.toLowerCase()}-canvas`;
+        this.lineDrawers[role] = new LineDrawer(canvasId);
+        await this.lineDrawers[role].loadImage('data:image/jpeg;base64,' + frameBase64);
+
+        // Restore existing line if present
+        if (existingLinePoints) {
+            this.lineDrawers[role].setLinePoints(existingLinePoints);
+            config.hasLine = true;
+            this.updateCameraStatusText(role);
+            this.updateStartButtonState();
+        }
+
+        // Set up line completion callback
+        this.lineDrawers[role].onLineComplete = (points) => {
+            config.hasLine = true;
+            this.updateCameraStatusText(role);
+            this.updateStartButtonState();
+            this.saveLine(role, points);
+
+            if (this.currentCameraRole === role) {
+                this.globalElements.clearLineBtn.disabled = false;
+                this.updateSidebarStatus();
+            }
+        };
+
+        this.updateCameraStatusText(role);
     }
 
     // -------------------------------------------------------------------------
@@ -639,21 +782,21 @@ class WorkbenchManager {
         const statusEl = this.cameraElements[role].statusText;
         if (!statusEl) return;
 
-        const statusConfig = {
-            [PROCESSING_STATUS.PROCESSING]: {
-                text: `Processing ${config.progress}%`,
-                className: 'camera-status processing'
-            },
-            [PROCESSING_STATUS.COMPLETED]: {
-                text: 'Completed',
-                className: 'camera-status completed'
+        // Handle processing status
+        if (config.processingStatus === PROCESSING_STATUS.PROCESSING) {
+            if (config.isLiveStream || config.progress === -1) {
+                statusEl.textContent = 'LIVE';
+                statusEl.className = 'camera-status live';
+            } else {
+                statusEl.textContent = `Processing ${config.progress}%`;
+                statusEl.className = 'camera-status processing';
             }
-        };
-
-        if (statusConfig[config.processingStatus]) {
-            const { text, className } = statusConfig[config.processingStatus];
-            statusEl.textContent = text;
-            statusEl.className = className;
+        } else if (config.processingStatus === PROCESSING_STATUS.COMPLETED) {
+            statusEl.textContent = 'Completed';
+            statusEl.className = 'camera-status completed';
+        } else if (config.processingStatus === PROCESSING_STATUS.STOPPED) {
+            statusEl.textContent = 'Stopped';
+            statusEl.className = 'camera-status completed';
         } else if (config.hasLine) {
             statusEl.textContent = 'Ready';
             statusEl.className = 'camera-status ready';
@@ -669,10 +812,16 @@ class WorkbenchManager {
     updateCameraProgress(role) {
         const config = this.cameraConfigs[role];
         const { progressBar, progressText } = this.cameraElements[role];
-        const progress = config.progress || 0;
 
-        if (progressBar) progressBar.style.width = `${progress}%`;
-        if (progressText) progressText.textContent = `${progress}%`;
+        // Handle live stream display
+        if (config.isLiveStream || config.progress === -1) {
+            if (progressBar) progressBar.style.width = '100%';
+            if (progressText) progressText.textContent = 'LIVE';
+        } else {
+            const progress = config.progress || 0;
+            if (progressBar) progressBar.style.width = `${progress}%`;
+            if (progressText) progressText.textContent = `${progress}%`;
+        }
     }
 
     // -------------------------------------------------------------------------
@@ -704,7 +853,14 @@ class WorkbenchManager {
         const config = this.cameraConfigs[data.camera_role];
         if (!config) return;
 
-        config.progress = data.progress;
+        // Handle live stream progress differently
+        if (data.is_live || data.progress === -1) {
+            config.progress = -1;  // -1 indicates live stream
+            config.isLiveStream = true;
+        } else {
+            config.progress = data.progress;
+        }
+
         if (config.processingStatus === PROCESSING_STATUS.PENDING) {
             config.processingStatus = PROCESSING_STATUS.PROCESSING;
         }
@@ -719,11 +875,24 @@ class WorkbenchManager {
 
     checkAllCompleted() {
         const allDone = Object.values(CAMERA_ROLES).every(
-            role => this.cameraConfigs[role].processingStatus === PROCESSING_STATUS.COMPLETED
+            role => this.cameraConfigs[role].processingStatus === PROCESSING_STATUS.COMPLETED ||
+                   this.cameraConfigs[role].processingStatus === PROCESSING_STATUS.STOPPED
         );
 
+        const anyProcessing = Object.values(CAMERA_ROLES).some(
+            role => this.cameraConfigs[role].processingStatus === PROCESSING_STATUS.PROCESSING
+        );
+
+        // Show/hide stop button based on processing state and live streams
+        if (anyProcessing && this.hasLiveStreams) {
+            this.globalElements.stopBtn?.classList.remove('hidden');
+        } else {
+            this.globalElements.stopBtn?.classList.add('hidden');
+        }
+
         if (allDone) {
             this.sessionCompleted = true;
+            this.hasLiveStreams = false;
 
             // Disable continue mode
             if (window.dashboardManager) {
@@ -732,6 +901,7 @@ class WorkbenchManager {
 
             this.globalElements.startBtn.innerHTML = `<i data-feather="check"></i> Analysis Complete`;
             this.globalElements.startBtn.disabled = true;
+            this.globalElements.stopBtn?.classList.add('hidden');
             this.globalElements.processingStatus.classList.add('hidden');
             feather.replace();
         }
@@ -922,6 +1092,13 @@ class WorkbenchManager {
                 if (data.success) {
                     if (!sessionId) sessionId = data.session_id;
                     this.cameraConfigs[role].processingStatus = PROCESSING_STATUS.PROCESSING;
+                    
+                    // Track if this is a live stream
+                    if (data.is_live_stream) {
+                        this.cameraConfigs[role].isLiveStream = true;
+                        this.hasLiveStreams = true;
+                    }
+                    
                     this.updateCameraStatusText(role);
                     this.setAnalysisMode(true, role);
                 } else {
@@ -929,6 +1106,11 @@ class WorkbenchManager {
                 }
             }
 
+            // Show stop button for live streams
+            if (this.hasLiveStreams) {
+                this.globalElements.stopBtn?.classList.remove('hidden');
+            }
+
             // Join socket room
             if (window.dashboardManager?.socket && sessionId) {
                 window.dashboardManager.sessionId = sessionId;
@@ -963,6 +1145,54 @@ class WorkbenchManager {
         this.globalElements.modeLabel.textContent = 'Live Analysis';
     }
 
+    /**
+     * Stop all running analysis (for live streams)
+     */
+    async stopAnalysis() {
+        const { stopBtn, startBtn, processingStatus } = this.globalElements;
+
+        stopBtn.disabled = true;
+        stopBtn.innerHTML = `<i data-feather="loader" class="spin"></i> Stopping...`;
+        feather.replace();
+
+        try {
+            const response = await fetch('/setup/stop-processing', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({})  // Stop all cameras
+            });
+            const data = await response.json();
+
+            if (data.success) {
+                console.log('Stop signal sent successfully');
+                
+                // Update UI - the actual completion will come via socket events
+                Object.values(CAMERA_ROLES).forEach(role => {
+                    const config = this.cameraConfigs[role];
+                    if (config.processingStatus === PROCESSING_STATUS.PROCESSING) {
+                        config.processingStatus = PROCESSING_STATUS.STOPPED;
+                        this.updateCameraStatusText(role);
+                    }
+                });
+
+                this.sessionCompleted = true;
+                this.hasLiveStreams = false;
+                
+                stopBtn.classList.add('hidden');
+                startBtn.innerHTML = `<i data-feather="check"></i> Analysis Stopped`;
+                startBtn.disabled = true;
+                processingStatus.classList.add('hidden');
+            }
+        } catch (error) {
+            console.error('Failed to stop analysis:', error);
+            alert('Failed to stop analysis: ' + error.message);
+        }
+
+        stopBtn.disabled = false;
+        stopBtn.innerHTML = `<i data-feather="square"></i> Stop Analysis`;
+        feather.replace();
+    }
+
     // -------------------------------------------------------------------------
     // Session Management
     // -------------------------------------------------------------------------

app/templates/dashboard.html

@@ -38,7 +38,20 @@
             </div>
 
             <div class="config-group mt-2">
-                <label class="form-label">Video Source</label>
+                <label class="form-label">Source Type</label>
+                <div class="source-toggle">
+                    <button class="toggle-btn active" id="source-file-btn" onclick="window.workbenchManager?.setSourceType('file')">
+                        <i data-feather="upload"></i> File
+                    </button>
+                    <button class="toggle-btn" id="source-stream-btn" onclick="window.workbenchManager?.setSourceType('stream')">
+                        <i data-feather="video"></i> Live Stream
+                    </button>
+                </div>
+            </div>
+
+            <!-- File Upload (shown when source type is 'file') -->
+            <div class="config-group" id="file-source-config">
+                <label class="form-label">Video File</label>
                 <input type="file" id="video-upload" accept="video/*" class="form-input" style="display: none;">
                 <button class="btn btn-outline btn-full" onclick="document.getElementById('video-upload').click()">
                     <i data-feather="upload"></i> Upload Video File
@@ -46,10 +59,20 @@
                 <div id="file-name-display" class="file-name text-truncate mt-1">No file selected</div>
             </div>
 
+            <!-- Live Stream URL (shown when source type is 'stream') -->
+            <div class="config-group hidden" id="stream-source-config">
+                <label class="form-label">Stream URL</label>
+                <input type="text" id="stream-url-input" class="form-input" placeholder="rtsp://192.168.1.100:554/stream">
+                <button class="btn btn-outline btn-full mt-1" id="btn-connect-stream" onclick="window.workbenchManager?.connectStream()">
+                    <i data-feather="link"></i> Connect to Stream
+                </button>
+                <div id="stream-status-display" class="file-name text-truncate mt-1">Not connected</div>
+            </div>
+
             <div class="config-group">
                 <label class="form-label">Instructions</label>
                 <ul class="instruction-list">
-                    <li>1. Upload a video.</li>
+                    <li>1. Select source type and configure.</li>
                     <li>2. Draw the crossing line on the canvas.</li>
                     <li>3. Repeat for other camera.</li>
                 </ul>
@@ -63,6 +86,9 @@
             <button id="btn-start-analysis" class="btn btn-primary btn-full btn-lg" disabled>
                 <i data-feather="play"></i> Start Analysis
             </button>
+            <button id="btn-stop-analysis" class="btn btn-danger btn-full btn-lg hidden mt-2">
+                <i data-feather="square"></i> Stop Analysis
+            </button>
             <div id="processing-status" class="hidden mt-2">
                 <div class="dual-progress">
                     <div class="progress-item">