onParticipant{Enabled,Disabled}VideoTrack Freezes Video

[akvaliya]

Steps to reproduce
User A and B joins a room, both videos are working
User A disables their video

toggleVideo() {
    this.videoConference.isPaused = !this.videoConference.isPaused;
    this.twilioRoom.localParticipant.videoTracks.forEach(track => {
        if (this.videoConference.isPaused) {
            track.disable();
        } else {
            track.enable();
        }
    });
}

I have used twilio-video it in angular 8.

Expected behaviour
User B sees a black screen on the TwilioVideoParticipantView (which is user A)

Actual behaviour
User B sees a frozen screen (or the last frame of the video) on the TwilioVideoParticipantView (which is user A)

Software versions:

• Browser(s): Google Chrome v77.0.3865.120 (Official Build) (64-bit)
• Operating System: 1.19.2
• twilio-video.js: - [x] Third-party libraries (e.g., Angular, React, etc.): Angular 8

[manjeshbhargav]

@akvaliya ,

Thanks for writing in with your issue. It looks like you are using a Group Room, where when A disables the VideoTrack, our media server stops sending media, and does not send black frames.
That is the reason B sees the last frame sent by A which gives the appearance of being frozen.

You can work around this in your UI where you can listen to the disabled and enabled events on the RemoteVideoTrack and hide or show the <video> element accordingly.

Please let me know if this works out for you.

Thanks,

Manjesh Malavalli
JSDK Team

[akvaliya]

Some times i get black screen & sometimes i get last freezing screen. I am using below code to connect to room. I am not sure it's group room. If it's problem of group room then how can i connect to one-to-one room?

connect('$TOKEN', { name:'my-new-room' }).then(room => {
  console.log(`Successfully joined a Room: ${room}`);
  room.on('participantConnected', participant => {
    console.log(`A remote Participant connected: ${participant}`);
  });
}, error => {
  console.error(`Unable to connect to Room: ${error.message}`);
});

I can listen to that event. I don't want to remove track since it will look like participant is disconnected. How can i send black screen from that event?

[douglasrcjames]

This is also relevant to what I am working on with my React.js app. I am unsure on how to listen to the disabled/enabled events on the RemoteVideoTrack for a room in progress.

In my React component I have a function with various room.on functions such as

roomJoined(room) {
...
room.on('trackRemoved', (track, participant) => {
			console.log(participant.identity + ' removed track: ' + track.kind);
			this.detachTracks([track]);
		});
...
}

But none of my console logs will go off if a user toggles cam/mic during the call. This makes sense since I don't think this roomJoined function is actively communicating with the call with Twilio so it wouldn't be updated. Do I need to implement my own flagging system to toggle the opposite user's mic/cam being on/off with Firebase and then listen for those changes in real time? From what you mentioned to @akvaliya, it seems there are RemoteVideoTrack events I can listen to, but I am unsure how?

[manjeshbhargav]

@douglasrcjames ,

Whenever you get a "trackAdded" (1.x) or "trackSubscribed" (2.x) event, you can listen to "enabled" and "disabled" events on it:

room.on('trackAdded', track => {
  track.on('enabled', () => {...});
  track.on('disabled', () => {...});
});

Now, when the other side mutes/unmutes the mic or camera, you will be able to receive these events and update the UI.

Please let me know if this works for you.

Thanks,

Manjesh Malavalli
JSDK Team

[douglasrcjames]

This helped, I was using trackAdded and trackSubscribed interchangeably, I didn't realize those were renamed from v1 to v2. I had to take a look at the quickstart example again and just rebuilt my setup and this worked after the rebuild. Thanks!