ApiRTC on Apache Cordova

Our tutorial will guide you through the steps of developing and implementing our ApiRTC Basic Call feature on an Android and/or iOS device. But if you want to skip to the code, clone our repo right here on Github.

What is Cordova?

Apache Cordova is an open-source mobile development framework. By using Cordova and our ApiRTC technology, you will be able to develop cross-platform applications even on iOS devices.

iOS?

Due to Apple’s restrictions regarding webRTC technologies, all iOS users will have to develop a native app through Cordova to implement ApiRTC solutions on iOS devices. As you will see later on in this tutorial, some additional plugins will be required to allow full webRTC compliance.

On with the project!

Environment and requirements

Android SDK : Link
XCode (for Mac users)
NodeJS
NPM
ANT (to run an Android app)
ADB (included in Android SDK)

The last step of setting your environment will be to install Cordova:

npm install -g cordova ios-deploy

Cordova project

Now let’s create a brand-new Cordova project and upload our ApiRTC basic call feature on both platforms: If the same HTML5 application is to be used for both platforms, consider using a single Cordova project. Since the iosrtc plugin only affects iOS, and the crosswalk plugin only affects Android, there is no conflict having both in the same project.

cordova create [nameOfYourProject]
cd [nameOfYourProject]
git clone https://github.com/apizee/ApiRTC-mobile.git
cordova platform add ios
cordova platform add android

Make it work: required plugins

Notes:
iosRTC plugin: requires iOS 9 or greater.
Crosswalk plugin: requires Android 4.4 or greater.

On both platforms
If you are developing for only one platform, scroll down to see what plugins you need.
If you are developing for both platforms, just copy-paste these commands:

cordova plugin add cordova-plugin-console
cordova plugin add cordova-custom-config
cordova plugin add cordova-plugin-device
cordova plugin add cordova-plugin-iosrtc
cordova plugin add cordova-plugin-media
cordova plugin add android-camera-permission
cordova plugin add cordova-plugin-android-permissions@0.10.0
cordova plugin add https://github.com/alongubkin/audiotoggle.git
cordova plugin add cordova-plugin-audioinput

For iOS only:

We need to add this plugin :

cordova plugin add cordova-plugin-iosrtc

For Android only:

The crosswalk-webview plugin is needed for Android versions older than 5.0. The other two plugins are now required to comply with new Android permissions checking mechanism.

cordova plugin add cordova-plugin-crosswalk-webview
cordova plugin add android-camera-permission
cordova plugin add cordova-plugin-android-permissions@0.10.0
cordova plugin add https://github.com/alongubkin/audiotoggle.git
cordova plugin add cordova-plugin-audioinput

cordova prepare

The index file

Edit the index.html file in your "www" folder

Add this in tag

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>.remote video { width: 100% !important; } </style>
    <script type="text/javascript" src="https://cloud.apizee.com/libs/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="https://cloud.apizee.com/apiRTC/apiRTC-latest.min.js"></script>

In the tag add this content

<div class="container-fluid" style="margin-top: 35px;margin-left: 5px; margin-right: 5px">
    <div class="row">
        <input type="number" id="number" value="" class="form-control" placeholder="Enter Destination ID"/>
    </div>
    <div class="row" style="margin-top: 5px">
        <input id="call" type="button" value="Call" class="btn btn-success" style="width: 100%; border-radius: 0;" />
        <input id="hangup" type="button" value="Hangup" class="btn btn-danger" style="width: 100%; border-radius: 0;display: none"/>
    </div>
    <div class="row" id="localNumber" style="text-align: center; font-size: 18px; margin-top: 5px">
    </div>
    <div class="row" style="text-align: center;">
        <span id="status" style="text-align: center">Registration Ongoing...</span>
    </div>
    <div class="row" style="margin-top: 20px">
        <div class="remote" id="myRemoteVideo" style="width:100%;"></div>
    </div>
    <div class="row">
        <video width="30%" height="30%" id="myMiniVideo" autoplay style="display: none"></video>
    </div>
</div>

To finalize, the javascript

function refreshVideoView() {
    if ((typeof device !== "undefined") && device.platform == 'iOS'){
        console.log("REFRESH");
        cordova.plugins.iosrtc.refreshVideos();
    }
}

function incomingCallHandler(e) {
    $("#call").hide();
    $("#number").hide();
    $("#hangup").show();
    $('#status').hide();
    setTimeout(refreshVideoView,2000);
}

function hangupHandler(e) {
    $("#call").show();
    $("#number").show();
    $("#hangup").hide();
    $('#status').html(e.detail.reason);
    $('#status').show();
}

function userMediaErrorHandler(e) {
    $("#call").show();
    $("#number").show();
    $("#hangup").hide();
}

function remoteStreamAddedHandler(e) {
    refreshVideoView();
}

function sessionReadyHandler(e) {
    apiRTC.addEventListener("incomingCall", incomingCallHandler);
    apiRTC.addEventListener("userMediaError", userMediaErrorHandler);
    apiRTC.addEventListener("remoteStreamAdded", remoteStreamAddedHandler);
    apiRTC.addEventListener("hangup", hangupHandler);

    var webRTCClient = apiCC.session.createWebRTCClient({
        minilocalVideo : "myMiniVideo",
        remoteVideo : "myRemoteVideo"
    });

    $('#localNumber').html("Your local ID :<BR/>"+apiCC.session.apiCCId);
    $('#myMiniVideo').show();
    $('#status').hide();
    $("#call").click(function () {
        $("#call").hide();
        $("#number").hide();
        $("#hangup").show();
        $('#status').hide();
        destNumber = $("#number").val();
        console.log("send REFRESH");
        setTimeout(refreshVideoView,4000);
        webRTCClient.call(destNumber);
    });
    $("#hangup").click(function () {
        $("#call").show();
        $("#number").show();
        $("#hangup").hide();
        webRTCClient.hangUp();
    });
}

function onDeviceReady() {
    if ((typeof device !== "undefined") && device.platform == 'iOS'){
        cordova.plugins.iosrtc.registerGlobals();
    }

    if ((typeof device !== "undefined") && device.platform == 'Android'){
        var permissions = cordova.plugins.permissions;
        permissions.hasPermission(permissions.CAMERA, checkVideoPermissionCallback, null);
        permissions.hasPermission(permissions.RECORD_AUDIO, checkAudioPermissionCallback, null);

        function checkVideoPermissionCallback(status) {
            if (!status.hasPermission) {
                var errorCallback = function() {
                    alert('Camera permission is not turned on');
                };

                permissions.requestPermission(
                    permissions.CAMERA,
                    function(status) {
                        if(!status.hasPermission) {
                            errorCallback();
                        }
                    },
                    errorCallback
                );
            }
        }

        function checkAudioPermissionCallback(status) {
            if (!status.hasPermission) {
                var errorCallback = function() {
                    alert('Audio permission is not turned on');
                }
                permissions.requestPermission(
                    permissions.RECORD_AUDIO,
                    function(status) {
                        if (!status.hasPermission) {
                            errorCallback();
                        }
                    },
                    errorCallback
                );
            }
        }
    }

    apiRTC.init({
        //apiCCId : "12", // Your can overide your number
        onReady: sessionReadyHandler,
        apiKey : "myDemoApiKey"
    });
}

var app = document.URL.indexOf( 'https://' ) === -1;

if ( app ) {
    document.addEventListener("deviceready", onDeviceReady, false);
} else {
    onDeviceReady();
}

Building the app

Now that you’re all set, how about building the app?

iOS

cordova build ios
cordova run ios

Android

cordova build android
cordova run android --device

Open this link with Chrome to exchange with your mobile over webrtc. You will be able to establish a webRTC call between your app and your computer using the number that has been automatically assigned to your apiRTC Client.

Troubleshooting

Getting building errors? Have some questions? Check out our FAQ to find the answer to your problem