title: Why is the 'ended' event not firing for this MediaStreamTrack?
body: <p>I'd like to be informed about a <code>MediaStreamTrack</code>'s end. According to <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack" rel="noreferrer">MDN</a> an <code>ended</code> event is</p>
  
  <blockquote>
    <p>Sent when playback of the track ends (when the value <code>readyState</code> changes to <code>ended</code>).
    Also available using the <code>onended</code> event handler property.</p>
  </blockquote>
  
  <p>So I should be able to setup my callback(s) like:</p>
  
  <pre><code>const [track] = stream.getVideoTracks();
  track.addEventListener('ended', () =&gt; console.log('track ended'));
  track.onended = () =&gt; console.log('track onended');
  </code></pre>
  
  <p>and I expect those to be invoked, once I stop the track via:</p>
  
  <pre><code>tracks.forEach(track =&gt; track.stop());
  // for good measure? See
  // https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/stop#Stopping_a_video_stream
  videoElem.srcObject = null;
  </code></pre>
  
  <p>The problem I'm having is that <strong>the callbacks are not invoked</strong>. I built the following <a href="https://jsfiddle.net/3b5wj9g0/32/" rel="noreferrer">JSFiddle</a>, where 3 MediaStreams are created in 3 different ways:</p>
  
  <ol>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia" rel="noreferrer"><code>getUserMedia</code></a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia" rel="noreferrer"><code>getDisplayMedia</code></a></li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/captureStream" rel="noreferrer"><code>getCaptureStream</code></a> (canvas element)</li>
  </ol>
  
  <p>I also have 3 buttons which stop all tracks for the respective <code>MediaStream</code>. The behaviour is as follows:</p>
  
  <ul>
  <li>All 3 streams are <code>inactive</code>, the MediaStream's <code>oninactive</code> callback is triggered (in Chrome, <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream" rel="noreferrer">seems like Firefox doesn't support this</a>).</li>
  <li>All tracks have a <code>readyState</code> of <code>ended</code> after being stopped.</li>
  <li>If I stop the screen stream (2. getDisplayMedia) via Chrome's UI, the track ended callback(s) are invoked.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/OnLzi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OnLzi.png" alt="Chrome&#39;s stop sharing button"></a></p>
  
  <p>I know that you have to watch out for the track being used by multiple sources, but that shouldn't be the case here, right? Am I missing something obvious?</p>
  
  <blockquote>
    <p>Since multiple tracks may use the same source (for example, if two tabs are using the device's microphone), the source itself isn't necessarily immediately stopped. It is instead disassociated from the track and the track object is stopped. Once no media tracks are using the source, the source may actually be completely stopped.</p>
  </blockquote>