How to manually stop getDisplayMedia stream to end screen capture?

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?

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.