• Web APIs
  • Using the Element Capture and Region Capture APIs
  • Interfaces
    1. BrowserCaptureMediaStreamTrack Experimental
    2. CaptureController Experimental
    3. CropTarget Experimental
    4. RestrictionTarget Experimental
  • Properties
    1. MediaTrackConstraints.suppressLocalAudioPlayback Experimental
    2. MediaTrackSettings.suppressLocalAudioPlayback Experimental
    3. MediaTrackSupportedConstraints.suppressLocalAudioPlayback Experimental
  • Methods
    1. MediaStream.

      To start capturing video from the screen, you call getDisplayMedia() on navigator.mediaDevices:

      js
      captureStream =
        await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      

      The MediaStream which streams the captured media.

      See the article Using the Screen Capture API for a more in-depth look at how to use the API to capture screen contents as a stream.

      The Screen Capture API also has features that limit the part of the screen captured in the stream:

      • The Element Capture API restricts the captured region to a specified rendered DOM element and its descendants.
      • The Region Capture API crops the captured region to the area of the screen in which a specified DOM element is rendered.

      See Using the Element Capture and Region Capture APIs to learn more.

  • Interfaces

    BrowserCaptureMediaStreamTrack

    Represents a single video track; extends the MediaStreamTrack class with methods to limit the part of a self-capture stream (for example, a user's screen or window) that is captured.

    CaptureController

    Provides methods that can be used to further manipulate a capture session separate from its initiation via getDisplayMedia() call as the value of the options object's controller property.

    CropTarget

    Provides a static method, CropTarget instance that can be used to crop a captured video track to the area in which a specified element is rendered.

    RestrictionTarget

    Provides a static method, RestrictionTarget instance that can be used to restrict a captured video track to a specified DOM element.

    Additions to the MediaDevices interface

    MediaDevices.getDisplayMedia()

    The getDisplayMedia() method is added to the MediaDevices interface. Similar to MediaStream containing the display area selected by the user, in a format that matches the specified options.

    Additions to existing dictionaries

    The Screen Capture API adds properties to the following dictionaries defined by other specifications.

    MediaTrackConstraints

    MediaTrackConstraints.displaySurface

    A ConstrainDOMString indicating what type of display surface is to be captured. The value is one of browser, monitor, or window.

    MediaTrackConstraints.logicalSurface

    Indicates whether or not the video in the stream represents a logical display surface (that is, one which may not be entirely visible onscreen, or may be completely offscreen). A value of true indicates a logical display surface is to be captured.

    MediaTrackConstraints.suppressLocalAudioPlayback

    Controls whether the audio playing in a tab will continue to be played out of a user's local speakers when the tab is captured, or whether it will be suppressed. A value of true indicates that it will be suppressed.

    MediaTrackSettings

    MediaTrackSettings.cursor

    A string which indicates whether or not the display surface currently being captured includes the mouse cursor, and if so, whether it's only visible while the mouse is in motion or if it's always visible. The value is one of always, motion, or never.

    MediaTrackSettings.displaySurface

    A string indicating what type of display surface is currently being captured. The value is one of browser, monitor, or window.

    MediaTrackSettings.logicalSurface

    A boolean value, which is true if the video being captured doesn't directly correspond to a single onscreen display area.

    MediaTrackSettings.suppressLocalAudioPlayback

    A boolean value, which is true if the audio being captured is not played out of the user's local speakers.

    MediaTrackSupportedConstraints

    MediaTrackSupportedConstraints.displaySurface

    A boolean, which is true if the current environment supports the MediaTrackConstraints.displaySurface constraint.

    MediaTrackSupportedConstraints.logicalSurface

    A boolean, which is true if the current environment supports the constraint MediaTrackConstraints.logicalSurface.

    MediaTrackSupportedConstraints.suppressLocalAudioPlayback

    A boolean, which is true if the current environment supports the constraint MediaTrackConstraints.suppressLocalAudioPlayback.

    Permissions Policy validation

    <iframe> attribute allow) can specify a desire to use the Screen Capture API using the directive display-capture:

    html
    <iframe allow="display-capture" src="/some-other-document.html">…</iframe>
    

    The default allowlist is self, which lets any content within the same origin use Screen Capture.

    Specifications

    Specification
    Region Capture

    Browser compatibility

    api.MediaDevices.getDisplayMedia

    api.CropTarget

    api.RestrictionTarget

    See also