title: How can I store / download the recording from the Screen Capture web API?
body: <p>I'm using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API" rel="nofollow noreferrer">Screen Capture API</a> and am trying to save the final capture to a video file (WebM, MP4, etc.). I have these two JavaScript functions:</p>
  <pre><code>async function startCapture() {
      try {
        videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      } catch(err) {
        console.error(&quot;Error: &quot; + err);
      }
  }
  
  function stopCapture() {
      let tracks = videoElem.srcObject.getTracks();
      tracks.forEach(track =&gt; track.stop());
      videoElem.srcObject = null;
  }
  </code></pre>
  <p>The video is displaying live fine when the capture is started, but I'm not sure how to actually store its contents. <code>videoElem</code> is a <code>Promise</code> that resolves to a <code>MediaStream</code>. <code>tracks</code> is an array of <code>MediaStreamTrack</code> objects. This is my first time doing any kind of web development, so I'm a bit lost!</p>