Permalink
9dcf98c Jun 11, 2018
1 contributor

Users who have contributed to this file

executable file 266 lines (196 sloc) 9.9 KB

iOS and Android

Note: RTCMultiConnection supports Safari-11 browser both on iOS and MacOSX.

So you do not need to build a cordova or ionic application.

Please check these docs as well:


iPhone, iPad, Nexus, 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 latest
  2. cordova android plugin latest
  3. cordova ios plugin latest

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 latest platform versions
cordova platform add ios
cordova platform add android

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="30001" android:versionName="3.0.1" package="rmc3.videoconference" 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" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@mipmap/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="16" android:targetSdkVersion="24" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MICROPHONE" />
    <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" />
</manifest>

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

<?xml version='1.0' encoding='utf-8'?>
<widget id="rmc3.videoconference" version="3.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Video Conferencing</name>
    <icon src="www/img/icon.png" />
    <description>
        Peer-to-Peer Application
    </description>
    <author email="muazkh@gmail.com" href="https://www.webrtc-experiment.com/">
        Muaz khan
    </author>
    <content src="index.html" />
    
    <allow-navigation href="*" />
    <allow-intent href="*" />
    <access origin="*" />

    <platform name="android">
        <preference name="Orientation" value="default" />
        <preference name="KeepRunning" value="true" />
        <preference name="AndroidLaunchMode" value="singleTop" />
    </platform>
    <platform name="ios">
        <preference name="Orientation" value="all" />
        <hook src="hooks/iosrtc-swift-support.js" type="after_platform_add" />

        <config-file parent="CFBundleURLTypes" target="*-Info.plist">
            <array>
                <key>NSAppTransportSecurity</key>
                <dict>
                    <key>NSAllowsArbitraryLoads</key>
                    <true />
                </dict>
            </array>
        </config-file>

        <config-file parent="NSCameraUsageDescription" target="*-Info.plist" platform="ios">
            <string>WebRTC uses your camera to make video calls.</string>
        </config-file>

        <config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist" platform="ios">
            <string>WebRTC uses your microphone to make voice calls.</string>
        </config-file>
    </platform>

    <plugin name="cordova-plugin-whitelist" spec="latest" />
    <plugin name="cordova-plugin-iosrtc" spec="latest" />
    <plugin name="cordova-plugin-device" spec="latest" />
    <plugin name="cordova-plugin-crosswalk-webview" spec="latest" />
</widget>

Use RTCMultiConnection-v3

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

Download and link RTCMultiConnection.js:

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

    <script src="cordova.js"></script>
    <script src="js/socket.io.js"></script>
    <script src="js/RTCMultiConnection.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

www/js/index.js:

// please read below comments:
document.addEventListener('deviceready', function() {
    // you can put your custom-ui-codes here
    // e.g.
    // var connection = new RTCMultiConnection();
}, false);

Select Speakers as default audio output device on iOS

window.iOSDefaultAudioOutputDevice = 'speaker'; // earpiece or speaker

// set above line, before below one
var connection = new RTCMultiConnection();

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.