v150 · WebRTC · Media

Counters API Explorer

Explore the new totalFrames and discardedFrames properties on MediaStreamTrackProcessor. This page creates a canvas-based MediaStream source, attaches a processor, and reads the counters every second. Use the consumer speed slider to induce frame drops and watch discardedFrames climb.

New properties — Chrome 150

processor.totalFrames : unsigned long long —

Total number of frames the processor has received from the track since it was created. Monotonically increasing.

processor.discardedFrames : unsigned long long —

Frames dropped because the consumer (ReadableStream reader) couldn't pull them fast enough. Grows when transform is slower than source.

derived: health ratio : percentage —

(totalFrames − discardedFrames) / totalFrames × 100%. The key metric for pipeline monitoring.

Live demo — canvas source processor

Consumer delay (ms/frame): 0ms

— totalFrames

— discardedFrames

— health %

// Start the processor to see live counter updates…

Usage pattern

// Create a MediaStream from canvas
const canvas = document.createElement('canvas');
const stream = canvas.captureStream(30); // 30 fps
const track  = stream.getVideoTracks()[0];

// Create processor (Chrome 94+)
const processor = new MediaStreamTrackProcessor({ track });
const reader = processor.readable.getReader();

// Chrome 150: read the new counter properties
setInterval(() => {
  const total     = processor.totalFrames;
  const discarded = processor.discardedFrames;
  const health    = ((total - discarded) / total * 100).toFixed(1) + '%';
  console.log({ total, discarded, health });
}, 1000);

// Consumer loop — slowing this down increases discardedFrames
async function consume() {
  while (true) {
    const { value: frame, done } = await reader.read();
    if (done) break;
    // … process frame …
    frame.close(); // always close when done
  }
}
consume();

Browser support matrix

Feature	Chrome	Firefox	Safari
MediaStreamTrackProcessor	94+	116+ (Nightly)	No
totalFrames property	150+	No	No
discardedFrames property	150+	No	No

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

Browser support matrix

see also

implementation reference