CODEWITHSUNDEEP
ionic-frameworkionic3opentoktokbox
ree1991
ree1991

Reputation: 197

OpenTok Ionic 3 - the z-index of subscriber and publisher videos not working on Android

I am trying to create an UI where the subscriber(opponent) video should be in the background in full screen mode, the publisher(self) video should be on top of subscriber in a little box on the top right corner, and i am trying to show a few buttons above these two video layers. Whenever I connect the session, sometimes the videos show as expected, sometimes the publisher is rendered behind the subscriber. But at all times the buttons are invisible/behind the videos. Now, I have already setup the z-indices of the dom elements in correct way, i.e. subscriber z-index: 1, publisher z-index: 11 and buttons z-index: 111. Anybody got any ideas? Is there something with my understanding?

CSS file:

.video-subscriber {
width: 100% !important;
height: calc(100vh - 110px) !important;
top: 46px !important;
z-index: 0 !important;
}
.video-publisher {
width: 80px !important;
height: 120px !important;
background-color: gray;
z-index: 1 !important;
position: absolute;
top: 20px;
right: 20px;
}
.controls-btn-outer {
position: fixed;
bottom: 0;
background-color: white;
width: 100%;
height: 64px;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}

HTML file:

<ion-content>
    <div id="subscriber" class="video-subscriber"></div>

    <div class="controls-btn-outer">
      <!-- buttons -->
    </div>

    <div id="publisher" class="video-publisher"></div>

</ion-content>

.ts file:

//publisher
let publisherOptions = {
insertMode: "append",
publishAudio: this.publishAudio
};
currentScope.publisher = OT.initPublisher("publisher", publisherOptions);
currentScope.session.publish(currentScope.publisher);
// subscriber
let subscriberOptions = {
insertMode: "replace"
};
currentScope.subscriber = currentScope.session.subscribe(event.stream, "subscriber", subscriberOptions);

N.B. My UI needn't be dependent upon who joins the session first. I always want the self video on top of the opponent's video.

Upvotes: 1

Views: 783

Answers (1)

Chomu
Chomu

Reputation: 224

When you work with Cordova OpenTok plugin, the video is not a part of the DOM because it's an iOS/Android view that's created in the native layer and exposed via JavaScript. The plugin also does not support Z-Index which is why you're having issues with overlaying controls. You can track the issue here on the repo: https://github.com/opentok/cordova-plugin-opentok/issues/128

Thanks!

Upvotes: 3

Related Questions