2.1.4 MediaStream事件_WebRTC技术详解：从0到1构建多人视频会议系统-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

2.1.4　MediaStream事件

1. addtrack事件

当有新的媒体轨道（MediaStreamTrack）加入时触发该事件，对应事件句柄onaddtrack。

注意，只有在如下情况下，才会触发该事件，主动调用MediaStream.addTrack()方法则不会触发。

RTCPeerConnection重新协商。
HTMLMediaElement.captureStream()返回新的媒体轨道。

如代码清单2-6所示，当有新的媒体轨道添加到媒体流时，显示新增媒体轨道的种类和标签。

代码清单2-6　onaddtrack示例

// event类型为MediaStreamTrackEvent
// event.track类型为MediaStreamTrack
stream.onaddtrack = (event) => {
  let trackList = document.getElementById("tracks");
  let label = document.createElement("li");

  label.innerHTML = event.track.kind + ": " + event.track.label;
  trackList.appendChild(label);
};

此外，也可以使用addEventListener()方法监听事件addtrack。

2. removetrack事件

当有媒体轨道被移除时触发该事件，对应事件句柄onremovetrack。

注意，只有在如下情况下才会触发该事件，主动调用MediaStream.removeTrack()方法则不会触发。

RTCPeerConnection重新协商。
HTMLMediaElement.captureStream()返回新的媒体轨道。

如代码清单2-7所示，当从媒体流中删除媒体轨道时，记录该媒体轨道信息。

代码清单2-7　onremovetrack示例

// event类型为MediaStreamTrackEvent
// event.track类型为MediaStreamTrack
stream.onremovetrack = (event) => {
  let trackList = document.getElementById("tracks");
  let label = document.createElement("li");

  label.innerHTML = "Removed: " + event.track.kind + ": " + event.track.label;
  trackList.appendChild(label);
};

此外，也可以使用addEventListener()方法监听事件removetrack。