129 lines
5.3 KiB
HTML
129 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Media Analyzer - Documentation</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Media Analyzer</h1>
|
|
<p class="subtitle">Real-Time Video Analysis Platform</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="graph-section" id="system-architecture">
|
|
<div class="graph-header-row">
|
|
<h2>System Architecture</h2>
|
|
<a href="architecture/architecture_diagram.svg" class="view-btn" target="_blank">View Full</a>
|
|
</div>
|
|
<a href="architecture/architecture_diagram.svg" class="graph-preview" target="_blank">
|
|
<img src="architecture/architecture_diagram.svg" alt="System Architecture Diagram">
|
|
</a>
|
|
<div class="graph-details">
|
|
<p>Complete system overview showing video ingestion, AI processing pipeline, and real-time dashboard components.</p>
|
|
<h4>Components</h4>
|
|
<ul>
|
|
<li><strong>Video Ingestion</strong>: RTMP streams from OBS, FFmpeg HLS conversion</li>
|
|
<li><strong>AI Processing</strong>: CLIP/YOLO for logo detection and scene analysis</li>
|
|
<li><strong>Real-time Communication</strong>: Django Channels WebSocket for live updates</li>
|
|
<li><strong>Frontend</strong>: Angular 17+ with HLS.js video player and Canvas overlays</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="findings-section">
|
|
<h2>Key Features</h2>
|
|
<div class="findings-grid">
|
|
<article class="finding-card">
|
|
<h3>Video Streaming</h3>
|
|
<ul>
|
|
<li>RTMP ingestion from OBS Studio</li>
|
|
<li>FFmpeg HLS conversion</li>
|
|
<li>Event-driven segment detection</li>
|
|
<li>WebSocket-powered live updates</li>
|
|
</ul>
|
|
</article>
|
|
<article class="finding-card">
|
|
<h3>AI Analysis</h3>
|
|
<ul>
|
|
<li>Logo/brand detection (CLIP)</li>
|
|
<li>Object detection (YOLO)</li>
|
|
<li>Real-time vs batch processing modes</li>
|
|
<li>Switchable local/cloud backends</li>
|
|
</ul>
|
|
</article>
|
|
<article class="finding-card">
|
|
<h3>Infrastructure</h3>
|
|
<ul>
|
|
<li>Docker containerized services</li>
|
|
<li>Kubernetes orchestration</li>
|
|
<li>GCP integration (Storage, Vision)</li>
|
|
<li>Celery task queue with Redis</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="tech-section">
|
|
<h2>Technology Stack</h2>
|
|
<div class="tech-grid">
|
|
<div class="tech-column">
|
|
<h3>Backend</h3>
|
|
<ul>
|
|
<li>Django + Channels</li>
|
|
<li>Django REST Framework</li>
|
|
<li>PostgreSQL</li>
|
|
<li>Celery + Redis</li>
|
|
<li>FFmpeg</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tech-column">
|
|
<h3>AI/ML</h3>
|
|
<ul>
|
|
<li>OpenCV</li>
|
|
<li>CLIP (scene analysis)</li>
|
|
<li>YOLO (object detection)</li>
|
|
<li>Hugging Face Transformers</li>
|
|
<li>GCP Vision API</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tech-column">
|
|
<h3>Frontend</h3>
|
|
<ul>
|
|
<li>Angular 17+</li>
|
|
<li>HLS.js video player</li>
|
|
<li>Canvas overlays</li>
|
|
<li>WebSocket client</li>
|
|
<li>Standalone components</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="findings-section">
|
|
<h2>Architecture Goals</h2>
|
|
<div class="findings-grid">
|
|
<article class="finding-card">
|
|
<h3>Event-Driven Design</h3>
|
|
<p>File system watchers detect new HLS segments, triggering AI processing and real-time WebSocket notifications.</p>
|
|
</article>
|
|
<article class="finding-card">
|
|
<h3>Scalable Processing</h3>
|
|
<p>Celery workers handle AI tasks with configurable queues for real-time vs batch processing modes.</p>
|
|
</article>
|
|
<article class="finding-card">
|
|
<h3>Cloud-Native</h3>
|
|
<p>Kubernetes manifests for local (KIND) and production (GKE) deployment with easy environment switching.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Media Analyzer - Real-Time Video Analysis Platform</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|