openvidu-ionic: iOS support

openvidu-ionic/config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.openvidu.sample" version="2.5.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.openvidu.sampleios" version="2.6.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>OpenVidu Sample</name>
     <description>OpenVidu sample app</description>
     <author email="openvidu@gmail.com" href="https://openvidu.io/">OpenVidu</author>
@@ -48,6 +48,13 @@
     <platform name="ios">
         <allow-intent href="itms:*" />
         <allow-intent href="itms-apps:*" />
+        <hook src="hooks/iosrtc-swift-support.js" type="after_platform_add" />
+        <config-file parent="NSCameraUsageDescription" target="*-Info.plist">
+            <string>OpenVidu needs access to your camera</string>
+        </config-file>
+        <config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist">
+            <string>OpenVidu needs access to your microphone</string>
+        </config-file>
         <icon height="57" src="resources/ios/icon/icon.png" width="57" />
         <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
         <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
@@ -88,5 +95,8 @@
     <plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
     <plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
-    <engine name="android" spec="~7.1.1" />
+    <plugin name="cordova-plugin-iosrtc" spec="4.0.2" />
+    <engine name="android" spec="7.1.1" />
+    <engine name="ios" spec="4.5.5" />
+    <engine name="browser" spec="5.0.4" />
 </widget>

openvidu-ionic/hooks/iosrtc-swift-support.js

@@ -0,0 +1,143 @@
+#!/usr/bin/env node
+
+'use strict';
+
+// This hook automates this:
+// https://github.com/BasqueVoIPMafia/cordova-plugin-iosrtc/blob/master/docs/Building.md
+
+var
+	fs = require("fs"),
+	path = require("path"),
+	xcode = require('xcode'),
+
+	BUILD_VERSION = '9.0',
+	BUILD_VERSION_XCODE = '"' + BUILD_VERSION + '"',
+	SWIFT_VERSION = '3.0',
+	SWIFT_VERSION_XCODE = '"' + SWIFT_VERSION + '"',
+	RUNPATH_SEARCH_PATHS = '@executable_path/Frameworks',
+	RUNPATH_SEARCH_PATHS_XCODE = '"' + RUNPATH_SEARCH_PATHS + '"',
+	ENABLE_BITCODE = 'NO',
+	ENABLE_BITCODE_XCODE = '"' + ENABLE_BITCODE + '"',
+	BRIDGING_HEADER_END = '/Plugins/cordova-plugin-iosrtc/cordova-plugin-iosrtc-Bridging-Header.h',
+	COMMENT_KEY = /_comment$/;
+
+
+// Helpers
+
+// Returns the project name
+function getProjectName(protoPath) {
+	var
+		cordovaConfigPath = path.join(protoPath, 'config.xml'),
+		content = fs.readFileSync(cordovaConfigPath, 'utf-8');
+
+	return /<name>([\s\S]*)<\/name>/mi.exec(content)[1].trim();
+}
+
+// Drops the comments
+function nonComments(obj) {
+	var
+		keys = Object.keys(obj),
+		newObj = {},
+		i = 0;
+
+	for (i; i < keys.length; i += 1) {
+		if (!COMMENT_KEY.test(keys[i])) {
+			newObj[keys[i]] = obj[keys[i]];
+		}
+	}
+
+	return newObj;
+}
+
+
+// Starting here
+
+module.exports = function (context) {
+	var
+		projectRoot = context.opts.projectRoot,
+		projectName = getProjectName(projectRoot),
+		xcconfigPath = path.join(projectRoot, '/platforms/ios/cordova/build.xcconfig'),
+		xcodeProjectName = projectName + '.xcodeproj',
+		xcodeProjectPath = path.join(projectRoot, 'platforms', 'ios', xcodeProjectName, 'project.pbxproj'),
+		swiftBridgingHead = projectName + BRIDGING_HEADER_END,
+		swiftBridgingHeadXcode = '"' + swiftBridgingHead + '"',
+		swiftOptions = [''], // <-- begin to file appending AFTER initial newline
+		xcodeProject;
+
+	// Checking if the project files are in the right place
+	if (!fs.existsSync(xcodeProjectPath)) {
+		debugerror('an error occurred searching the project file at: "' + xcodeProjectPath + '"');
+
+		return;
+	}
+	debug('".pbxproj" project file found: ' + xcodeProjectPath);
+
+	if (!fs.existsSync(xcconfigPath)) {
+		debugerror('an error occurred searching the project file at: "' + xcconfigPath + '"');
+
+		return;
+	}
+	debug('".xcconfig" project file found: ' + xcconfigPath);
+
+	xcodeProject = xcode.project(xcodeProjectPath);
+
+	// Showing info about the tasks to do
+	debug('fixing issues in the generated project files:');
+	debug('- "iOS Deployment Target" and "Deployment Target" to: ' + BUILD_VERSION_XCODE);
+	debug('- "Runpath Search Paths" to: ' + RUNPATH_SEARCH_PATHS_XCODE);
+	debug('- "Objective-C Bridging Header" to: ' + swiftBridgingHeadXcode);
+	debug('- "ENABLE_BITCODE" set to: ' + ENABLE_BITCODE_XCODE);
+	debug('- "SWIFT_VERSION" set to: ' + SWIFT_VERSION_XCODE);
+
+
+	// Massaging the files
+
+	// "build.xcconfig"
+	swiftOptions.push('LD_RUNPATH_SEARCH_PATHS = ' + RUNPATH_SEARCH_PATHS);
+	swiftOptions.push('SWIFT_OBJC_BRIDGING_HEADER = ' + swiftBridgingHead);
+	swiftOptions.push('IPHONEOS_DEPLOYMENT_TARGET = ' + BUILD_VERSION);
+	swiftOptions.push('ENABLE_BITCODE = ' + ENABLE_BITCODE);
+	swiftOptions.push('SWIFT_VERSION = ' + SWIFT_VERSION);
+	// NOTE: Not needed
+	// swiftOptions.push('EMBEDDED_CONTENT_CONTAINS_SWIFT = YES');
+	fs.appendFileSync(xcconfigPath, swiftOptions.join('\n'));
+	debug('file correctly fixed: ' + xcconfigPath);
+
+	// "project.pbxproj"
+	// Parsing it
+	xcodeProject.parse(function (error) {
+		var configurations, buildSettings;
+
+		if (error) {
+			debugerror('an error occurred during the parsing of the project file');
+
+			return;
+		}
+
+
+		configurations = nonComments(xcodeProject.pbxXCBuildConfigurationSection());
+		// Adding or changing the parameters we need
+		Object.keys(configurations).forEach(function (config) {
+			buildSettings = configurations[config].buildSettings;
+			buildSettings.LD_RUNPATH_SEARCH_PATHS = RUNPATH_SEARCH_PATHS_XCODE;
+			buildSettings.SWIFT_OBJC_BRIDGING_HEADER = swiftBridgingHeadXcode;
+			buildSettings.IPHONEOS_DEPLOYMENT_TARGET = BUILD_VERSION_XCODE;
+			buildSettings.ENABLE_BITCODE = ENABLE_BITCODE_XCODE;
+			buildSettings.SWIFT_VERSION = SWIFT_VERSION_XCODE;
+		});
+
+		// Writing the file again
+		fs.writeFileSync(xcodeProjectPath, xcodeProject.writeSync(), 'utf-8');
+		debug('file correctly fixed: ' + xcodeProjectPath);
+	});
+};
+
+
+function debug(msg) {
+	console.log('iosrtc-swift-support.js [INFO] ' + msg);
+}
+
+
+function debugerror(msg) {
+	console.error('iosrtc-swift-support.js [ERROR] ' + msg);
+}

openvidu-ionic/package.json

@@ -9,7 +9,8 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "ios": "rm -rf platform/ios & npm link openvidu-browser & ionic cordova prepare ios"
   },
   "private": true,
   "dependencies": {
@@ -26,17 +27,20 @@
     "@ionic-native/status-bar": "5.0.0-beta.21",
     "@ionic/angular": "4.0.0-beta.13",
     "cordova-android": "7.1.1",
+    "cordova-browser": "5.0.4",
     "cordova-ios": "4.5.5",
     "cordova-plugin-android-permissions": "1.0.0",
     "cordova-plugin-device": "2.0.2",
     "cordova-plugin-ionic-keyboard": "2.1.3",
-    "cordova-plugin-ionic-webview": "2.2.0",
+    "cordova-plugin-ionic-webview": "2.2.5",
+    "cordova-plugin-iosrtc": "4.0.2",
     "cordova-plugin-splashscreen": "5.0.2",
     "cordova-plugin-statusbar": "2.4.2",
     "cordova-plugin-whitelist": "1.3.3",
     "core-js": "2.5.7",
-    "openvidu-browser": "2.6.0",
+    "ios-deploy": "1.9.4",
     "rxjs": "6.3.3",
+    "xcode": "1.0.0",
     "zone.js": "0.8.26"
   },
   "devDependencies": {
@@ -77,10 +81,13 @@
         "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
       },
       "cordova-plugin-ionic-keyboard": {},
-      "cordova-plugin-android-permissions": {}
+      "cordova-plugin-android-permissions": {},
+      "cordova-plugin-iosrtc": {}
     },
     "platforms": [
-      "android"
+      "android",
+      "ios",
+      "browser"
     ]
   }
 }

openvidu-ionic/src/app/app.component.ts

@@ -7,7 +7,7 @@ import { Platform } from '@ionic/angular';
 import { OpenVidu, Publisher, Session, StreamEvent, StreamManager, Subscriber } from 'openvidu-browser';
 import { throwError as observableThrowError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
-
+declare var cordova;
 
 @Component({
     selector: 'app-root',
@@ -54,9 +54,23 @@ export class AppComponent implements OnDestroy {
         this.platform.ready().then(() => {
             this.statusBar.styleDefault();
             this.splashScreen.hide();
+            this.initializeAdapteriosRtc();
         });
     }
 
+    initializeAdapteriosRtc(){
+        if (this.platform.is('ios')) {
+            console.warn("Initializing iosrct");
+            cordova.plugins.iosrtc.registerGlobals();
+            // load adapter.js (vesion 4.0.1)
+            const script2 = document.createElement('script');
+            script2.type = 'text/javascript';
+            script2.src = 'assets/libs/adapter-4.0.1.js';
+            script2.async = false;
+            document.getElementsByTagName('head')[0].appendChild(script2);
+        }
+    }
+
     @HostListener('window:beforeunload')
     beforeunloadHandler() {
         // On window closed leave session
@@ -104,10 +118,14 @@ export class AppComponent implements OnDestroy {
                 .connect(token, { clientData: this.myUserName })
                 .then(() => {
                     // --- 5) Requesting and Checking Android Permissions
-                    if (this.platform.is('cordova')) {
+                    if (this.platform.is('android')) {
+                        console.log("Android platform");
                         this.checkAndroidPermissions()
                             .then(() => this.initPublisher())
                             .catch((err) => console.error(err));
+                    } else if (this.platform.is('ios')){
+                        console.log("iOS platform");
+                        this.initPublisher();
                     } else {
                         this.initPublisher();
                     }
@@ -118,6 +136,24 @@ export class AppComponent implements OnDestroy {
         });
     }
 
+
+    /*buildPVideo() {
+        this.pVideo = document.createElement('video');
+        this.pVideo.style.width = '400px';
+        this.pVideo.style.height = 400 - 56 + 'px';
+        this.pVideo.style.position = 'absolute';
+        this.pVideo.style.top = '0';
+        this.pVideo.srcObject = null;
+        this.pVideo.style.zIndex = '997';
+        this.pVideo.setAttribute('autoplay', '');
+        this.pVideo.setAttribute('playsinline', '');
+        this.platform.ready().then(() => {
+            if (this.platform.is('ios')) {
+                cordova.plugins.iosrtc.observeVideo(this.pVideo);
+            }
+        }); 
+    }*/
+
     initPublisher() {
         // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video
         // element: we will manage it on our own) and with the desired properties