Possibility to load Native Video behind the webview

[mark-veenstra]

It would be nice to be able to place the native camera's in front of or behind the webview based on the given z-index. Because if we could place the native video elements behind the webview we could also place HTML buttons on top of the video.

We have been successfull in placing the video behind the WebView with the Android and iOS , see branch:
https://github.com/Mediapioniers/cordova-plugin-opentok/tree/feat.cams_behind_webview_z-index

We got this technique from the cordova-plugin-qrscanner and cordova-plugin-iosrtc.

So if you use our branch, the camera will be placed below the WebView based on the z-index. So to be able to see the cams and buttons, you need make everything transparent in your DOM, for example:

# We can use class OT_root in our repository, but the main things is that the publisher container gets a black background color from OT, this needs to be removed in your CSS!
html, body, .OT_root {
  background: transparent !important;
}

# Each publisher and eachsubscriber video element should have display none
.OT_root video {
  display: none !important;
}

Also the inserted <video> tags for publishers and subsscribers in the DOM on Android need to get the style="display: none;.

When all is set you can have buttons on top of the video. See next screenshot:

[mark-veenstra]

updated comment, both Android and iOS is done.

[mark-veenstra]

@msach22 Also the scrolling keeps working on both iOS and Android as is. But now with the possibility to place camera's and webviews on different Z layer positions, being able to create "fancier" interfaces.

[msach22]

Added with #29

[henritoivar]

This doesn't work on OnePlus X (E1003), Android 6.0.1

But works on Sony D6503, Android 6.0.1

[wolfenrain]

@henritoivar In what way doesn't it work? There are some issues with it as explained here #86. Are you experiencing the same? Or is it something different?

[henritoivar]

@wolfenrain I'm able to position the video behind the webview on our Sony device, so that the html buttons are on top. On the OnePlus device the buttons are not visible, so i assume it didn't manage to place the video behind the webview.