demo · v136

Bandwidth saver

The explainer's motivation: video-conferencing apps capturing a 2x screen send 4× the pixels for no visible gain. With devicePixelRatio now in track.getSettings() you can detect that, then re-request the capture at the logical resolution and ship a fraction of the bytes.

Probing…

A: default capture

videoWidth×H—
pixelRatio—
pixels / frame—

B: capacity-aware re-capture

videoWidth×H—
pixelRatio—
pixels / frame—
Capture both streams to compare pixel volume.

the code

// First capture: discover the surface's pixel ratio.
const sA = await navigator.mediaDevices.getDisplayMedia({ video: true });
const [tA] = sA.getVideoTracks();
const { width, height, devicePixelRatio: dpr = 1 } = tA.getSettings();

if (dpr > 1) {
  // Re-capture at logical resolution — saves dpr^2 bandwidth.
  await tA.applyConstraints({ width: width / dpr, height: height / dpr });
}

why this angle

The sibling concept reads getSettings() and renders the numbers. This concept does what those numbers are for: capture twice — once at default, once with applyConstraints() using the discovered pixel ratio — and compute the resulting bandwidth saving. On a 2x display the bytes-per-frame go from 4N to N. That's the value proposition the explainer pitched to the working group.

see also