v145 · Web APIs · rtpTimestamp Demo

rtpTimestamp Demo

Uses MediaStreamTrackProcessor on a local camera stream to read VideoFrame.metadata() and display all available timing fields — including rtpTimestamp if supported.

rtpTimestamp is populated on frames received from a remote peer via WebRTC. For local camera streams (no RTP involved), rtpTimestamp will be undefined. This demo uses a local camera to show all other metadata fields and check API availability.

camera stream

MediaStreamTrackProcessorNot started
VideoFrame.metadata()—
rtpTimestamp—
presentationTime (µs)—
width × height—
frames read—

code

// Read VideoFrame.metadata() including rtpTimestamp (Chrome 145+)
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getVideoTracks();

const processor = new MediaStreamTrackProcessor({ track });
const reader = processor.readable.getReader();

let count = 0;
while (count < 30) {
  const { value: frame, done } = await reader.read();
  if (done) break;

  const meta = frame.metadata();
  console.log({
    rtpTimestamp: meta.rtpTimestamp,    // undefined for local camera
    presentationTime: meta.presentationTime,
    width: frame.displayWidth,
    height: frame.displayHeight,
  });

  frame.close();
  count++;
}
reader.cancel();

see also