如何正确关闭WebRTC连接以从chrome://webrtc-internals移除并释放资源

问题根源分析 #

你当前的关闭逻辑存在几个关键缺陷，导致资源无法被浏览器正常回收：

1. 事件监听器移除方式错误：直接通过this.peer.onicecandidate获取的并非你绑定的原始处理函数，导致removeEventListener无效，监听回调残留引发内存泄漏。
2. 未清理媒体轨道：本地/远端的摄像头、麦克风轨道未停止，持续占用硬件资源。
3. 未释放DOM与对象引用：渲染视频的元素未清空流引用，PeerConnection对象未置空，阻止垃圾回收（GC）。
4. 未清理会话相关数据：ICE候选、会话描述等对象残留，增加内存占用。

完整修复方案 #

1. 初始化时保存事件处理函数引用 #

绑定事件时必须保留原始函数的引用，才能在关闭时正确移除：

// 初始化PeerConnection时绑定事件并保存引用
this.iceCandidateHandler = (e) => { /* 你的ICE候选处理逻辑 */ };
this.peer.addEventListener("icecandidate", this.iceCandidateHandler);

this.trackHandler = (e) => { /* 你的轨道接收处理逻辑 */ };
this.peer.addEventListener("track", this.trackHandler);

this.negotiationNeededHandler = () => { /* 你的协商触发处理逻辑 */ };
this.peer.addEventListener("negotiationneeded", this.negotiationNeededHandler);

2. 修复后的连接关闭函数 #

async closeConnection() {
  if (!this.peer) return;

  // 移除事件监听器
  if (this.iceCandidateHandler) {
    this.peer.removeEventListener("icecandidate", this.iceCandidateHandler);
    this.iceCandidateHandler = null;
  }
  if (this.trackHandler) {
    this.peer.removeEventListener("track", this.trackHandler);
    this.trackHandler = null;
  }
  if (this.negotiationNeededHandler) {
    this.peer.removeEventListener("negotiationneeded", this.negotiationNeededHandler);
    this.negotiationNeededHandler = null;
  }

  // 停止并清理本地媒体轨道
  if (this.localStream) {
    this.localStream.getTracks().forEach(track => track.stop());
    this.localStream = null;
  }

  // 清空远端视频渲染元素并停止远端轨道
  if (this.remoteVideo) {
    this.remoteVideo.srcObject = null;
  }
  if (this.remoteStream) {
    this.remoteStream.getTracks().forEach(track => track.stop());
    this.remoteStream = null;
  }

  // 关闭PeerConnection并释放引用
  this.peer.close();
  this.peer = null;

  // 清理会话相关数据
  this.localICECandidates = null;
  this.remoteICECandidates = null;
  this.localDescription = null;
  this.remoteDescription = null;

  console.log('Peer connection closed and resources released');
}

3. 额外注意事项 #

• chrome://webrtc-internals中的历史记录不会立即消失，浏览器会保留一段时间的连接日志，但只要资源正确释放，不会累积导致内存溢出。
• 可以用Chrome DevTools的Memory面板拍摄内存快照，检查是否还有PeerConnection、MediaStream等对象残留，验证修复效果。

内容的提问来源于stack exchange，提问作者Savinder