ApiRTC on 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!

1. Environment and requirements:

  • Android SDK : http://developer.android.com/sdk/index.html
  • 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
    

    2. 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
    

    2.1 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
    

    Add the index.html

    Edit the index.html file in your “www” folder:

    <!DOCTYPE html>
    <html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <style>
            .remote video {
                width: 100% !important;
            }
        </style>
    
        <script src="https://cloud.apizee.com/libs/jquery-1.9.0.min.js"></script>
        <script src="cordova.js"></script>
        <script src="https://cloud.apizee.com/apiRTC/apiRTC-latest.min.js"></script>
    </head>
    
    <body>
    
    <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" muted></video>
        </div>
    </div>
    
    
    
    <script>
        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();
        }
    </script>
    </body>
    </html>
    

    Building the app

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

    cordova build ios
    cordova run ios
    
    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.