Sample-webrtc-cordova

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

Contents

Sources

GitHub page - https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/cordova/video_chat

Download ZIP — https://github.com/QuickBlox/quickblox-javascript-sdk/archive/gh-pages.zip

Overview

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+


Documentation

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>
  <config-file platform="ios" target="*-Info.plist" parent="NSMicrophoneUsageDescription">
    <string>Use microphone for video calling</string>
  </config-file>
</platform>

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:

<script>
      document.addEventListener('deviceready', onDeviceReady, false);
 
      function onDeviceReady() {
 
          // Just for iOS devices.
          // Read more here https://github.com/eface2face/cordova-plugin-iosrtc
          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://cdnjs.cloudflare.com/ajax/libs/quickblox/2.3.4/quickblox.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>

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 - 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 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="android.hardware.camera" />
  </config-file>
</platform>

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

More info on permissions.

Debugging

The following tools will help you debug your Cordova application:

1. Safari Web inspector

2. cordova-plugin-console