onParticipant{Enabled,Disabled}VideoTrack Freezes Video

[quachsimon]

Steps to reproduce

1. User A and B joins a room, both videos are working
2. User A disables their video

Expected behaviour

• User B receives the onParticipantDisabledVideoTrack
• User B sees a black screen on the TwilioVideoParticipantView (which is user A)

Actual behaviour

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

I noticed that if I toggle the video on User A multiple times (calling setLocalVideoEnabled) fast enough, it will go to be a black screen. Is this because of how streaming works and there is a delay in when user B receives the final stream before user A shuts off their video stream?

I am a newbie when it comes to how video works on Twilio. Any help would be appreciated!

Edit: Another question is, when the onParticipantDisabledVideoTrack is called should we be replacing the TwilioVideoParticipantView with our own custom components?

Environment

• Node.js version: v11.6.0
• React Native version: 0.57.8
• React Native platform + platform version: iOS 12.1.2

react-native-twilio-video-webrtc

Version: master

[slycoder]

Hm, you might be right about it being a race condition ... can you consistently reproduce the issue (e.g. if you call it twice via a setTimeout).

As for whether it should be replaced with a custom component; I guess that's a product decision for you =).

[keithhackbarth]

Just to chime in on this one. I am able to reproduce this fairly consistently.

Reproduction steps:

• Setup the Example included in library
• Connect to a remote participant
• Disable/Enable remote participants video, 10 times, waiting 30 second in between

Expected:

• Screen goes black/blank for 10/10 tests

Actual

• Screen shows last frame of remote video for 8/10 tests

[slycoder]

Has anyone tried when the other client is not using this library? Just trying to see if it's on the sender side or the receiver side.

[keithhackbarth]

@slycoder - Good question. I think it is actually a Twilio issue. Just tried by spinning up two side-by-sides of this https://github.com/twilio/video-quickstart-js as was able to reproduce using a similar javascript-to-javascript use case - so its not limited to React Native.

[keithhackbarth]

Simple fix for me was to listen for onParticipantDisabledVideoTrack and then just change my state to render a black box instead of the video frame.

[slycoder]

Thanks for all the deep digging @keithhackbarth and the workaround.

[akvaliya]

@keithhackbarth Can you provide code snippet of how to show black screen on disable video? I am unable to listen to this event.

[HeyWrecker]

@keithhackbarth I'm running into a similar issue and pattern of behavior, using Vue.js in this particular instance. But, same gist. Running the following code on my disable mutation leaves a paused / frozen video rather than a black screen the majority of the time:

const video_tracks = state.room_data.localParticipant.videoTracks;

video_tracks.forEach(function(publication) {
    publication.track.disable();
 });

Even their sample code for localmediacontrols appears to implement a workaround that actively removes the video element from the DOM when muting video.

[imrohangaur]

listen for onParticipantDisabledVideoTrack and then just change my state to render a black box instead of the video frame.

Hey, I was wondering were you able to find any work around on it?