Client-Side Cache Architecture
┌─────────────┐ demuxed frames ┌──────────────────────────┐
│ <video> │ ◄────────────────── │ hls.js (ABR, buffering) │
└─────────────┘ └──────────┬───────────────┘
│ every playlist/.ts request
┌──────────▼───────────────┐
│ CachingLoader (custom) │
│ key = chunk URL │
└──────┬─────────┬─────────┘
HIT ──┘ └── MISS
┌────────────▼──┐ ┌──▼─────────────────┐
│ Chunk Cache │ │ CloudFront CDN │
│ Map<url,bytes>│◄──┤ users/{u}/media/ │
│ LRU by bytes │put│ {m}/hls/*.ts │
└───────────────┘ └────────────────────┘
Why this works: HLS-manifest-stitched scenes reference each
performance's ORIGINAL chunk URLs — the same URL appears in every
scene that includes that performance. URL-keyed caching therefore
gives cross-scene reuse for free. MediaConvert-stitched scenes have
scene-private chunk URLs (scenes/{id}/playback/hls/*) — never shared.
Demo script: ① play a scene (all MISS — network) ② replay it (all HIT) ③ play a DIFFERENT scene that shares a performance (HITs for shared chunks only — the cross-scene win). In-memory for the demo; a production client would use CacheStorage/disk with the same URL key.