The MediaTrackConstraints dictionary's logicalSurface property is a ConstrainDOMString describing the requested or mandatory constraints placed upon the value of the logicalSurface constrainable property. This is used to specify whether or not getDisplayMedia() should allow the user to choose display surfaces which are not necessarily fully visible on the screen, such as occluded windows or the complete content of windows which are large enough to require scrolling to see their entire contents.

If needed, you can determine whether or not this constraint is supported by checking the value of MediaTrackSupportedConstraints.logicalSurface as returned by a call to MediaDevices.getSupportedConstraints(). However, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with.


var constraintsObject = { logicalSurface: constraint };

constraintsObject.logicalSurface = constraint;


A ConstrainBoolean which is true if logical surfaces should be permitted among the selections available to the user.

See How constraints are defined in Capabilities, constraints, and settings for an explanation of how to define constraints.

Usage notes

You can check the setting selected by the user agent after the display media has been created by getDisplayMedia() by calling getSettings() on the display media's video MediaStreamTrack, then checking the value of  the returned MediaTrackSettings object's logicalSurface object.

For example, if your app needs to know if the selected display surface is a logical one:

let isLogicalSurface = displayStream.getVideoTracks()[0].getSettings().logicalSurface;

Following this code, isLogicalSurface  is true if the display surface contained in the stream is a logical surface; that is, one which may not be entirely onscreen, or may even be entirely offscreen.


Specification Status Comment
Screen Capture
The definition of 'MediaTrackConstraints.logicalSurface' in that specification.
Working Draft Initial specification.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
logicalSurfaceChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support YesSafari ? WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android No support No


Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

See also