如何优雅的监听MediaStream媒体流被释放？

目录

问题

解决

一、属性法

二、事件法

彩蛋

问题

大家知道通过getUserMedia接口可以拿到浏览器对应本地的音视频媒体流，那么我们有什么方法可以监听这路媒体流被释放了或者不可用了呢？

解决

其实，如果我们想直接在MediaStream类上下手是不可能，因为MediaStream没有专门的监听事件。找遍了文档，好不容易发现一个和end相关的还是一个属性值，而且马上就要废弃了。具体内容可以如下参考链接：

https://developer.mozilla.org/en-US/docs/Web/API/MediaStream

因此，想实现这个功能我们需要转换一下思路。我们知道MediaStream本身会包含若干个MediaStreamTrack，可能是视频track，也可能是音频track，或者二者都有，而这些MediaStreamTrack实例就有类似的停止监听事件了。我们可以通过MediaStreamTrack的end事件来实现这个功能。

目前有两种方法可以监听MediaStreamTrack结束不可用了。

一、属性法

通过MediaStreamTrack实例的onended属性来实现。

track.onended = function() {
  let statusElem = document.getElementById("statusId");
  statusElem.src = "/stopped.png";
}

二、事件法

通过MediaStreamTrack实例的ended监听事件来实现。

track.addEventListener('ended', () => {
  let statusElem = document.getElementById("statusId");
  statusElem.src = "/stopped.png";
})

基于上述内容，我们就可以知道MediaStream有没有被释放，只需要判断其对应的track是不是都被释放了就可以了。是不是很巧妙？！