Two clocks, one screen
A map update and a video frame do not arrive on the same schedule. Treating them as one perfectly synchronized stream creates misleading overlays and brittle playback.
The interface should communicate whether a frame is live, buffered, or delayed, while the backend preserves timestamps that allow later correlation.
Design for degraded conditions
Video quality can adapt independently from event delivery. When bandwidth is scarce, preserve the operational signal first: location, alert state, and the ability to inspect a recent frame.
The strongest implementation is not the one with the highest bitrate. It is the one that still helps an operator make a correct decision when the network is imperfect.
Keep the timelines honest
The video player has a playback position; the map has an event position; the network has a delivery position. Store timestamps for all three and expose the relationship in the UI. A marker that is two seconds newer than the frame should not be painted as if both were simultaneous.
sequenceDiagram
participant S as Sensor
participant V as Video stream
participant E as Event stream
participant U as Operator UI
S->>V: Encode frame with timestamp
S->>E: Emit location and status event
V-->>U: Buffered frame
E-->>U: Event update
U->>U: Align by source time
Degrade by value
When bandwidth drops, lower video quality before discarding the operational event stream. A recent location and an alert state may remain useful even when the video is paused. The interface should show which layer is degraded and how old each layer is.
function chooseStreamProfile(connection: ConnectionHealth) {
if (connection.downlinkMbps < 1) return "low-bandwidth";
if (connection.rttMs > 400) return "buffered";
return "live-high-quality";
}
Retention and privacy
Video often carries more sensitive information than telemetry. Define retention, access, and audit rules before adding replay. A technically impressive stream is still a poor product if nobody can explain who may view it later.