Skip to content

Cordova Conference Video calling code sample - How To guide

Here we explain how to run origin Conference Video calling code sample for browser on Cordova/PhoneGap environment

Complete Conference Video calling API integration guide for Web/Javascript and Hybrid apps is here

Integration details

  1. Make sure you have the latest Cordova installed:
Terminal window
cordova --version

The output will be something like this:

Terminal window
9.0.0

If Cordova is not installed - run the following command:

Terminal window
npm install -g cordova
  1. Create Cordova app:
Terminal window
cordova create sample-videochat-conf-cordova com.sample.videochat.conf SampleVideoChatConfCordova

You can use the Create your first Cordova app guide to get more info how to create your 1st Cordova app.

  1. Change directory to newly created Cordova app:
Terminal window
cd sample-videochat-conf-cordova
  1. Add platforms:
Terminal window
cordova platform add ios --save && cordova platform add android --save
  1. Install cordova-plugin-device plugin:
Terminal window
cordova plugin add cordova-plugin-device
  1. Install cordova-custom-config plugin
Terminal window
cordova plugin add cordova-custom-config
  1. Install cordova-plugin-statusbar plugin
Terminal window
cordova plugin add cordova-plugin-statusbar

Then add the following lines into config.xml (for iOS 10+):

<platform name="ios">
...
<custom-config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
<string>Access to camera to make video calls.</string>
</custom-config-file>
<custom-config-file parent="NSMicrophoneUsageDescription" platform="ios" target="*-Info.plist">
<string>Access to microphone to make calls.</string>
</custom-config-file>
</platform>

And the following for Android:

<platform name="android">
...
<custom-preference name="android-minSdkVersion" value="21" />
<custom-preference name="android-targetSdkVersion" value="28" />
<custom-config-file parent="/*" target="AndroidManifest.xml">
<uses-permission android:name="android.webkit.PermissionRequest" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
</custom-config-file>
</platform>

Also, don’t forget to put the xmlns:android="http://schemas.android.com/apk/res/android" attribute in the root widget element.

More info on Android permissions.

  1. Install cordova-plugin-android-permissions plugin
Terminal window
cordova plugin add cordova-plugin-android-permissions
  1. move to WKWebView for iOS
Terminal window
cordova plugin add cordova-plugin-wkwebview-engine

Then to setup the required permissions:

<platform name="ios">
...
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<preference name="WKWebViewOnly" value="true" />
</platform>

More info on permissions https://github.com/apache/cordova-plugin-wkwebview-engine#required-permissions

  1. Install cordova-plugin-iosrtc plugin to make video calling work at iOS:
Terminal window
cordova plugin add cordova-plugin-iosrtc

Then follow all the steps from the Building Steps guide to connect the plugin in a right way.

!> You need to use at least 6.0.12 version of the lib, otherwise calls will not work

  1. Install iOS Deployment Tools if you want to launch iOS app on iOS device.

  2. Take sources from https://github.com/ConnectyCube/connectycube-web-samples/tree/master/videochat to your connectycube-cordova-samples/sample-videochat-conf-cordova app:

  • clone connectycube-web-samples repository;
  • navigate to the connectycube-web-samples/videochat-conf and run npm install && npm run build to prepare dist;
  • copy dist’s content to the connectycube-cordova-samples/sample-videochat-conf-cordova/www folder of your Cordova app
  1. Create and add index.js file into www folder:

const loadScript = path => {
let $script = document.createElement("script");
$script.type = "text/javascript";
$script.async = false;
$script.src = path;
document.body.appendChild($script);
};
const onDeviceReady = () => {
if (window.device.platform === "Android") {
const { permissions } = cordova.plugins;
permissions.requestPermissions([permissions.CAMERA, permissions.RECORD_AUDIO, permissions.MODIFY_AUDIO_SETTINGS]);
}
if (window.device.platform === "iOS") {
const { iosrtc } = cordova.plugins;
// Connect 'iosrtc' plugin, only for iOS devices
iosrtc.registerGlobals();
// Use speaker audio output
iosrtc.selectAudioOutput("speaker");
// Request audio and/or camera permission if not requested yet
iosrtc.requestPermission(true, true, function(permissionApproved) {
console.log("requestPermission status: ", permissionApproved ? "Approved" : "Rejected");
});
// Refresh video element
window.addEventListener("orientationchange", () => iosrtc.refreshVideos());
window.addEventListener("scroll", () => iosrtc.refreshVideos());
}
loadScript("main.js");
};
document.addEventListener("deviceready", onDeviceReady, false);
  1. Change <meta name="viewport" content="..." /> and connect cordova.js, index.js scripts instead of main.js at your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover" />
...
</head>
...
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="index.js"></script>
</html>

Also, change all resources absolute paths to relative, e.g. <link rel="stylesheet" href="/styles/index.css" /> to <link rel="stylesheet" href="./styles/index.css" />.

  1. Finally, use the following commands to run the sample:
Terminal window
cordova run ios --device # for run on device
cordova emulate ios # for run on emulator
Terminal window
cordova run android --device # for run on device
cordova emulate android # for run on emulator

The complete sample source code is available at GitHub repository

Debugging

The following tools will help you debug your Cordova application:

Can’t build yourself?

Got troubles with building Cordova code sample? Just create an issue at Issues page - we will create the sample for you. For FREE!