v136 · screen capture
Retina Renderer
High-DPR remote desktop scenario: read the captured surface's screenPixelRatio, size the canvas at physical pixels, and render the shared surface at true 1:1 density. Compare the blurry CSS-pixel canvas with the DPR-aware version.
checking getDisplayMedia...
screenPixelRatio is readable after capture
A capture can come from a different display than the viewer window. That means the captured surface's
screenPixelRatio can diverge from window.devicePixelRatio. Remote-desktop renderers should use the track setting, not the local window DPR shortcut.
This viewer window is on a 1x display, so the visual difference between the two canvases may be subtle. Use the captured-surface DPR slider to model a Retina surface, or view the page on a 2x display for the live crispness difference.
Viewer window vs captured surface
Viewer DPR
-
window.devicePixelRatio
Captured surface DPR
-
simulated until capture starts
Surface logical size
-
screen.width x screen.height CSS px
Surface physical size
-
logical size x captured DPR
Captured track settings
settings.widthwaiting for capture
settings.heightwaiting for capture
screenPixelRatiowaiting for capture
estimated CSS sizewaiting for capture
Rendering comparison
Without captured DPR (blurry)
With captured DPR (sharp)
Code pattern
Rendering code will appear here.