How to manually stop getDisplayMedia stream to end screen capture?

Question

I'm interested in getting a screenshot from the user and I'm using the getDisplayMedia API to capture the user's screen:

const constraints = { video: true, audio: false };

if (navigator.mediaDevices["getDisplayMedia"]) {
  navigator.mediaDevices["getDisplayMedia"](constraints).then(startStream).catch(error);
} else {
  navigator.getDisplayMedia(constraints).then(startStream).catch(error);
}

When executed, the browser prompts the user if they want to share their display. After the user accepts the prompt, the provided callback receives a MediaStream. For visualization, I'm binding it directly to a element:

  const startStream = (stream: MediaStream) => {
    this.video.nativeElement.srcObject = stream;
  };

This is simple and very effective so far. Nevertheless, I'm only interested in a single frame and I'd therefore like to manually stop the stream as soon as I've processed it.

What I tried is to remove the video element from the DOM, but Chrome keeps displaying a message that the screen is currently captured. So this only affected the video element but not the stream itself:

I've looked at the Screen Capture API article on MDN but couldn't find any hints on how to stop the stream.

How do I end the stream properly so that the prompt stops as well?

score 14 · Accepted Answer · answered Oct 10 '19 at 16:44

Rather than stopping the stream itself, you can stop its tracks.
Iterate over the tracks using the getTracks method and call stop() on each of them:

stream.getTracks()
  .forEach(track => track.stop())

As soon as all tracks are stopped, Chrome's capturing prompt disappears as well.

score 0 · Answer 2 · answered Apr 12 '21 at 07:51

start screen capture sample code:

async function startCapture() {
  logElem.innerHTML = "";

  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo();
  } catch(err) {
    console.error("Error: " + err);
  }
}

stop screen capture sample code:

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
}

more info: MDN - Stopping display capture

How to manually stop getDisplayMedia stream to end screen capture?

2 Answers2