Subscriber gets on top of the Publisher when the call starts

[albericloop]

Hello,

I am trying to have a large subscriber component (full screen), with a small publisher component (height/3, width/3) on top of it, so I can see the video of the other phone (publisher), but also the video I am sending (publisher).

When I try to call another device, before the connexion is done, everything is OK.

But when the call is starting the subscriber component goes on the top of the publisher one so I can no longer see the video I send.

I tried many things, like "position=absolute", or modifying the dimensions of the Publisher during a call, but as soon as the subscriber starts to receive video stream it goes on top of every other component.

Here is the code inside my render:

      <View style={{flex:1}}>
        <View>
          <Subscriber
              sessionId={this.state.sessionId}
              onSubscribeStop={() => { this.cancelAndBack()}}
              onSubscribeError={() => { this.cancelAndBack()}}
              onSubscribeStart={() => { this.callstarted()}}
              style={{backgroundColor: 'black',
                      height: height,
                      width: width
                      }}
          />
        </View>

        <View style={{position: 'absolute'}}>
          <Publisher
            sessionId = {this.state.sessionId}
            onPublishStop = {() => { this.cancelAndBack()}}
            onPublishError = {() => { this.cancelAndBack()}}
            onPublishStart = {() => {}}
            mute = {this.state.mute}
            style={{backgroundColor: 'black',
                    height:t height/3,
                    width: width/3
                    }}
          />
        </View>
      </View>

Thanks for your help!

[flogy]

Hi @albericloop

I have the exact same issue. It seems to be happening only on Android and not on iOS.

To fix it I have set zOrderMediaOverlay={true} in the Publisher component and zOrderMediaOverlay={false} in the Subscriber component.

It worked for me but now I unfortunately can't set the borderRadius on the View containing the Publisher component anymore...

Hope it helps though.

Cheers

[KawaljeetSBagga]

@flogy I am unfortunate that your solution is not solving the error for me on android. iOS works fine.
@albericloop How were you able to deal with it?

[flogy]

@KawaljeetSBagga I have later migrated to the official RN integration library which I generally found more stable. I am not 100% sure about this issue in specific but I think it did not happen anymore after the migration.

[KawaljeetSBagga]

@flogy Thank you for such a quick response. I am using "opentok-react-native": "^0.13.0" and "react-native": "0.62.0" versions . Seems that I am using the same updated version you just pointed.

In case you need more insight to the code, here is the code.

   <OTSession apiKey={apiKey} sessionId={sessionId} token={token}>
    <OTSubscriber
      style={{width: '100%', height: '100%'}}
      zOrderMediaOverlay={false}
    />
    <View
      style={{
        position: 'absolute',
        bottom: 120,
        right: 20,
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        alignSelf: 'flex-end',
      }}>
      <OTPublisher
        style={{
          width: 100,
          height: 100,
        }}
        properties={{
          publishAudio,
          cameraPosition,
          publishVideo,
        }}
        zOrderMediaOverlay={true}
        eventHandlers={publisherEventHandlers}
      />
    </View>
  </OTSession>

[flogy]

Could'nt it be because of your flex: 1 in the view style? Looks like this makes it full screen to me.

The rest of the code is quite similar to mine, except I don't use the zOrderMediaOverlay props anymore. Instead, I have configured the following session options prop:

const sessionOptions = {
  androidOnTop: "publisher",
  androidZOrder: "onTop",
  useTextureViews: true,
}

[KawaljeetSBagga]

Can you please paste your entire snippet here?

[KawaljeetSBagga]

Hey @flogy thank you so much man! sessionOptions were enough for me to figure it out. It's working flawlessly.

[flogy]

Awesome, glad I could help 🙂