Video Streaming Service - Portfolio Overview

Project Summary

Designed and developed a real-time video streaming system that delivers live camera feeds from distributed field sites to a centralized monitoring dashboard. The system supports multiple camera types with unified control interfaces, NAT gateway traversal for remote access, and automatic fallback mechanisms for stream continuity.

Served as sole developer responsible for full-stack implementation including backend streaming infrastructure, WebSocket communication layer, PTZ camera control protocol integration, and frontend video playback components.

Most Bosch

Cameras Supported

MJPEG or HLS

~0.8s latency

Over NAT & Multiple Hops

RCP+

PTZ Protocol

Virtual Alarm

HANDS-OFF CONFIG

Station Info (Cameras ids, creds, etc.) fetched from database

Updated by end-user of the OHVD system

System Architecture

High-Level Design: Browser clients connect to a Flask application which orchestrates camera streams and PTZ control. Video frames are captured via RTSP, processed, and transmitted over WebSocket for real-time display. The system handles NAT routing for cameras deployed across multiple remote network segments.

flowchart LR subgraph CLIENT["Browser Client"] UI["Web Interface
ES6 + jQuery + Socket.io"] end subgraph BACKEND["Flask Application"] STREAM["Stream
Orchestrator"] PTZ["PTZ
Controller"] CONFIG["Configuration
Manager"] end subgraph PROCESSING["Video Processing"] CAPTURE["RTSP
Capture"] ENCODE["Frame
Encoding"] WS["WebSocket
Server"] end subgraph CAMERAS["Field Cameras"] VCA["Video Analytics
Cameras"] PTZC["PTZ
Cameras"] end subgraph NETWORK["Network Layer"] NAT["NAT
Gateways"] end UI <-->|"HTTP/WebSocket"| BACKEND STREAM --> CAPTURE CAPTURE --> ENCODE ENCODE --> WS WS -->|"Real-time Frames"| UI PTZ -->|"RCP+ Commands"| PTZC VCA -->|"RTSP"| NAT PTZC -->|"RTSP"| NAT NAT -->|"Routed Streams"| CAPTURE style UI fill:#e1f5ff style STREAM fill:#667eea,color:#fff style PTZ fill:#6f42c1,color:#fff style CAPTURE fill:#fd7e14,color:#fff style ENCODE fill:#fd7e14,color:#fff style WS fill:#28a745,color:#fff style VCA fill:#d4edda style PTZC fill:#d4edda style NAT fill:#ffc107

Frontend

Application Layer

Video Processing

WebSocket Layer

PTZ Control

Hardware

Technologies Used

Backend

Python 3.x Flask Flask-SocketIO Gevent OpenCV FFmpeg

Frontend

JavaScript (ES6+) jQuery Axios Socket.io Client Bootstrap

Protocols

RTSP WebSocket Bosch RCP+ HTTP/REST

Infrastructure

Docker NAT Gateway Routing CSRF Protection Encrypted Credentials

Skills Demonstrated

Real-Time Video Streaming

RTSP stream capture, frame processing, and WebSocket-based delivery for live video playback in browser clients.

PTZ Camera Control

Implementation of Bosch RCP+ protocol for pan/tilt/zoom control including preset positions and continuous movement commands.

NAT Gateway Traversal

Network architecture supporting camera access across distributed sites with configurable gateway routing.

Concurrent Stream Management

Greenlet-based cooperative multitasking for handling multiple simultaneous camera streams efficiently.

Automatic Fallback Mechanisms

Stream degradation from RTSP to HTTP snapshots ensuring continuity during network issues.

Client-Side Buffering

Frame buffer implementation for smooth video playback with jitter compensation.

Video Processing Pipeline

OpenCV-based frame capture, resizing, JPEG encoding, and Base64 conversion for WebSocket transport.

Secure Credential Management

Encrypted camera credentials with per-site decryption keys and secure API caching.

Streaming Architecture

Frame Pipeline: Camera streams are captured via RTSP, frames are processed and encoded, then transmitted over WebSocket to connected clients. The browser receives frames into a buffer queue for smooth playback rendering.

flowchart LR subgraph SOURCE["Camera"] CAM["RTSP
Stream"] end subgraph BACKEND["Backend Processing"] CAP["Frame
Capture"] RESIZE["Resize"] JPEG["JPEG
Encode"] B64["Base64
Encode"] EMIT["WebSocket
Emit"] end subgraph BROWSER["Browser"] RECV["Receive
Frame"] BUF["Buffer
Queue"] RENDER["Display"] end CAM --> CAP CAP --> RESIZE RESIZE --> JPEG JPEG --> B64 B64 --> EMIT EMIT --> RECV RECV --> BUF BUF --> RENDER style CAM fill:#d4edda style CAP fill:#fd7e14,color:#fff style RESIZE fill:#fd7e14,color:#fff style JPEG fill:#fd7e14,color:#fff style B64 fill:#fd7e14,color:#fff style EMIT fill:#28a745,color:#fff style RECV fill:#e1f5ff style BUF fill:#e1f5ff style RENDER fill:#e1f5ff

Streaming Capabilities

Real-time Delivery: Frame-by-frame streaming with configurable frame rate
Client Buffering: Queue-based frame buffering for smooth playback
Automatic Recovery: Fallback to HTTP snapshots when RTSP fails
Stream Health Monitoring: Statistics tracking and health checks
Graceful Shutdown: Clean stream termination and resource cleanup

PTZ Control System

Bosch RCP+ Integration: PTZ cameras are controlled via the Bosch Remote Control Protocol, enabling pan/tilt/zoom operations and preset position recall through HTTP-based command transmission.

flowchart LR subgraph CONTROLS["Browser Controls"] JOY["PTZ
Joystick"] ZOOM["Zoom
Buttons"] PRE["Preset
Buttons"] end subgraph BACKEND["Backend"] ROUTE["API
Routes"] BUILD["Command
Builder"] AUTH["Authentication"] end subgraph CAMERA["PTZ Camera"] RCP["RCP+
Endpoint"] MOTOR["Motor
Control"] end JOY --> ROUTE ZOOM --> ROUTE PRE --> ROUTE ROUTE --> BUILD BUILD --> AUTH AUTH --> RCP RCP --> MOTOR style JOY fill:#e1f5ff style ZOOM fill:#e1f5ff style PRE fill:#e1f5ff style BUILD fill:#6f42c1,color:#fff style AUTH fill:#6f42c1,color:#fff style RCP fill:#d4edda

PTZ Capabilities

Directional Control: Pan left/right, tilt up/down with variable speed
Zoom Control: Optical zoom in/out
Preset Positions: Recall saved camera positions
Continuous Movement: Mouse-down to move, mouse-up to stop
Multi-Auth Support: Basic, Digest, and unauthenticated modes

Network Architecture

Distributed Deployment: Cameras are deployed at remote sites behind NAT gateways. The system supports both direct local access and NAT-routed access via configurable gateway mappings for transparent cross-network communication.

flowchart TB subgraph CENTRAL["Central Server"] APP["Streaming
Application"] end subgraph GATEWAYS["NAT Gateway Layer"] GW1["Gateway
Site 1"] GW2["Gateway
Site 2"] GWN["Gateway
Site N"] end subgraph SITE1["Site 1 Network"] C1A["VCA Camera"] C1B["PTZ Camera"] end subgraph SITE2["Site 2 Network"] C2A["VCA Camera"] C2B["PTZ Camera"] end APP --> GW1 APP --> GW2 APP --> GWN GW1 --> C1A GW1 --> C1B GW2 --> C2A GW2 --> C2B style APP fill:#667eea,color:#fff style GW1 fill:#ffc107 style GW2 fill:#ffc107 style GWN fill:#ffc107 style C1A fill:#d4edda style C1B fill:#d4edda style C2A fill:#d4edda style C2B fill:#d4edda

Network Capabilities

NAT Traversal: Configurable gateway routing for remote camera access
Multi-Site Support: Unified access to cameras across distributed locations
Protocol Mapping: RTSP and HTTPS port translation through gateways
Local/Remote Modes: Automatic selection based on network topology

Related Project

This video streaming service integrates with the Over-Height Vehicle Detection System, providing live camera feeds to the end-user monitoring dashboard.