Limited supportUse with care and provide a fallback when broad support matters.
Embedded Limited support

Screen capture

The navigator.mediaDevices.getDisplayMedia() method asks the user to choose a screen or portion of a screen (such as a window) to capture as a media stream. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

EmbeddedMedia

Overview

The navigator.mediaDevices.getDisplayMedia() method asks the user to choose a screen or portion of a screen (such as a window) to capture as a media stream. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CaptureController
Experimental
109
109
CaptureController
Experimental

The CaptureController constructor creates a new CaptureController object instance.
109
109
setFocusBehavior
Experimental

The CaptureController interface's setFocusBehavior() method controls whether the captured tab or window will be focused when an associated MediaDevices.getDisplayMedia() Promise fulfills, or whether the focus will remain with the tab containing the capturing app.
109
109
getDisplayMedia

The getDisplayMedia() method of the MediaDevices interface prompts the user to select and grant permission to capture the contents of a display or portion thereof (such as a window) as a MediaStream.
72
79
66
13
getDisplayMedia (audio capture support)

Before starting a project that will require sharing of audio, be sure to check the browser compatibility for getDisplayMedia() to see if the browsers you wish compatibility with have support for audio in captured screen streams.
74
79
getDisplayMedia (controller option)
Experimental

`controller` option
109
109
getDisplayMedia (monitorTypeSurfaces option)
Experimental

`monitorTypeSurfaces` option
119
119
getDisplayMedia (selfBrowserSurface option)
Experimental

`selfBrowserSurface` option
112
112
getDisplayMedia (surfaceSwitching option)
Experimental

`surfaceSwitching` option
107
107
getDisplayMedia (systemAudio option)
Experimental

`systemAudio` option
105
105
applyConstraints (displaySurface constraint)

The MediaTrackConstraints dictionary's displaySurface property is a ConstrainDOMString describing the preferred value for the MediaTrackSettings.displaySurface constrainable property.
107
107
11.1
107
11.3
applyConstraints (logicalSurface constraint)

The MediaTrackConstraints dictionary's logicalSurface property is a ConstrainDOMString describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.logicalSurface constrainable property.
11.1
11.3
applyConstraints (suppressLocalAudioPlayback constraint)
Experimental

The MediaTrackConstraints dictionary's suppressLocalAudioPlayback property is a ConstrainBoolean describing the requested or mandatory constraints placed upon the value of the MediaTrackSettings.suppressLocalAudioPlayback constrainable property. This property controls whether the audio playing in a tab will continue to be played out of a user's local…
109
109
109
Other
html.elements.iframe.allow.display-capture
94
94
74
13
94
http.headers.Permissions-Policy.display-capture
Experimental

The HTTP Permissions-Policy header display-capture directive controls whether or not the document is permitted to use Screen Capture API, that is, MediaDevices.getDisplayMedia to capture the screen's contents.
94
94
94
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • Available as a member of `Navigator` instead of `MediaDevices`.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (66)
Implementation note
  • Since Firefox 33 you can capture screen data using `getUserMedia()`, with a `video` constraint called `mediaSource`. Before 52 it relied on a client-configurable list of allowed sites.
Notes 1 item(s)
Implementation note
  • From Chrome Android 72 to 88, this method was exposed, but always failed with `NotAllowedError`. See bug 40418135.
Notes 1 item(s)
Implementation note
  • On Windows and ChromeOS, the entire system audio can be captured when sharing an entire screen. On Linux and macOS, only the audio of a tab can be captured.
Notes 1 item(s)
Implementation note
  • On Windows and ChromeOS, the entire system audio can be captured when sharing an entire screen. On Linux and macOS, only the audio of a tab can be captured.
Notes 1 item(s)
Implementation note
  • Default value = `include`
Notes 1 item(s)
Implementation note
  • Default value = `include`
Notes 3 item(s)
Implementation note
  • Default value = `exclude`
  • Default value = `include`
Removed
  • This feature was removed in a later browser version (111)
Notes 3 item(s)
Implementation note
  • Default value = `exclude`
  • Default value = `include`
Removed
  • This feature was removed in a later browser version (111)
Notes 1 item(s)
Implementation note
  • Default value = `exclude`
Notes 1 item(s)
Implementation note
  • Default value = `exclude`
Notes 1 item(s)
Implementation note
  • Default value = `include`
Notes 1 item(s)
Implementation note
  • Default value = `include`

Syntax

JAVASCRIPT 
const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { displaySurface: 'monitor' },
  audio: true
});
const video = document.querySelector('video');
video.srcObject = stream;

Use cases

  • Use Screen capture

    Use Screen capture when standard HTML needs a more specific platform feature, semantic signal, or browser capability.

  • Handle edge cases

    Apply Screen capture to solve a focused requirement without redesigning the whole page architecture.

Cautions

  • Test Screen capture in your target browsers and input environments before depending on it as a primary behavior.
  • Provide a fallback path or acceptable degradation strategy when support is still limited.

Accessibility

  • Make sure Screen capture supports the intended task without making the page harder to perceive, understand, or operate.

Related links

Powered by web-features