Web/API/MediaTrackConstraints/displaySurface

The MediaTrackConstraints dictionary's displaySurface property is a ConstrainDOMString describing the requested or mandatory constraints placed upon the value of the displaySurface constrainable property. This is used to specify the type or types of display surfaces which getDisplayMedia() will let the user select among for sharing purposes.

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

Syntax

var constraintsObject = { displaySurface: constraint };

constraintsObject.displaySurface = constraint;

Value

A ConstrainDOMString which specifies the type of display surface that's being captured. This value does not affect the list of display sources in the browser's user interface.

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 displaySurface object.

For example, if your app needs to know that the surface being shared is a monitor or application—meaning that there's possibly a non-content backdrop—it can use code similar to this:

let mayHaveBackdropFlag = false;
let displaySurface = displayStream.getVideoTracks()[0].getSettings().displaySurface;

if (displaySurface === "monitor" || displaySurface ==="application") {
  mayHaveBackdropFlag = true;
}

Following this code, mayHaveBackdrop is true if the display surface contained in the stream is of type monitor or application; either of these may have non-content backdrop areas. Later code can use this flag to determine whether or not to perform special processing, such as to remove or replace the backdrop, or to "cut" the individual display areas out of the received frames of video.

Examples

Here are some example constraints objects for getDisplayMedia() that make use of the displaySurface property. In addition, see Example: Constraint exerciser in Capabilities, constraints, and settings for a complete example showing how constraints are used.

TBD

Specifications

Specification	Status	Comment
Screen CaptureThe definition of 'MediaTrackConstraints.displaySurface' in that specification.	Unknown	Initial specification.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`displaySurface`	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera Full support Yes	Safari ?	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android ?	Safari iOS ?	Samsung Internet Android No support No

Legend

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