Bug: Android: video stream not always rendering when streams are updated

[og2t]

Bug Report

Current behavior

Video stream doesn't always render when streams are updated (e.g. new participants joining the call)

Steps to reproduce

Start the call on Android, then try joining and leave the call with other device (or playground). Occasionally, the newly joined stream will be blank.

What is the current bug behavior?

On first mount of the <OTSubscriberView> component the stream is not rendered.

What is the expected correct behavior?

<OTSubscriberView> component should show the video stream on first mount.

Current workaround

Force render the Subscriber:

const Subscriber = ({ streamId }) => {
  // A hack to force rerender video stream on Android to make it appear
  const [renderSubscriber, setRenderSubscriber] = useState(false);
  useEffect(() => {
    setTimeout(() => setRenderSubscriber(true), 0);
    // useEffect shouldn't return anything
    return undefined;
  });
  return (
    {renderSubscriber ? <OTSubscriberView streamId={streamId} /> : <></>}
  );
};

[t4ngth00]

I'm facing the same issue.

[HarshitPadalia]

I am facing the same issue

[enricop89]

@og2t Thanks for filling the issue. Are you able to reproduce it also with the latest version of RN and Android (2.17.1)?

I tried but I wasn't able to repro.

[HarshitPadalia]

@og2t Thanks for filling the issue. Are you able to reproduce it also with the latest version of RN and Android (2.17.1)?

I tried but I wasn't able to repro.

@enricop89 I have found 1 issue is that when I change audio from publisher side then stream property changed method called which proper but when I change video from publisher side then stream destroyed called and in this method data is showing has video property to true can you check my implementation?

<ImageBackground
          resizeMode="cover"
          source={image}
          style={{
            flex: 1,
            justifyContent: 'center',
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height * 0.7,
          }}>
          <View style={{ flex: 1, flexDirection: 'row' }}>
            {this.props.isFocused && (
              <OTSession
                apiKey={constant.default.apiKey}
                sessionId={constant.default.sessionId}
                token={constant.default.apiToken} 
               signal={this.state.signal}
                eventHandlers={this.sessionEventHandlers}
                ref={instance => {
                  this.session = instance;
                }}
                audioTrack={true}
                videoTrack={true}>

                <OTSubscriber
                  properties={{
                    subscribeToVideo: true,
                    subscribeToAudio: true,
                  }}
                  style={{
                    width: Dimensions.get('window').width,
                    height:  this.state.VideoSession
                        ? 700
                        : 0,
                    zIndex: this.state.VideoSession ? 0 : -1,
                  }}
                />
                <OTPublisher
                  style={{
    
                    width:  100,
                    height:120,
                    position: 'absolute',
                    top:  30,
                    right:  30,
                    zIndex:  10,
                  }}
                  properties={{
                    publishVideo: this.state.isVideoOn,
                    publishAudio: !this.state.isMuteCall,
                    name: '',
                    showControls: true,
                    cameraPosition: this.state.cameraPosition,
                  }}
                />
                {/* )} */}
              </OTSession>
            )}
            <KeepAwake />
          </View>
        </ImageBackground>

this code I have used at both publisher and subscriber side if anything incorrect then tell me thanks in advance

[HarshitPadalia]

@og2t Thanks for filling the issue. Are you able to reproduce it also with the latest version of RN and Android (2.17.1)?
I tried but I wasn't able to repro.

@enricop89 I have found 1 issue is that when I change audio from publisher side then stream property changed method called which proper but when I change video from publisher side then stream destroyed called and in this method data is showing has video property to true can you check my implementation?

<ImageBackground
          resizeMode="cover"
          source={image}
          style={{
            flex: 1,
            justifyContent: 'center',
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height * 0.7,
          }}>
          <View style={{ flex: 1, flexDirection: 'row' }}>
            {this.props.isFocused && (
              <OTSession
                apiKey={constant.default.apiKey}
                sessionId={constant.default.sessionId}
                token={constant.default.apiToken} 
               signal={this.state.signal}
                eventHandlers={this.sessionEventHandlers}
                ref={instance => {
                  this.session = instance;
                }}
                audioTrack={true}
                videoTrack={true}>

                <OTSubscriber
                  properties={{
                    subscribeToVideo: true,
                    subscribeToAudio: true,
                  }}
                  style={{
                    width: Dimensions.get('window').width,
                    height:  this.state.VideoSession
                        ? 700
                        : 0,
                    zIndex: this.state.VideoSession ? 0 : -1,
                  }}
                />
                <OTPublisher
                  style={{
    
                    width:  100,
                    height:120,
                    position: 'absolute',
                    top:  30,
                    right:  30,
                    zIndex:  10,
                  }}
                  properties={{
                    publishVideo: this.state.isVideoOn,
                    publishAudio: !this.state.isMuteCall,
                    name: '',
                    showControls: true,
                    cameraPosition: this.state.cameraPosition,
                  }}
                />
                {/* )} */}
              </OTSession>
            )}
            <KeepAwake />
          </View>
        </ImageBackground>

this code I have used at both publisher and subscriber side if anything incorrect then tell me thanks in advance

and also send me code changes required if any

[HarshitPadalia]

any updates on #84?