twilio 视频室未获得参与者断开连接事件答案

【问题标题】：twilio video room not geting participantDisconnected eventtwilio 视频室未获得参与者断开连接事件
【发布时间】：2020-07-04 14:45:31
【问题描述】：

我正在尝试使用 twilio api 实现视频聊天，但在处理远程参与者事件时遇到了一些问题。

我正在按照您在博客上的示例使用 angular 9 来执行此操作，但我已对其进行了一些修改（并且可能已损坏）以更符合我的想法。

我遇到的问题是，如果远程参与者没有正确离开房间，而是关闭了浏览器，我没有收到participantDisconnect 事件（或者至少我没有等待足够的时间）并且这会使远程摄像头一直冻结在屏幕上。

我正在使用“twilio-video”：“2.5.1”

这里是代码

  async connectToRoom() {
    let tracks = await Promise.all([createLocalAudioTrack(), this.camera.videoTrack]);
    let roomInfo = await this.videoChatService.joinEvent(this.eventId);
    this.activeRoom = await this.videoChatService.connectToRoom(roomInfo, tracks);
    this.participants = this.activeRoom.participants;
    this.participants.forEach(participant => this.registerParticipantEvents(participant));
    
    this.activeRoom
      .on('disconnected',
        (room: Room) => room.localParticipant.tracks.forEach(publication => this.detachLocalTrack(publication.track)))
      .on('participantConnected',
        (participant: RemoteParticipant) => this.add(participant))
      .on('participantDisconnected',
        (participant: RemoteParticipant) => this.remove(participant))
      .on('dominantSpeakerChanged',
        (dominantSpeaker: RemoteParticipant) => this.loudest(dominantSpeaker));
  }

也许我错过了一些我应该听的 Track 事件？

为了提供更多信息，我使用同一台计算机，但本地/远程参与者使用不同的浏览器

提前非常感谢！

【问题讨论】：

不确定是否有更清洁的解决方案，但我已经看到这个问题已修复，添加了一个侦听器到window:beforeunload，这样我就可以检测到页面被卸载并优雅地离开视频聊天的房间

标签： angular events video twilio

【解决方案1】：

在我们的实现中（您在 cmets 中也提到过），我们使用了如下所示的卸载事件来了解视频通话是否由于窗口关闭而断开。

window.addEventListener('beforeunload', leaveRoomIfJoined);
// Leave Room.
function leaveRoomIfJoined() {
    if (activeRoom) {
        activeRoom.disconnect();
    }
}

activeRoom 对象在参与者加入房间时被保留。下面代码中的“roomJoined”函数将房间（或 activeRoom）捕获为参数。

Video.connect(tokenTwilio, connectOptions).then(roomJoined, function(error) {
            log('Could not connect to Twilio: ' + error.message);
        });

【讨论】：