Home▸Computer Science▸Adaptive Bitrate Streaming 2D: Buffer & Ladder Simulator

Adaptive Bitrate Streaming 2D: Buffer & Ladder Simulator

2D top-down simulator of the buffer-based (BBA) and throughput-based adaptive-bitrate algorithms that mobile EdTech apps use to stream lecture video: watch the segment buffer fill and drain on a live canvas diagram, the quality ladder shift, and rebuffer stalls appear under different mobile network conditions, with drag-to-pan and scroll-to-zoom.

Computer Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-mobile-education-technology ↗ Open standalone

Every mobile learning app that streams lecture video — Coursera, Khan Academy, Udemy — runs an adaptive-bitrate (ABR) algorithm that decides which quality segment to fetch next, purely from the state of a short local buffer and the measured network throughput. This 2D simulator draws that buffer as a live stack of video segments on a flat diagram: watch it fill from a network tower, drain as the lecture plays, and reshuffle its quality ladder in real time as you switch between the buffer-based (BBA) and throughput-based adaptation strategies under stable, fluctuating, or degrading mobile network conditions — with rebuffer stalls counted exactly as a real player would count them. Drag to pan the diagram and scroll or pinch to zoom in on any part of it.

⚙ Under the hood

A 2D top-down diagram of the buffer-based (BBA) and throughput-based adaptive-bitrate algorithms mobile EdTech apps use to stream lecture video: a segment stack fills from a network tower and drains as the lecture plays, a quality-ladder highlight shows which rung is active, and rebuffer stalls are counted live under stable, fluctuating or degrading mobile network conditions. Drag to pan and scroll to zoom the diagram.

adaptive bitratestreamingmobilebufferedtechnetworking2D

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)