opentok / cordova-plugin-opentok

Cordova Plugin for OpenTok - add webrtc video to your iOS or Android App
MIT License
30 stars 80 forks source link

Action html block z-index top of the video #108

Open hesrun opened 6 years ago

hesrun commented 6 years ago

We have made sure that the video falls over HTML WebView. I make to big video z-index: -1 and make transparent body and html. Block with actions btns i make with high z-index 10, 99, 1000 and 9999 and 99999.... (((( But the block with the buttons is not active, but they are visible. Clicks on it are not processed.

What could be the problem?

I can show styles, screenshots.

We using framework7... image from ios

wolfenrain commented 6 years ago

Could you supply some HTML/CSS(maybe JS). I wonder if your camera HTML element is above the buttons and therefore your buttons wont be triggerd..

hesrun commented 6 years ago

@wolfenrain this screens from files...

css html js

hesrun commented 6 years ago

@wolfenrain if .OT_subscriber make z-index: -1 and bottom 0px; video go to back of page, then we make transparent bg for other blocks, do OT.updateViews(), And i see fullscr video and action buttons, but they dont clicked...

hesrun commented 6 years ago

I make a simple app, with my problem. https://drive.google.com/open?id=1df8BXPHK7kmasHGGEnV6k25CkjZ0RwNY At this app i have two blocks, one with video, one with buttons...

And again this problem, i can see buttons, but the not clickable

sagivf commented 6 years ago

If it helps anyone this fork solved the issue for me: https://github.com/talkspiritlab/cordova-plugin-opentok

rafialikhan commented 5 years ago

@hesrun Were you able to solve this problem?

Edit: Got this working for iOS. Look for the updateView function in OpenTokPlugin.m file and add the following line just after this statement _publisher.view.userInteractionEnabled = YES;

 if(zIndex < 0) {
      _publisher.view.userInteractionEnabled = NO;
 }

and also after streamInfo.view.userInteractionEnabled = YES;

if(zIndex < 0) {
            streamInfo.view.userInteractionEnabled = NO;
}
Shtibel commented 5 years ago

Hi @rafialikhan I see you are talking about this plugin: https://github.com/talkspiritlab/cordova-plugin-opentok

But as I can see this code is already implemented

image

We tried this plugin but the html layer are not visible. What can be the problem ?

rafialikhan commented 5 years ago

@Shtibel We are using https://github.com/opentok/cordova-plugin-opentok but applied the same idea used in https://github.com/talkspiritlab/cordova-plugin-opentok. This solution is to solve the problem of html actions button not triggering the click events.

For overlaying the HTML control elements above the camera view we are using the negative z-index workaround as mentioned in the beginning of this thread.

bijanmmarkes commented 5 years ago

@rafialikhan Are you able to have clickable html over the video using this repository? Could you share some sample code?