From 5b6a180b324c8c9bac533fa481a457b74183c740 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Fri, 10 Jun 2016 15:26:57 +0100 Subject: [PATCH] Fix positioning video elements using z-index Instead of adding the video element view as a su-view of the WebView, add it as a subview of it's superview. This puts the WebView and the video views at the same level (aka, they are siblings) and the layer's zPosition is considered amongst siblings. Since an ASCII diagram is worth a thousand images, this is the layout before this patch: +-------------------------------+ | superview | +-------------------------------+ +-------------------------------+ | WebView | +-------------------------------+ +--------------+ +--------------+ | videoView1 | | videoView2 | +--------------+ +--------------+ And after: +---------------------------------------+ | superview | +---------------------------------------+ +---------+ +------------+ +------------+ | WebView | | videoView1 | | videoView2 | +---------+ +------------+ +------------+ This makes it possible to order videos "behind" the WebView, which this patch makes transparent, and thus have HTML elements on top of the video views. Props to @1N50MN14 for writing a first version of (what became) this patch. --- docs/videoCSS.md | 4 ++++ src/PluginMediaStreamRenderer.swift | 11 ++++++++--- src/iosrtcPlugin.swift | 4 ++++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/docs/videoCSS.md b/docs/videoCSS.md index 64f33f65..a23bd5f0 100644 --- a/docs/videoCSS.md +++ b/docs/videoCSS.md @@ -13,3 +13,7 @@ Supported CSS properties are: * `z-index`: Useful to place a video on top of another video. * [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) * `-webkit-transform: scaleX(-1)`: Useful for horizontal mirror effect. + +**Note**: if the specified z-index is < 0 (that, is, the video elements will be positioned "behind" the web view), you should specify the +`` `background-color` as `transparent` so the video element will be seen through the web view. This makes it possible to position +HTML elements on top of the native video elements. diff --git a/src/PluginMediaStreamRenderer.swift b/src/PluginMediaStreamRenderer.swift index 554914a5..79dc7a08 100644 --- a/src/PluginMediaStreamRenderer.swift +++ b/src/PluginMediaStreamRenderer.swift @@ -27,9 +27,6 @@ class PluginMediaStreamRenderer : NSObject, RTCEAGLVideoViewDelegate { // It's placed over the elementView. self.videoView = RTCEAGLVideoView() - self.webView.addSubview(self.elementView) - self.webView.bringSubviewToFront(self.elementView) - self.elementView.userInteractionEnabled = false self.elementView.hidden = true self.elementView.backgroundColor = UIColor.blackColor() @@ -37,6 +34,9 @@ class PluginMediaStreamRenderer : NSObject, RTCEAGLVideoViewDelegate { self.elementView.layer.masksToBounds = true self.videoView.userInteractionEnabled = false + + // Place the video element view inside the WebView's superview + self.webView.superview?.addSubview(self.elementView) } @@ -188,6 +188,11 @@ class PluginMediaStreamRenderer : NSObject, RTCEAGLVideoViewDelegate { self.elementView.alpha = CGFloat(opacity) self.elementView.layer.zPosition = CGFloat(zIndex) + // if the zIndex is 0 (the default) bring the view to the top, last one wins + if zIndex == 0 { + self.webView.superview?.bringSubviewToFront(self.elementView) + } + if !mirrored { self.elementView.transform = CGAffineTransformIdentity } else { diff --git a/src/iosrtcPlugin.swift b/src/iosrtcPlugin.swift index c932e4f4..b1f532f0 100644 --- a/src/iosrtcPlugin.swift +++ b/src/iosrtcPlugin.swift @@ -24,6 +24,10 @@ class iosrtcPlugin : CDVPlugin { override func pluginInitialize() { NSLog("iosrtcPlugin#pluginInitialize()") + // Make the web view transparent + self.webView!.opaque = false + self.webView!.backgroundColor = UIColor.clearColor() + pluginMediaStreams = [:] pluginMediaStreamTracks = [:] pluginMediaStreamRenderers = [:]