1.4.4

- Support border-radius CSS property in video elements.

README.md

@@ -78,11 +78,11 @@ And that's all. Now you have `window.RTCPeerConnection`, `navigator.getUserMedia
 
 **Q:** What about `<video>` elements and `video.src = URL.createObjectURL(stream)`? do I need custom HTML tags or functions to display WebRTC videos?
 
-**R:** No. Just use an HTML video element as usual, really. The plugin will properly place a native *UIView* layer on top of it by respecting its properties such as the CSS `display`, `opacity`, `visibility`, `z-index`, `object-fit` and also horizontal mirror effect with `-webkit-transform: scaleX(-1);` or equivalent.
+**R:** No. Just use an HTML video element as usual, really. The plugin will properly place a native *UIView* layer on top of it by respecting (most of) its [CSS properties](videoCSS.md).
 
 **Q:** Can I place HTML elements (buttons and so on) on top of active `<video>` elements?
 
-**R:** Unfortunately not. The native *UIView* rendering the video stream is placed on top of the HTML view. :(
+**R:** Not yet, but there is ongoing work to enable this feature (see [here](https://github.com/eface2face/cordova-plugin-iosrtc/issues/38)).
 
 **Q:** What about [HTML5 video events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)? Can I rely on `video.oncanplay`?
 

dist/cordova-plugin-iosrtc.js

@@ -1,5 +1,5 @@
 /*
- * cordova-plugin-iosrtc v1.4.3
+ * cordova-plugin-iosrtc v1.4.4
  * Cordova iOS plugin exposing the full WebRTC W3C JavaScript APIs
  * Copyright 2015 Iñaki Baz Castillo at eFace2Face, inc. (https://eface2face.com)
  * License MIT
@@ -586,7 +586,8 @@ MediaStreamRenderer.prototype.refresh = function () {
 		zIndex,
 		mirrored,
 		objectFit,
-		clip;
+		clip,
+		borderRadius;
 
 	computedStyle = window.getComputedStyle(this.element);
 
@@ -621,6 +622,12 @@ MediaStreamRenderer.prototype.refresh = function () {
 		clip = true;
 	}
 
+	// borderRadius
+	borderRadius = parseFloat(computedStyle.borderRadius);
+	if (/%$/.test(borderRadius)) {
+		borderRadius = Math.min(elementHeight, elementWidth) * borderRadius;
+	}
+
 	/**
 	 * No video yet, so just update the UIView with the element settings.
 	 */
@@ -723,7 +730,8 @@ MediaStreamRenderer.prototype.refresh = function () {
 			zIndex: zIndex,
 			mirrored: mirrored,
 			objectFit: objectFit,
-			clip: clip
+			clip: clip,
+			borderRadius: borderRadius
 		};
 
 		debug('refresh() | [data:%o]', data);

docs/index.md

@@ -2,6 +2,7 @@
 
 * [`iosrtc` API](iosrtc.md): JavaScript API Documentation.
 * [Building](Building.md): Guidelines for building a Cordova iOS application including the *cordova-plugin-iosrtc* plugin.
+* [`<video>` CSS](videoCSS.md): Supported CSS properties.
 
 
 

docs/videoCSS.md

@@ -0,0 +1,14 @@
+# `<video>` CSS
+
+The plugin places a native [UIView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/) on top of all those HTML `<video>` elements in which a WebRTC `MediaStream` has been attached.
+
+The plugin inspects the CSS properties of the `<video>` element and uses them to make the video `UIView` behave similary.
+
+Supported CSS properties are:
+
+* `display`
+* `opacity`
+* `visibility`
+* `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.

js/MediaStreamRenderer.js

@@ -123,7 +123,8 @@ MediaStreamRenderer.prototype.refresh = function () {
 		zIndex,
 		mirrored,
 		objectFit,
-		clip;
+		clip,
+		borderRadius;
 
 	computedStyle = window.getComputedStyle(this.element);
 
@@ -158,6 +159,12 @@ MediaStreamRenderer.prototype.refresh = function () {
 		clip = true;
 	}
 
+	// borderRadius
+	borderRadius = parseFloat(computedStyle.borderRadius);
+	if (/%$/.test(borderRadius)) {
+		borderRadius = Math.min(elementHeight, elementWidth) * borderRadius;
+	}
+
 	/**
 	 * No video yet, so just update the UIView with the element settings.
 	 */
@@ -260,7 +267,8 @@ MediaStreamRenderer.prototype.refresh = function () {
 			zIndex: zIndex,
 			mirrored: mirrored,
 			objectFit: objectFit,
-			clip: clip
+			clip: clip,
+			borderRadius: borderRadius
 		};
 
 		debug('refresh() | [data:%o]', data);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cordova-plugin-iosrtc",
-  "version": "1.4.4-pre",
+  "version": "1.4.4",
   "description": "Cordova iOS plugin exposing the full WebRTC W3C JavaScript APIs",
   "author": "Iñaki Baz Castillo at eFace2Face, inc. (https://eface2face.com)",
   "license": "MIT",

plugin.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
 		id="cordova-plugin-iosrtc"
-		version="1.4.3">
+		version="1.4.4">
 
 	<name>iosrtc</name>
 	<description>Cordova iOS plugin exposing the full WebRTC W3C JavaScript APIs</description>

src/PluginMediaStreamRenderer.swift

@@ -19,19 +19,26 @@ class PluginMediaStreamRenderer : RTCEAGLVideoViewDelegate {
 	) {
 		NSLog("PluginMediaStreamRenderer#init()")
 
+		// The browser HTML view.
 		self.webView = webView
 		self.eventListener = eventListener
+		// The video element view.
 		self.elementView = UIView()
+		// The effective video view in which the the video stream is shown.
+		// It's placed over the elementView.
 		self.videoView = RTCEAGLVideoView()
 
 		self.webView.addSubview(self.elementView)
 		self.webView.bringSubviewToFront(self.elementView)
+		// TODO: TEST
+		// self.webView.sendSubviewToBack(self.elementView)
+		// self.webView.backgroundColor = UIColor.clearColor()
 
 		self.elementView.userInteractionEnabled = false
 		self.elementView.hidden = true
 		self.elementView.backgroundColor = UIColor.blackColor()
 		self.elementView.addSubview(self.videoView)
-		self.elementView.bringSubviewToFront(self.videoView)
+		self.elementView.layer.masksToBounds = true
 
 		self.videoView.userInteractionEnabled = false
 	}
@@ -138,8 +145,9 @@ class PluginMediaStreamRenderer : RTCEAGLVideoViewDelegate {
 		let zIndex = data.objectForKey("zIndex") as? Float ?? 0
 		let mirrored = data.objectForKey("mirrored") as? Bool ?? false
 		let clip = data.objectForKey("clip") as? Bool ?? true
+		var borderRadius = data.objectForKey("borderRadius") as? Float ?? 0
 
-		NSLog("PluginMediaStreamRenderer#refresh() [elementLeft:\(elementLeft), elementTop:\(elementTop), elementWidth:\(elementWidth), elementHeight:\(elementHeight), videoViewWidth:\(videoViewWidth), videoViewHeight:\(videoViewHeight), visible:\(visible), opacity:\(opacity), zIndex:\(zIndex), mirrored:\(mirrored), clip:\(clip)]")
+		NSLog("PluginMediaStreamRenderer#refresh() [elementLeft:\(elementLeft), elementTop:\(elementTop), elementWidth:\(elementWidth), elementHeight:\(elementHeight), videoViewWidth:\(videoViewWidth), videoViewHeight:\(videoViewHeight), visible:\(visible), opacity:\(opacity), zIndex:\(zIndex), mirrored:\(mirrored), clip:\(clip), borderRadius:\(borderRadius)]")
 
 		let videoViewLeft: Float = (elementWidth - videoViewWidth) / 2
 		let videoViewTop: Float = (elementHeight - videoViewHeight) / 2
@@ -187,6 +195,8 @@ class PluginMediaStreamRenderer : RTCEAGLVideoViewDelegate {
 		} else {
 			self.elementView.clipsToBounds = false
 		}
+
+		self.elementView.layer.cornerRadius = CGFloat(borderRadius)
 	}