The navigator.mediaDevices.getDisplayMedia is a method provided by the Web API which allows you to capture the contents of the user’s screen. It returns a promise that resolves to a MediaStream object containing the screen’s live video and audio streams

Usage

The getDisplayMedia method can be used without any parameters or with an optional MediaStreamConstraints object. The MediaStreamConstraints object specifies the types of media to request, along with any requirements for each type

navigator.mediaDevices.getDisplayMedia(constraints);

Example

Let’s create a simple example where we capture the user’s screen and display it in a video element. We’ll also add a button to start the screen capture.

First, add a video element and a button to your HTML:

<p>
  Click the Start Capture button to begin.
</p>
<p>
  <button id="start">Start Capture</button>
</p>
<video id="video" autoplay></video>

The video element will be used to display the captured screen, and the button will be used to start the screen capture.

Next, create a JavaScript function to start the screen capture

const startCapture = () => {
  navigator.mediaDevices
    .getDisplayMedia()
    .then((stream) => {
      const video = document.querySelector("video");
      video.srcObject = stream;
    })
    .catch((err) => console.error("Error: " + err));
};

const startButton = document.getElementById("start");
startButton.addEventListener("click", startCapture);

In this function, we call navigator.mediaDevices.getDisplayMedia() to start the screen capture. This returns a promise that resolves to a MediaStream object. We then set the srcObject property of the video element to this MediaStream, which starts displaying the captured screen in the video element. If there’s an error, we log it to the console

Security

It’s important to note that the getDisplayMedia method could be used in nefarious ways and therefore can be a source of significant privacy and security concerns. For that reason, the specification details measures browsers are required to take in order to fully support getDisplayMedia. The go-ahead permission to use getDisplayMedia() cannot be persisted for reuse. The user must be prompted for permission every time. Transient user activation is required. The user has to interact with the page or a UI element in order for this feature to work

This is just a basic example of how to use navigator.mediaDevices.getDisplayMedia(). You can use it in combination with other Web APIs to create more complex applications, such as screen recording apps or remote desktop apps.