Shamratha G

All Projects
Full-Stack

HLS Monitor

Team project — Amagi Media Labs Learning Hub 2025, with @Suraj-B12

A real-time HLS stream monitoring solution with live analytics, signal visualization, and health tracking: streams are polled every 7 seconds, scored 0–100 for health, analyzed via FFprobe, and rendered in a dark-themed dashboard with live thumbnails, VU meters, historical charts, and downloadable daily logs.

React Tailwind CSS Socket.io Recharts Node.js MongoDB
Source Code Live Demo

Problem Statement

  • Broadcast teams need to know an HLS stream is degrading before viewers do.
  • Bitrate, signal, and manifest health telemetry arrive as fast real-time bursts that a naive frontend can't render smoothly.
  • Critical failures need alerts that cut through, not just a red dot on a dashboard.
  • Error logs grow large quickly and must stay browsable without tanking the UI.

System Overview

HLS streams→Node.js polling workers + FFprobe analysis→Health scoring & MongoDB logs→Socket.io real-time push→React telemetry dashboard
  • Node.js/Express backend polls HLS streams on 7-second intervals, running FFprobe for detailed video, audio, and container analysis, with a sliding-window 0-100 health score and MongoDB-backed audit and error logs.
  • Real-time updates flow over Socket.io into the React + Tailwind dashboard (my scope): live VU meters for video/audio bitrates and scrollable historical Recharts graphs.
  • I built a custom AudioSynth engine on the Web Audio API that triggers localized siren/beep alerts for critical stream failures.
  • The frontend state layer I designed maps backend worker updates — manifest health scores, staleness metrics, sequence drifts — into the telemetry components.
  • Paginated lazy-loading for error logs keeps frame rates smooth under heavy data bursts; playback happens client-side via HLS.js-style playback so the server carries no video load.
  • Auto-updating stream thumbnails, downloadable daily log files with date selection, and a custom dark theme round out the operator experience.

What I Built

  • Architected the React + Tailwind CSS dashboard, using Socket.io to stream real-time video/audio bitrates into live VU meters and scrollable historical charts (Recharts).
  • Built a custom AudioSynth engine on the Web Audio API to trigger localized siren/beep alerts for critical stream failures.
  • Implemented paginated lazy-loading for error logs to keep frame rates smooth under heavy data bursts.
  • Designed the frontend state layer that maps real-time backend worker updates — manifest health scores, staleness metrics, sequence drifts — into the telemetry components.

Key Decisions & Tradeoffs

  • Socket.io streaming into the dashboard so bitrate and signal telemetry render live rather than on refresh.
  • Synthesized alert audio in the browser with the Web Audio API instead of shipping audio assets.
  • Paginated lazy-loading for error logs, chosen specifically to hold frame rates under heavy data bursts.
  • Client-side HLS playback so preview streams add no server load.

Why It Matters

It's production-flavored broadcast tooling built in an industry setting — real-time telemetry UI engineering where smoothness under data bursts is the actual requirement.

What I'd Improve Next

  • Add configurable alert rules and escalation channels (email/Slack/webhooks) beyond in-dashboard audio alerts.
  • Support adaptive-bitrate ladder analysis — per-rendition health rather than a single stream score.
  • Add long-term metric retention with downsampling so historical charts scale past daily log files.
  • Introduce user roles and authentication around the audit-logged operations.
  • Detect and alert on subtler stream pathologies such as SCTE-35 marker gaps, caption loss, and audio silence.