cordova-plugin-opentok icon indicating copy to clipboard operation
cordova-plugin-opentok copied to clipboard

Published 20 hours ago • verified publisher icon opentok

Action html block z-index top of the video

Open hesrun opened this issue 6 years ago • 9 comments

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

hesrun avatar Jun 27 '18 08:06 hesrun

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..

wolfenrain avatar Jun 27 '18 09:06 wolfenrain

@wolfenrain this screens from files...

css html js

hesrun avatar Jun 27 '18 10:06 hesrun

@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 avatar Jun 27 '18 11:06 hesrun

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

hesrun avatar Jun 27 '18 14:06 hesrun

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

sagivf avatar Sep 17 '18 08:09 sagivf

@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 

and also after
streamInfo.view.userInteractionEnabled = YES;


if(zIndex

rafialikhan avatar Jan 04 '19 08:01 rafialikhan

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 ?

Shtibel avatar Jan 04 '19 11:01 Shtibel

@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.

rafialikhan avatar Jan 04 '19 14:01 rafialikhan

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

bijanmmarkes avatar Mar 19 '19 13:03 bijanmmarkes