UI on top of stream not clickable - blocked by OT div

[bijanmmarkes]

Bug Report

Current behavior

Able to get UI over webcam using z-index: -1 but the problem is, the publisher div covers the UI although it is invisible. - Everything is transparent so you can see the buttons, but you cannot click them. UI is seen over the Webcam, but you cannot click it at all.

What is the current bug behavior?

UI can float above the stream using z-index, but the buttons / ui cannot be clicked or interacted with.

What is the expected correct behavior?

UI / buttons on top of the webcam should be clickable - without this functionality most live streaming app ideas are useless, as the only thing you can have are the camera's. I need to implement things like chat, buttons, etc.

[zaggaz]

Hi @bijanmmarkes, I'd like to overlay UI buttons over a full screen publisher/subscriber. I can't even get the buttons to show, did you get anywhere with this?

[bijanmmarkes]

Hey @zaggaz, Sorry I gave up on this plugin and company, I have been trying to get Opentok working for years on and off, their plugins aren't up to par for this platform. I have decided not to go forward with Opentok, and instead decided to create my own plugins to stream using HLS / RTMP protocols. Even with the z-index, you will still be unable to click any of the UI components as their Opentok div is super glitchy and simply blocks it although it is invisible, and I'd rather waste the time making my own plugin than fixing this one. - Regards.

[phiferd]

I'm running into this issue as well. Posted a question to stack exchange to see if anyone has a solution (https://stackoverflow.com/questions/58671359/html-elements-positioned-over-opentok-video-not-clickable), but thought I would ping this issue as well.

Can anyone at least help me understand what the issue is? It seems odd that the HTML controls are shown on top, but somehow the events are processed differently. The original poster mentioned that the Opentok div as the culprit, but I don't think the issue is on the HTML side. I've actually debugged the app with Safari and deleted all of the HTML elements associated with the video and it doesn't make any difference.

Seems like there must be some way to solve it. e.g. by capturing tap events in the native code and sending them back to the plugin.

[phiferd]

Is this a duplicate of #128 ? If so, maybe we should close this issue and keep the conversation there.

[phiferd]

Sorry for the spam, but I wanted to post here the the changes in https://github.com/talkspiritlab/cordova-plugin-opentok resolved this issue for me. I am a bit concerned that I'm now on a branch that is probably not maintained, but happy to have something that seems to work.