HTML elements positioned over OpenTok video not clickable

Question

Using the cordova-plugin-opentok plugin, I am able to get a video chat session up and running in a cordova app (testing on iOS). Using a negative z-index, I can position the video in the background and overlay controls on top. However, the controls are not clickable.

Plugin:https://github.com/opentok/cordova-plugin-opentok

Docs: https://github.com/opentok/cordova-plugin-opentok/tree/master/docs

Related Issue: https://github.com/opentok/cordova-plugin-opentok/issues/164

I've looked into the plugin JS and iOS code, but I haven't determined exactly what's happening. I'm confused that the graphics are drawn properly (the HTML elements sit on top of the video), but the events are handled differently. I can confirm that if I stop publishing the video, the buttons become clickable.

<div style="position: absolute; width: 100%; height: 100%">
    <div class="fullscreen-video" style="z-index: -20;">
        <div id="session-fullscreen" style="width: 100%; height: 100%; z-index: -20"></div>
    </div>
    <div class="thumbnail-video" style="z-index: -10;">
        <div class="material-icons muted-icon" style="display: none">mic_off</div>
        <div id="session-thumbnail" style="width: 100%; height: 100%; z-index: -10;"></div>
    </div>

    <div class="session-controls" style="z-index: 100;">
        <div data-behavior="quit">Exit</div>
        <div data-behavior="toggle-audio" class="audio-state">Audio</div>
        <div data-behavior="toggle-video" class="video-state">Video</div>
    </div>
</div>

I expect the controls to be clickable, especially given they show up on top of the video component.

However, as soon as I start showing video on the thumbnail or the full screen element, the controls no longer respond to interaction, although they do appear on top of the video.

I am getting the same issue. Please, anyone, have an idea about is — Sagar Jethi

Dan P Dan P · Accepted Answer · 2020-04-27T14:02:27

I ended up using a fork of the official repository (for iOS). For Android, I was able to use the official web version (the cordova/android version does not work properly).

To ensure the right version is selected, depending on the platform, I used the following code (copied from some other thread I can't remember now) in my index.html file of my cordova app:

<script type="text/javascript" charset="utf-8" src="opentok.js"></script>
<script type="text/javascript">window.OT || document.write(`<script src="https://static.opentok.com/v2/js/opentok.js">\x3C/script>`)</script>

My own fork is here: https://github.com/phiferd/cordova-plugin-opentok with some additional bug fixes. Note that I have removed the Android plugin code to ensure that on an Android device the web version is used.

However, the project I was working on is no longer up and running, so I am not likely to make any changes.

HTML elements positioned over OpenTok video not clickable

1 Answers