时间戳

首页 > 解决方案 > twilio 视频室未获得参与者断开连接事件

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

问题描述

我正在尝试使用 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 事件？

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

提前非常感谢！

标签： angulareventsvideotwilio

解决方案

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

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);
        });

推荐阅读