Android: How to overlap/overlay publisher view over subscriber view?

[sunweiyang]

We need to use opentok-react-native to create overlapping views on the same screen (publisher thumbnail over subscriber).

Here is an example screen of what we need:

We've tried to use position: absolute styling, but this fails to render properly:

import { Dimensions, View } from "react-native";
import { OTSession, OTPublisher, OTSubscriber } from "opentok-react-native";

const windowWidth = Dimensions.get("window").width;
const windowHeight = Dimensions.get("window").height;

...

          <View style={{ flex: 1 }} >
            <OTSession
              apiKey={this.apiKey}
              sessionId={this.sessionId}
              token={this.token}
              eventHandlers={this.sessionEventHandlers}
            >
              <OTSubscriber
                properties={this.subscriberProperties}
                eventHandlers={this.subscriberEventHandlers}
                style={{ width: windowWidth, height: windowHeight }}
              />
              <OTPublisher
                style={{
                  position: "absolute",
                  top: windowWidth / 10,
                  right: windowWidth / 20,
                  width: windowWidth / 5,
                  height: windowHeight / 6
                }}
                properties={this.publisherProperties}
                eventHandlers={this.publisherEventHandlers}
              />
            </OTSession>
          </View>
...

The straightforward non-overlapping implementation (like in opentok-react-native-samples) renders as expected.
How can our desired overlap/overlay of OTPublisher on top of OTSubscriber be accomplished?

[jonathanwmaddison]

@sunweiyang I have the same exact issue but it only occurs on Android, on iOS the absolute positioning of the publisher works well.

[sunweiyang]

@jonathanwmaddison thanks, I can also confirm that absolute positioning of publisher works on iOS.

I've figured out that on Android, for a normal 2-user OpenTok session, the subscriber is currently always rendered on top of the publisher. I've observed that the publisher view instantiates and definitely exists for Android, but is simply covered up by the subscriber view. Unfortunately, defining zIndex style does not affect this behavior.

Does anyone have a working Android solution for this?

Edit: I suspect that it's because this library's Android implementation uses FrameLayouts, which are rendered in the order that the views are added. The publisher view is usually first to be created, so when the subscriber view is added after, it covers up the publisher view that's already there. This requires a native-side solution.

[jonathanwmaddison]

@sunweiyang Have you found any way around this issue? I haven't dug into the native android implementation since Android is currently lower on our priority list.

[sunweiyang]

@jonathanwmaddison Since we also have limited development resources, for now we have simply fallen back on pure Android native (before we began using opentok-react-native). This is currently the main blocker for us from using opentok-react-native in Android. If/when this issue is resolved, we'll immediately update our Android codebase for opentok-react-native.

[rockyip]

Hi, I have the same issue as yours and I found a solution from the android SDK
https://github.com/opentok/opentok-android-sdk-samples/issues/136#issuecomment-322218524
Just apply the change to the method "initSession" in OTSessionManager.java

[msach22]

@sunweiyang @jonathanwmaddison @rockyip Thanks for sharing your findings. I will check this out and get back to you all soon!

[asatour]

You should draw the publisher again when the subscriber is viewed (so in two case: when the is connecting and when the subscriber is streaming

renderTocKBox() {
   console.info(this.state.connection)
   const {tokboxProToken, tokboxSessionId, tokboxApiKey} = this.props.teleconsultation
   return (

     <View>
       <OTSession
         apiKey={tokboxApiKey}
         sessionId={tokboxSessionId}
         token={tokboxProToken}
         onError={this.onSessionError}
         eventHandlers={this.sessionEventHandlers}
       >
         <View>
           {
             this.state.connection !== this.STATUS.CONNECTING || this.state.connection === this.STATUS.SUBSCRIBER_CONNECTED ?
               (
                 <View>
                   <OTPublisher
                     properties={styles.publisher.properties}
                     style={styles.publisher.style}
                     onPublish={this.onPublish}
                     onError={this.onPublishError}
                     eventHandlers={this.publisherEventHandlers}
                   />
                 </View>
               ) : null
           }

           <OTSubscriber
             properties={styles.subscriber.properties}
             style={styles.subscriber.style}
             onSubscribe={this.onSubscribe}
             onError={this.onSubscribeError}
             eventHandlers={this.subscriberEventHandlers}
           />
           {
             this.state.connection !== this.STATUS.SUBSCRIBER_CONNECTED ?
               (
                 this.renderConnecting()
               ) : null
           }
         </View>
       </OTSession>
     </View>

   )
 }

[sunweiyang]

Thanks @asatour but my app needs a modal already for other purposes, and RN currently does not support multiple simultaneous modals:
facebook/react-native#3445
https://react-native.canny.io/feature-requests/p/multiple-modal-components

A true solution for overlapping publisher still needs to be found that does not use modals.

[asatour]

@sunweiyang
I'm sorry but I removed the modal solution, If you like at the response now, it's without modal
I just draw the OTPublisher in the first time and when I get stream from the subscriber, look at the line code:

this.state.connection !== this.STATUS.CONNECTING || this.state.connection === this.STATUS.SUBSCRIBER_CONNECTED ?

[msach22]

@sunweiyang Sorry for the delay on this, I'll add a PR to fix this and release hopefully by today!

[msach22]

@sunweiyang @asatour @jonathanwmaddison @emin93 @sandrotiiago

This has been fixed and released with v0.8.4. Please let me know if you have any questions!

[msach22]

BTW, this was my code that I used to test:

  render() {
    const { height, width } = Dimensions.get('window');
    return (
      <View style={{ flex: 1}}>
        <OTSession apiKey={this.apiKey} sessionId={this.sessionId} token={this.token}>
          <OTPublisher style={{ 
            position: 'absolute', bottom: 20, right: 20, width: 100, height: 100, zIndex: 1000 }} />
          <OTSubscriber style={{ width, height }} />
        </OTSession>
      </View>
    );
  }

[wajix0078]

<OTSession
options={{
androidOnTop: 'publisher' //this one solves the overlap issue issue
}}
apiKey={this.apiKey}
sessionId={this.sessionId}
token={this.token}
eventHandlers={this.sessionEventHandlers}>