Complete QoE monitoring stack

Multi-player SDK, Cloudflare Worker ingestion, Prometheus/Grafana observability, and 4 pre-built dashboards with 58 panels.

Three-tier architecture

Browser SDK, edge worker, and observability backend.

Multi-Player SDK

JavaScript SDK with support for all major video players.

  • HTML5, Video.js, HLS.js, dash.js, Shaka
  • 12 QoE event types
  • Automatic state tracking
  • Offline queue with retry
  • Privacy-first (hashed IDs)

Edge Ingestion

Cloudflare Worker for global event processing.

  • Sub-10ms latency globally
  • Header authentication
  • Cardinality governance
  • Multi-tenant (X-Scope-OrgID)
  • 10-second timeout protection

Observability Stack

Grafana Mimir, Loki, and production dashboards.

  • 4 dashboards, 58 panels
  • 25 recording rules
  • 18 alert rules
  • 30-day retention
  • Docker or Grafana Cloud

Works with all major players

One SDK, five player integrations. No player modification required.

HTML5 Video

Native browser video element support with zero dependencies.

  • Direct <video> element binding
  • Universal browser support
  • Lightweight footprint

Video.js

Most popular HTML5 player framework with extensive ecosystem.

  • Plugin architecture
  • Custom controls & themes
  • Wide browser support

HLS.js

JavaScript HLS client for Apple HTTP Live Streaming.

  • HLS protocol support
  • ABR quality switching
  • Low-latency mode

dash.js

Reference DASH client from DASH Industry Forum.

  • MPEG-DASH standard
  • DRM/EME support
  • Advanced ABR algorithms

Shaka Player

Google's open-source adaptive media player library.

  • HLS & DASH support
  • Widevine/PlayReady DRM
  • Offline playback

22 Prometheus metrics

Histograms, gauges, and counters across 6 QoE categories.

Startup Time

  • Aggregate startup time (P50/P95/P99)
  • Player initialization time
  • Video startup time
  • Page load time
  • Startup failure rate

Rebuffering

  • Rebuffer percentage
  • Rebuffer duration (P50/P95/P99)
  • Rebuffer frequency
  • Rebuffer count per session
  • Smoothness quality score

Video Quality

  • Weighted average bitrate
  • Upscale percentage
  • Downscale percentage
  • Quality score (0-1)

Engagement

  • Total playing time
  • Total watch time
  • View count
  • Unique viewers

Failures

  • Exits before video start
  • Playback failure percentage
  • Error categorization

Experience Scores

  • Viewer Experience Score (VES)
  • Startup time score
  • Rebuffer score
  • Video quality score

View complete events & metrics reference →

Technology stack

TypeScript, Cloudflare Workers, Prometheus, Grafana, Docker.

JS
JavaScript
TS
TypeScript
☁
Cloudflare
📊
Prometheus
📈
Grafana
🐳
Docker

Grafana Mimir & Loki backend

TSDB for metrics, log aggregation for session traces.

Grafana Mimir

  • Horizontally scalable Prometheus
  • Multi-tenancy with X-Scope-OrgID
  • Object storage backend (S3/GCS)
  • Cardinality protection
  • Production-ready HA setup

Grafana Loki

  • Index-free log aggregation
  • LogQL query language
  • Session trace reconstruction
  • Compressed storage
  • Correlation with metrics

Recording Rules

  • 25 pre-aggregated rules
  • 10-50x faster dashboard queries
  • Efficient long-term storage
  • True P50/P95/P99 percentiles

Alert Rules

  • 18 production-ready alerts
  • Slack/PagerDuty integration
  • SLO-based thresholds
  • Anomaly detection

Why Prometheus + Grafana?

Widely adopted OSS observability stack with strong ecosystem, PromQL query language, and native histogram support for percentile calculations.

Deployment options

Docker Compose for self-hosting, or connect to managed Grafana Cloud.

Self-Hosted (Docker)

  • One-command deployment
  • Complete data ownership
  • No vendor lock-in
  • 30-day retention included
  • Deploy on AWS/GCP/Azure/on-prem

Grafana Cloud

  • Fully managed service
  • Zero infrastructure management
  • Global scale & HA
  • 99.9% uptime SLA
  • Multi-tenant ready

Production dashboards included

4 comprehensive dashboards with 58 panels covering all QoE metrics.

VOD Dashboard

Video-on-demand specific metrics and KPIs.

  • Startup time trends
  • Completion rates
  • Quality distribution
  • Top content analysis

Live Dashboard

Live streaming monitoring and real-time health.

  • Concurrent viewers
  • Latency tracking
  • Stream health
  • Real-time rebuffering

Quality Insights

Deep dive into video quality and performance.

  • Bitrate analysis
  • CDN performance
  • Device breakdowns
  • Network conditions

Business Impact

Business KPIs and engagement metrics.

  • Watch time trends
  • Viewer retention
  • Error impact
  • Revenue correlation

Get started

Clone the repository and deploy with Docker Compose.

View on GitHub