用户交互创建的RTCPeerConnection无法销毁与垃圾回收问题求助

这个问题确实有点诡异——自动创建销毁的RTCPeerConnection能正常被回收，但手动点击按钮创建的就死活留着。结合你观察到的「未销毁的连接仍关联媒体流」细节，我给你几个具体的排查方向：

1. 全局变量的隐式引用泄漏 #

你用了全局的pc变量存储实例，虽然销毁时设为null，但DOM按钮的点击事件回调（尤其是onClick属性里的字符串执行逻辑）可能在浏览器的事件处理上下文里留下了隐式引用。比如浏览器的事件栈可能暂时保留对pc的引用，或者WebRTC Internals的调试记录器对「用户交互触发的实例」持有更强的追踪引用。

可以试试把全局变量改成局部闭包存储，用WeakMap来管理实例（WeakMap的键是弱引用，不会阻止垃圾回收）：

const pcMap = new WeakMap();
let activePcKey = Symbol();

function createPeerConnection() {
    console.log("CREATE CONNECTION");
    const pc = new RTCPeerConnection();
    pcMap.set(activePcKey, pc);
}

function destroyPeerConnection() {
    console.log("DISPOSE CONNECTION");
    const pc = pcMap.get(activePcKey);
    if (pc) {
        // 你的清理逻辑（清空事件监听、移除轨道等）
        pc.close();
        pcMap.delete(activePcKey);
        activePcKey = Symbol(); // 重置key，彻底切断旧实例的引用链
    }
}

2. 媒体流关联的彻底清理 #

你已经做了很多流清理操作，但可能还有遗漏：

• 确认所有MediaStream实例被手动释放：如果存在浏览器隐式关联的流（比如之前授权过摄像头后残留的），调用stream.getTracks().forEach(t => t.stop())，并把所有流引用设为null。
• 在pc.close()后，显式清空收发器的核心引用：

  pc.getTransceivers().forEach(transceiver => {
      transceiver.sender = null;
      transceiver.receiver = null;
  });
  

另外，你可以手动触发Chrome的垃圾回收（DevTools → Memory面板 → 点击垃圾桶图标），看看实例是否会消失——如果手动触发后能清理，说明是浏览器GC时机的问题，但自动实例能正常回收的话，还是指向手动创建的实例有额外引用。

3. 事件处理上下文的差异 #

自动创建的实例是在setTimeout回调（全局上下文）中生成的，而手动创建的是在DOM点击事件回调中生成的。浏览器对「用户交互触发的资源」可能有不同的生命周期管理策略：
你可以试试把按钮点击的逻辑放到setTimeout里，模拟自动创建的上下文：

<button onClick="setTimeout(createPeerConnection, 0)">CREATE</button>
<button onClick="setTimeout(destroyPeerConnection, 0)">DESTROY</button>

如果这样实例能被正常回收，说明问题确实出在DOM事件上下文的隐式引用上。

4. Chrome版本或特定Bug排查 #

某些旧版本的Chrome存在WebRTC实例回收的bug，你可以升级到最新稳定版试试。另外在Firefox等其他浏览器测试你的简化页面，如果其他浏览器没有这个问题，那大概率是Chrome的特定bug，可以考虑提交官方反馈。

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