title: How to manually stop getDisplayMedia stream to end screen capture?
body: <p>I'm interested in getting a <strong>screenshot</strong> from the user and I'm using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API" rel="noreferrer"><strong><code>getDisplayMedia</code></strong></a> API to capture the user's screen:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>  const startStream = (stream: MediaStream) =&gt; {
      this.video.nativeElement.srcObject = stream;
    };
  </code></pre>
  
  <p>This is simple and very effective so far. Nevertheless, I'm only interested in a <strong>single frame</strong> and I'd therefore like to manually stop the stream as soon as I've processed it.</p>
  
  <p>What I tried is to remove the <code>video</code> 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:</p>
  
  <p><a href="https://i.stack.imgur.com/woW5K.png" rel="noreferrer"><img src="https://i.stack.imgur.com/woW5K.png" alt="Screen Capturing in Progress (German)"></a></p>
  
  <p>I've looked at the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API" rel="noreferrer">Screen Capture API article on MDN</a> but couldn't find any hints on how to stop the stream.</p>
  
  <p><strong>How do I end the stream properly so that the prompt stops as well?</strong></p>