Twilio video onParticipant{Disabled}VideoTrack Freezes Video

Question

I have used twilio-video:1.19.2 in angular 8.

I have implemented functionality of one-to-one video call.

Below is my code i use to enable/disable video.

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

Video call seems to work fine. But when i pause video on participant side only some time black screen is displayed. Most of time it freezes video (last recorded frame stays).

This issue is reported on react-twilio library https://github.com/blackuy/react-native-twilio-video-webrtc/issues/165

Does anyone know how to resolve this?

Is there any way to add black(video track) screen?

I want to show black screen when video is paused from participant side.

Answer 1

Twilio developer evangelist here.

What you need to do in this case is handle the remote user disabling their track and remove it from your local view.

To do this, you can listen for the Participant's trackDisabled event and handle it accordingly.

remoteParticipant.on('trackDisabled', track => {
  // hide or remove the media element related to this track
});

You should ensure to write code to handle the track being enabled again:

remoteParticipant.on('trackEnabled', track => {
  // show the track again
});