正确拆除 WebRTC RTCPeerConnection

问题描述

我尝试做一个简单的 WebRTC p2p 视频聊天浏览器应用程序。我设置了一个信号服务器，并有两个对等点进行所有 SDP 和 ICE 握手。我的一些代码片段：

pc = new RTCPeerConnection(config);
pc.onicecandidate = (event) => {
 ...
}
pc.ontrack(event) =>{
  if (event.track.kind === 'video') {
    // add the stream as the srcObject of a video tag
  }
  event.streams[0].onremovetrack = (e) => {
    // want to remove the stream from the video tag
  }
}

当一个peer完成后，我会做以下事情：

pc.stop();

我只是关闭了 RTCPeerConnection。但我没有看到 onremovetrack 在另一个对等点上被触发。

关闭对等点以便通知另一个对等点并触发 onremovetrack 的正确方法是什么？

解决方法

我认为您应该使用 RTCPeerConnection.removeTrack() 方法，它会在另一端触发 MediaStream.onremovetrack 事件。

要获取连接轨迹，请使用 RTCPeerConnection.getSenders() 方法。

RTCPeerConnection 方法 getSenders() 返回一个数组 RTCRtpSender 对象，每个对象代表 RTP 发送者负责传输一轨的数据。

示例

let senders = pc.getSenders()

senders.forEach((sender) => {
  pc.removeTrack(sender)
})

这将从连接中删除所有曲目。有一种完全关闭连接的实验性方法，RTCPeerConnection.close()，检查 compatibility table。在删除曲目后使用它，这样您将获得 onremovetrack 事件：

pc.close()

调用这个方法会终止 RTCPeerConnection 的 ICE 代理，结束任何正在进行的 ICE 处理和任何活动的流。

替代方案

另一种方式是立即调用close()方法，监听另一端的RTCPeerConnection.onconnectionstatechange事件，勾选example。

更多信息

getSenders() 方法
removeTrack() 方法
onremovetrack 事件处理程序
close() 方法
onconnectionstatechange 事件处理程序

mediastreamtrack rtcpeerconnection webrtc webrtc webrtc