Permalink
30068fd Nov 25, 2016
executable file 263 lines (200 sloc) 10.5 KB

iOS and Android

Please check these docs as well:


iPhone, iPad, Nexus, Blackberry, Samsung, many other devices

This page explains how to write iOS+Android phonegap/cordova applications for RTCMultiConnection-v3.

Cordova Demos

Please check all iOS+Android demos here:

DemoTitle DownloadZip AndroidAPK AllFiles
Scalable Broadcast Source Android APK All files
Audio Conferencing Source Android APK All files
Video Conferencing Source Android APK All files
File Sharing Source Android APK All files

Prerequisites

  1. xcode 7.2.1 (required)
  2. cordova android plugin 5.1.0 (suggested)
  3. cordova ios plugin 3.9.2 --- note: MUST be this version (don't use newer ones)

Check xcode-build-version: xcodebuild -version

Make sure that terminal is using latest xcode:

xcode-select --print-path

# maybe [sudo]
xcode-select -switch /Applications/Xcode5.1.1/Xcode.app

Install Prerequisites

# if a command fails, try with [sudo]

npm install cordova -g
npm install xcode -g

Create Your First App

cordova create ./yourAppName org.yourAppName yourAppName
cd yourAppName

Add WebRTC plugin for iOS apps

cordova plugin add cordova-plugin-iosrtc

Now compile SWIFT parameters:

cd hooks
wget https://raw.githubusercontent.com/eface2face/cordova-plugin-iosrtc/master/extra/hooks/iosrtc-swift-support.js

# maybe [sudo]
chmod +x iosrtc-swift-support.js

cd ..

Now modify config.xml for this section:

<platform name="ios">
    <hook type="after_platform_add" src="hooks/iosrtc-swift-support.js" />
</platform>

Add Platforms

Now add platforms. If you already added, please remove all existing platforms, and add them again. Otherwise, you'll see errors during cordova build ios or cordova build android:

Note: Do same if you change your app's name in the "config.xml" file. Make sure to remove and re-add all platforms.

# remove any existing platform
cordova platform remove ios
cordova platform remove android

# add specific/working platform versions
cordova platform add ios@3.9.2
cordova platform add android@5.1.0

NOTE: NOTE: NOTE: NOTE:

Following LINE is VERY_VERY important:

cordova platform add ios@3.9.2

Make sure to install iOS package version 3.9.2. NEVER install any newer version.

Build your Apps

cordova build ios
cordova build android

Now open `platforms/ios/ProjectName.xcodeproj". It may ask this:

"Convert to Latest Swift Syntax?"

Simply click Cancel button. We're OK with old syntax.

config.xml hints

Modify platform/android/AndroidManifest.xml for <uses-permission android:name="android.permission.CAMERA"/> and a few others. Now getUserMedia API will work in Android.

An example AndroidManifest.xml file:

<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="com.yourApp" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="23" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MICROPHONE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
</manifest>

An example config.xml file (make sure that icon.png has valid path):

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.yourApp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>yourApp</name>
    <icon src="www/icon.png" />
    <description>yourApp</description>
    <author email="yourApp@gmail.com" href="http://www.yourApp.com">You</author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access uri="*" subdomains="true" origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="https://*/*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <hook type="after_platform_add" src="hooks/iosrtc-swift-support.js" />
        <config-file target="*-Info.plist" parent="CFBundleURLTypes">
            <array>
                <key>NSAppTransportSecurity</key>
                <dict><key>NSAllowsArbitraryLoads</key><true/></dict>
            </array>
        </config-file>
    </platform>
    <preference name="xwalkVersion" value="16+" />
    <preference name="xwalkCommandLine" value="--disable-pull-to-refresh-effect --allow-file-access-from-files --disable-web-security" />
    <preference name="xwalkMode" value="embedded" />
    <preference name="xwalkMultipleApk" value="true" />
    <preference name="BackgroundColor" value="0xFFFF0000" />
    <preference name="xwalkUserAgent" value="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36" />
    <preference name="AndroidPersistentFileLocation" value="Internal" />
</widget>

Use RTCMultiConnection-v3

This section explains how to integrate RTCMultiConnection-v3 for both iOS and Android apps.

Copy/paste entire RTCMultiConnection.min.js file inside deviceready callback:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CordovaApp using RTCMultiConnection-v3</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- your UI code -->

    <!-- scripts are placed on footer -->
    <script src="cordova.js"></script>

    <!-- NEVER link RTCMultiConnection.min.js here -->
    <!-- instead copy/paste code from RTCMultiConnection.min.js into below "index.js" file -->
    <script src="js/index.js"></script>
</body>
</html>

www/js/index.js:

// please read below comments:
document.addEventListener('deviceready', function() {
    // copy/paste entire/all code from "RTCMultiConnection.min.js" file
    // here --- exact here
    // paste inside this callback
    // if you will NOT do this, RTCMultiConnection will fail on cordova-based apps
    // again, you MUST NOT link RTCMultiConnection.min.js
    // instead copy/paste all the codes here

    // you can put your custom-ui-codes here
    // e.g.
    // var connection = new RTCMultiConnection({useDefaultDevices:true});
}, false);

Other Documents

  1. Getting Started guide for RTCMultiConnection
  2. Installation Guide
  3. How to Use?
  4. API Reference
  5. Upgrade from v2 to v3
  6. How to write iOS/Android applications?
  7. Tips & Tricks

Twitter

License

RTCMultiConnection is released under MIT licence . Copyright (c) Muaz Khan.