v135 · webrtc
Frame Timestamp Analyzer
Simulate a stream of RTCEncodedVideoFrame objects with timestamps added in Chrome 135. Configure frame rate, network jitter, and packet loss, then analyze the timestamp deltas to detect A/V sync drift and jitter spikes — the exact use case the new timestamp property enables.
checking RTCEncodedVideoFrame…
checking timestamp property…
RTCEncodedVideoFrame.timestamp (Chrome 135) gives the RTP timestamp of each encoded video frame inside an Insertable Streams transform. Before this, you couldn't tell when a frame was captured — you could only see when it arrived at the transform. With timestamps, you can align audio and video streams, measure end-to-end latency, and detect clock drift without an out-of-band channel.
Simulation settings
Timestamp delta timeline
Each bar = timestamp delta between consecutive frames (ms). Orange = jitter spike, red = lost frame gap.
Simulation statistics
Frames
—
Lost
—
Expected Δ
—
Median Δ
—
Max Δ (ms)
—
Jitter spikes
—
A/V drift est.
—
Frame log (first 20)
| # | RTP timestamp | Arrive time (ms) | Δ prev (ms) | Status |
|---|
Using RTCEncodedVideoFrame.timestamp in a transform
// Chrome 135 — RTCEncodedVideoFrame.timestamp in an Insertable Stream
const sender = pc.addTrack(videoTrack, stream);
const senderStreams = sender.createEncodedStreams();
const transform = new TransformStream({
transform(frame, controller) {
// Chrome 135: frame.timestamp — RTP timestamp in 90kHz units
const pts = frame.timestamp / 90; // convert to ms
// Detect A/V sync drift:
const drift = audioTimestamp - pts;
if (Math.abs(drift) > 80) {
console.warn('A/V drift:', drift.toFixed(1), 'ms');
// Signal to UI or resync audio
}
// Measure end-to-end latency:
const e2eLatency = performance.now() - pts;
controller.enqueue(frame);
}
});
senderStreams.readable
.pipeThrough(transform)
.pipeTo(senderStreams.writable);