javascript - 为什么没有为此 MediaStreamTrack 触发 'ended' 事件？

Question

我想了解 MediaStreamTrack '发送。根据MDN一个 ended事件是

Sent when playback of the track ends (when the value readyState changes to ended). Also available using the onended event handler property.

所以我应该能够像这样设置我的回调:

const [track] = stream.getVideoTracks();
track.addEventListener('ended', () => console.log('track ended'));
track.onended = () => console.log('track onended');

一旦我通过以下方式停止跟踪，我希望那些被调用:

tracks.forEach(track => track.stop());
// for good measure? See
// https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/stop#Stopping_a_video_stream
videoElem.srcObject = null;

我遇到的问题是 未调用回调 .我构建了以下 JSFiddle ，其中 3 个 MediaStreams 以 3 种不同的方式创建:

getUserMedia

getDisplayMedia

getCaptureStream ( Canvas 元素)

我还有 3 个按钮可以停止各个 MediaStream 的所有轨道.行为如下:

所有 3 个流都是 inactive , MediaStream 的 oninactive回调被触发(在 Chrome 中，seems like Firefox doesn't support this)。

所有轨道都有 readyState的 ended被阻止后。

如果我通过 Chrome 的 UI 停止屏幕流(2. getDisplayMedia)，则会调用跟踪结束的回调。

我知道您必须注意被多个来源使用的轨道，但这里不应该是这种情况，对吧？我错过了一些明显的东西吗？

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.

Answer 1

为什么没有为此 MediaStreamTrack 触发“结束”事件？

因为ended是明确的 不是 当您调用 track.stop() 时触发你自己。它仅在轨道因其他原因结束时触发。从规范:

Fired when...

The MediaStreamTrack object's source will no longer provide any data, either because the user revoked the permissions, or because the source device has been ejected, or because the remote peer permanently stopped sending data.

这是设计使然。当你自己停止它时，你的想法是你不需要一个事件。要解决它，请执行以下操作:

track.stop();
track.dispatchEvent(new Event("ended"));

MediaStream 的 oninactive 回调被触发(在 Chrome 中，似乎 Firefox 不支持这个)。
stream.oninactive和 inactive事件已被弃用，并且不再在规范中。

作为解决方法，您可以使用类似的 ended媒体元素上的事件:

video.srcObject = stream;
await new Promise(resolve => video.onloadedmetadata = resolve);
video.addEventListener("ended", () => console.log("inactive!")); 

唉，这似乎还不能在 Chrome 中工作，但它 works in Firefox .