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 = [:]