Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search


Deprecation notice

Deprecation notice

This documentation is outdated, the newest version of the documentation is now maintained at


Project homepage on GIT:

Clone source code via Terminal (the way we recommend):

git clone

or download ZIP:


The Apache Cordova (PhoneGap) WebRTC VideoChat code sample allows you easily add video calling features into your Cordova app. Enable a video call function similar to Skype using this code sample as a basis.

It is built on top of the WebRTC technology.

Webrtc cordova sample1.PNG Webrtc cordova sample2.PNG Webrtc cordova sample3.PNG

Platforms support

Browser iOS Android
+ + 5.0+


Integration details

Steps to build this code sample from scratch:

1. Create Cordova app:

cordova create HelloVideoChat

2. Copy content from samples/webrtc to www folder of your Cordova app.

3. Add platforms:

cordova platform add ios --save
cordova platform add android --save
cordova platform add browser --save

4. Install WebSocket-for-Android plugin to support WebSockets on Android < 4.4

5. Install cordova-plugin-device

6. Install cordova-custom-config and add the following lines into config.xml (for iOS 10):

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

7. Install iOS Deployment Tools to launch iOS apps into an iOS Device.

8. Install cordova-plugin-iosrtc for WebRTC support on iOS:

9. (Important!) Customise index.html file and connect all your custom js files + QuickBlox JS framework in async manner, after cordova.plugins.iosrtc.registerGlobals() call. Video chat will not work without this trick:

      document.addEventListener('deviceready', onDeviceReady, false);
      function onDeviceReady() {
          // Just for iOS devices.
          // Read more here
          if (window.device.platform === 'iOS') {
          // 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;
      // Listen for orientation changes
      window.addEventListener('orientationchange', updatedVideoFrames);
      window.addEventListener('scroll', updatedVideoFrames);
      function updatedVideoFrames(){
        if (window.device.platform === 'iOS') {

10. To run on device use the following commands:

cordova clean ios && cordova run ios --device
cordova clean browser && cordova run browser --device
cordova clean android && cordova run android --device

iOS WKWebView support

The default implementation of ios cordova plugin uses UIWebView that does not support real-time scroll events -

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 permission:

<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="" />

Also, don't forget to put this attribute in the root widget element: xmlns:android="

More info on permissions.


The following tools will help you debug your Cordova application:

1. Safari Web inspector

2. cordova-plugin-console