Add Real Video QoE Telemetry to Your Player in an Afternoon

Starter code available on the full article - link at the bottom.

The Problem

Every video team gets asked these three questions the day after launch:

How long does it take for video to start playing?

How often does the player stall mid-playback?

How often does playback fail outright?

Most teams over-engineer the solution. Here's a minimal approach that actually works.

The Architecture

HLS.js Player → Fastify API (Node 22) → SQLite → Dashboard

No Kafka. No Grafana. Just three files: a React component, a Node endpoint, a SQL view.

Step 1: Set Up the Project

mkdir video-qoe-starter && cd video-qoe-starter npm init -y npm install hls.js fastify better-sqlite3

Enter fullscreen mode

Exit fullscreen mode

Step 2: Instrument the Player

The core insight: HLS.js exposes events that map directly to the three QoE metrics:

hls . on ( Hls . Events . MANIFEST_PARSED , () => { session . startTime = performance . now (); });

video .…