title: MediaRecorder API recorder won't call onstop when recording multiple tracks
body: <p>I've got a very weird issue with the MediaRecorder API which I haven't been able to fix the last two days.</p>
  
  <p>This simplified sample works perfectly fine, when I click the Chrome UI "Stop Sharing" button, everything stops appropriately:</p>
  
  <pre><code>desktopStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
  });
  
  let rec = new MediaRecorder(desktopStream, {
      mimeType: "video/webm; codecs=vp8,opus",
  });
  
  rec.onstop = async () =&gt; {
    desktopStream.getTracks().forEach((s) =&gt; s.stop());
    desktopStream = null;
  
    //blobs.push(MediaRecorder.requestData());
    blob = new Blob(blobs, {
      type: "video/webm",
    });
  };
  </code></pre>
  
  <p>However this doesn't, it keeps recording (or some MediaTracks keep running, not entirely sure):</p>
  
  <pre><code>desktopStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
  });
  
  voiceStream = await navigator.mediaDevices.getUserMedia({
      video: false,
      audio: true,
    });
  
  // this is the culprit, when commented everything works as expected
  desktopStream.addTrack(voiceStream.getAudioTracks()[0]);
  
  let rec = new MediaRecorder(desktopStream, {
      mimeType: "video/webm; codecs=vp8,opus",
  });
  
  rec.onstop = async () =&gt; {
    //explicitly stop tracks
    desktopStream.getTracks().forEach((s) =&gt; s.stop();
    voiceStream.getTracks().forEach((s) =&gt; s.stop());
  
    desktopStream = null;
    voiceStream = null;
  
    //blobs.push(MediaRecorder.requestData());
    blob = new Blob(blobs, {
      type: "video/webm",
    });
  };
  </code></pre>
  
  <p>The second code block results in chrome still showing this red recording icon. I've read many times that you need to stop the tracks manually in a forEach loop, which I do, but it never gets to that, the recorder.onstop function doesn't seem to get called.</p>
  
  <p>Here's the complete fiddle: <a href="https://jsfiddle.net/agcty/xhb0c4o3/19/" rel="nofollow noreferrer">https://jsfiddle.net/agcty/xhb0c4o3/19/</a></p>
  
  <p>Steps to reproduce:</p>
  
  <ol>
  <li>Click "Start Recording"  </li>
  <li>Select Screen</li>
  <li>Do anything for some seconds</li>
  <li>Click the Chrome "Stop Sharing" button, not the button in the fiddle</li>
  <li>The red recording icon will still show and you can't download the recording when clicking "Download"</li>
  <li>Click "Stop Recording" (the button in the fiddle), now the recording is properly stopped</li>
  <li>Now comment the line "desktopStream.addTrack(voiceStream.getAudioTracks()[0]);"</li>
  <li>Everything works</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/MEk6B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MEk6B.jpg" alt="enter image description here"></a></p>