Merge pull request #179 from saghul/stacked-uiview

Fix positioning video elements using z-index (thanks to @1N50MN14 and @saghul)
cordova-rtc · Jun 14, 2016 · 01d58ce · 01d58ce
2 parents 25a6944 + 5b6a180
commit 01d58ce
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git 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
+`<body>` `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
@@ -27,16 +27,16 @@ 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()
 		self.elementView.addSubview(self.videoView)
 		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
@@ -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 = [:]