undefined

Cordova Video Chat code sample - How To guide

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

Attention! 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:

    8.0.0

    If Cordova is not installed - run the following command:

    npm install -g cordova
  2. 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.

  3. Change directory to newly created Cordova app:

    cd sample-videochat-cordova
  4. Add platforms:

    cordova platform add ios --save
    cordova platform add android --save
    cordova platform add browser --save
  5. 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
  6. Install cordova-plugin-device plugin:

    cordova plugin add cordova-plugin-device
  7. Install cordova-custom-config plugin

    cordova plugin add cordova-custom-config

    Then add the following lines into config.xml (for iOS 10+, to support files attachments in sample):

    <platform name="ios">
     ...
     <config-file platform="ios" target="*-Info.plist" parent="NSCameraUsageDescription">
       <string>Use camera for video calling</string>
     </config-file>
     <config-file platform="ios" target="*-Info.plist" parent="NSMicrophoneUsageDescription">
       <string>Use microphone for video calling</string>
     </config-file>
    </platform>
  8. Install cordova-plugin-iosrtc plugin

    cordova plugin add cordova-plugin-iosrtc

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

    Swift3 support: https://github.com/eface2face/cordova-plugin-iosrtc/issues/182

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

  10. Copy content from sample-videochat-browser folder to www folder of your Cordova app.

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

    <script type="text/javascript" src="cordova.js"></script>
  12. 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:

    <script>
      document.addEventListener('deviceready', onDeviceReady, false);
    
      function onDeviceReady() {
    
          // Connect 'iosrtc' plugin, only for iOS devices:
          //
          if (window.device.platform === 'iOS') {
              cordova.plugins.iosrtc.registerGlobals();
          }
    
          // Load JavaScript files async
          //
          var loadScriptAsync = function(path){
              var 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;
              document.getElementsByTagName("body")[0].appendChild(jsScript);
          }
          loadScriptAsync("https://cdn.jsdelivr.net/npm/connectycube@1.2.1/dist/connectycube.min.js");
          loadScriptAsync("config.js")
          loadScriptAsync("js/helpers.js")
          loadScriptAsync("js/stateBoard.js")
          loadScriptAsync("js/app.js")
      }
    
      // Listen for orientation changes
      //
      window.addEventListener('orientationchange', updatedVideoFrames);
      window.addEventListener('scroll', updatedVideoFrames);
      //
      function updatedVideoFrames(){
        if (window.device.platform === 'iOS') {
            cordova.plugins.iosrtc.refreshVideos();
        }
      }
    
    </script>
  13. Finally, use the following commands to run the sample:

    cordova clean browser && cordova run browser
    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

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.

Android WebRTC support

In modern versions of Android the WebView component is based on the Chromium open source project which already includes WebRTC (more info). As listed there all Android devices starting from Android 5.0 support WebRTC API in WebView.

This can be accomplished by using the config.xml to inject these permissions in the AndroidManifest.xml file. The example below uses the CAMERA permissions:

<platform name="android">
  <allow-intent href="market:*" />
  <preference name="android-minSdkVersion" value="21" />
  <preference name="android-targetSdkVersion" value="21" />
  <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-feature android:name="android.hardware.camera" />
  </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.

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!