twilio video room not geting participantDisconnected event

Question

i'm trying to implement a videochat using twilio api and i'm having some issues when dealing with remote participant events.

I'm following the example you have on the blog to do this using angular 9, but i have modified (and probably broken) it a bit to match a bit more what i had in mind.

the problem i'm having is that if the remote participant instead of leaving the room properly, he closes the browser i'm not getting a participantDisconnect event (or at least i didn't wait enough for it) and that makes the remote camera keeps frozen in the screen.

I'm using "twilio-video": "2.5.1"

Here is the code

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

Maybe i'm missing some Track events that i should listen for?

To give some more info i'm using the same computer but different browsers for the local / remote participants

Thanks a lot in advance!

Not sure if there is a cleaner solution, but i have seen that this get's fixed adding a listener to window:beforeunload so i can detect the page getting unloaded and leave gracefully the room of the video chat — Acampoh

Nagesh Tripathi Nagesh Tripathi · Accepted Answer · 2020-07-05T08:30:18

In our implementation(Also mentioned in comments by You) we've used unload event like below to understand if the video call was disconnected due to closing of window.

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

activeRoom object is kept when the participant joins the room. 'roomJoined' function in below code captures room (or activeRoom) as argument.

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

twilio video room not geting participantDisconnected event

1 Answers