如何避免Twilio房间断开后页面残留冗余音视频元素

你可以通过跟踪订阅的媒体元素，配合Twilio的事件监听来精准清理残留的<video>和<audio>元素，具体方案如下：

1. 保存媒体元素的引用 #

先定义一个变量存储每个Track对应的DOM元素，用Map做映射最方便：

// 类内或全局定义，用于关联track与对应的DOM元素
private trackElements = new Map<any, HTMLElement>();

2. 订阅轨道时记录元素并监听取消订阅事件 #

在trackSubscribed事件中保存attach后的元素，同时监听trackUnsubscribed事件及时移除元素：

this.room.on('participantConnected', (participant:any) => {
  console.log(`Participant connected: ${participant.identity}`);
  
  participant.on('trackSubscribed', (track:any) => {
    console.log(`Participant trackSubscribed `);
    const mediaElement = track.attach();
    // 记录track和元素的映射关系
    this.trackElements.set(track, mediaElement);
    (document.getElementById('remote-media-div') as HTMLElement).appendChild(mediaElement);
  });

  // 当轨道取消订阅时，移除对应的DOM元素
  participant.on('trackUnsubscribed', (track:any) => {
    const mediaElement = this.trackElements.get(track);
    if (mediaElement) {
      mediaElement.remove();
      this.trackElements.delete(track);
    }
  });
});

3. 断开房间时彻底清理所有残留元素 #

在调用disconnect前后，或者监听房间的disconnect事件，一次性清空所有残留元素：

// 方式1：主动调用disconnect时同步清理
this.room.disconnect();
// 遍历移除所有保存的媒体元素
this.trackElements.forEach(element => element.remove());
this.trackElements.clear();
// 也可以直接清空容器节点
(document.getElementById('remote-media-div') as HTMLElement).innerHTML = '';

// 方式2：监听房间断开事件自动清理
this.room.on('disconnect', () => {
  this.trackElements.forEach(element => element.remove());
  this.trackElements.clear();
  (document.getElementById('remote-media-div') as HTMLElement).innerHTML = '';
});

这样不管是单个参与者断开导致轨道取消订阅，还是整个房间断开，都能确保remote-media-div里的媒体元素被彻底移除，不会残留冗余节点。

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