Cordova Video Chat code sample - How To guide

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

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

Integration details

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

The output will be something like this:


If Cordova is not installed - run the following command:

npm install -g cordova
  1. Create Cordova app:
cordova create sample-videochat-cordova com.sample.videochat SampleVideoChatCordova

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:
cd sample-videochat-cordova
  1. Add platforms:
cordova platform add ios --save
cordova platform add android --save
  1. Install WebSocket-for-Android plugin to support WebSockets on Android < 4.4. We need WebSockets to work for Chat functionality:
cordova plugin add cordova-plugin-websocket
  1. Install cordova-plugin-device plugin:
cordova plugin add cordova-plugin-device
  1. Install cordova-custom-config plugin
cordova plugin add cordova-custom-config

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

<platform name="ios">
  <custom-config-file parent="NSPhotoLibraryUsageDescription" platform="ios" target="*-Info.plist">
    <string>Access to photo library</string>
  <custom-config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
    <string>Access to camera for media stream</string>

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.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-feature android:name="android.hardware.camera" />

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
cordova plugin add cordova-plugin-android-permissions

Then add a code to ask Android users for permissions. You can copy the needed code from the file: https://github.com/ConnectyCube/connectycube-cordova-samples-materials/blob/master/sample-videochat-cordova/cordova-permissions.js

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

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

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

  2. Copy content from sample-videochat-web folder to www folder of your Cordova app.

  3. Connect cordova.js at your index.html file:

<script type="text/javascript" src="cordova.js"></script>
  1. Register iosrtc plugin for iOS by calling cordova.plugins.iosrtc.registerGlobals() code.

Important: customise index.html file and connect all your own JS files and ConnectyCube lib in async manner, after cordova.plugins.iosrtc.registerGlobals() call. Video chat will not work without this trick:

    const onDeviceReady = () => {
        // Connect 'iosrtc' plugin, only for iOS devices:
        if (window.device.platform === 'iOS') {

        // Load JavaScript files async
        const loadScriptAsync = path => {
            const jsScript = document.createElement('script');
            jsScript.type = 'text/javascript';
            jsScript.async = false; //async is being set to false so that script will not immediately fire.
            jsScript.src = path;


    const updatedVideoFrames = () => {
        if (window.device.platform === 'iOS') {

    document.addEventListener('deviceready', onDeviceReady, false);

    // Listen for orientation changes
    window.addEventListener('orientationchange', updatedVideoFrames);
    window.addEventListener('scroll', updatedVideoFrames);
  1. Finally, use the following commands to run the sample:
cordova clean ios && cordova run ios --device # for run on device
cordova clean ios && cordova emulate ios # for run on emulator
cordova clean android && cordova run android --device # for run on device
cordova clean android && cordova emulate android # for run on emulator

The complete config.xml, package.json and cordova-permissions.js are available at GitHub repository

iOS WKWebView support

The default implementation of ios cordova plugin uses UIWebView that does not support real-time scroll events - http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal.

You may have some video view rendering position issues when scroll because of it. You may fix it by using a special plugin cordova-plugin-wkwebview-engine to support WKWebView for iOS (more details)

Read more details about it and decide do you need it.


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!