This application exemplifies the seamless integration of EnableX in a Cordova environment for 1-to-1 video chats. It serves as a hands-on guide, offering detailed insights into the setup, configuration, and core functionalities. Moreover, it assists developers in grasping the nuances of real-time video communication within a Cordova framework.
- Register with EnableX [https://www.enablex.io]
- Create your Application
- Get your App ID and App Key delivered to your email
- Clone or download this Repository & follow the steps further
- You need to use App ID and App Key to run this Service.
- Your Cordova Sample Application Client EndPoint needs to connect to this Service to create Virtual Room.
- Follow README file of this Repository to setup the Service.
- Open the Cordova sample App
- Go to index.js and change the following:
/* To try the app with Enablex hosted service you need to set the kTry = true */ var kTry = true; /*Your webservice host URL, Keet the defined host when kTry = true */ var kBasedURL = "https://demo.enablex.io/"; /*The following information required, Only when kTry = true, When you hosted your own webservice remove these fileds*/ /*Use enablec portal to create your app and get these following credentials*/ var kAppId = "AppId"; var kAppkey = "AppKey";
Note: The distributable comes with demo username and password for the Service.
-
Run the following command in the root of your project:
cordova plugin add enablex-cordova-plugin@latest
After adding Cordova Enablex plugin
Go to platfrom inside Cordova project and open Android folder
If Android platform already added, remove Android and add again using the below command:
ionic cordova platform rm android && ionic cordova platform add android`
Set the Minimum SDK version and desugaring in gradle.properties file as shown:
android.useAndroidX=true
android.enableJetifier=true
cdvMinSdkVersion=21
android.enableDexingArtifactTransform.desugaring=false
Add the required libraries like webrtc and socket in the project. properties file as shown below:
cordova.system.library.7=org.webrtc:google-webrtc:1.0.32006
cordova.system.library.8=io.socket:socket.io-client:1.0.0
If you face “merge debug resource failed” error, then add packagingOptions in app level build.gradle file in android block
Execution failed for task ':app:mergeDebugJavaResource'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
> More than one file was found with OS independent path 'META-INF/DEPENDENCIES'.
packagingOptions {
exclude 'META-INF/DEPENDENCIES'
exclude 'META-INF/LICENSE'
exclude 'META-INF/LICENSE.txt'
exclude 'META-INF/license.txt'
exclude 'META-INF/NOTICE'
exclude 'META-INF/NOTICE.txt'
exclude 'META-INF/notice.txt'
exclude 'META-INF/ASL2.0'
exclude("META-INF/*.kotlin_module")
}
After adding Cordova Enablex plugin please add ios project as below command
cordova platform add ios
It will install all dependency enableX library through Pod. After that go to your iOS project folder and open your xcode , set up your certificate and then build the app either command line or through xcode.
-
Run the the following command in the root of your project:
cordova plugin remove enablex-cordova-plugin
Make sure You have Cordova 3.5.0 or greater installed. If you haven't, take a look at the Cordova instructions Page.
-
Install node.js
-
Install Cordova:
npm install -g cordova -
Install and update Xcode (you will need a Mac)
-
Install and update Android Studio
-
Clone this repo
-
In your terminal, change your directory to the root of the sample project you want to run.
-
Run the command:
npm installto install required node modules
-
Run the command:
cordova platform add ios //to add iOS your project cordova platform add android // to add android project -
Configuring the application Before running the application, you need to configure below as describe step 1.1.4.
var userName = "USERNAME" /* HTTP Basic Auth Username of App Server */ var password = "PASSWORD" /* HTTP Basic Auth Password of App Server */ var kBaseURL = "FQDN" /* FQDN of of App Server URL */ -
Run the command to enable multidex.
cordova plugin add cordova-plugin-enable-multidex -
Run the command
cordova run ios // to run iOS project cordova run android // to run Android project
All your editing will be done in your www folder.
All JavaScript code should be written in onDeviceReady function in /js/index.js because it is executed after all dependencies has loaded.
In the onDeviceReady, Registered all event listener to receive callback in the running conference. After callback registered, User needs to call joinRoom().
var videoSize = {
minWidth: 320,
minHeight: 180,
maxWidth: 1280,
maxHeight: 720,
};
var streamOpt = {
audio: true,
video: true,
data: true,
audioOnlyMode: false,
framerate: 30,
maxVideoBW: 1500,
minVideoBW: 150,
videoSize: videoSize,
audioMuted: false,
videoMuted: false,
maxVideoLayers: 1,
name: "Shashank"
};
var playerConfiguration = {
audiomute: true,
videomute: true,
bandwidth: true,
screenshot: true,
avatar: true,
iconHeight: 30,
iconWidth: 30,
avatarHeight: 200,
avatarWidth: 200,
};
var roomOpt = {
allow_reconnect: true,
number_of_attempts: 3,
timeout_interval: 15,
activeviews: "view",
playerConfiguration: playerConfiguration,
forceTurn: false,
chat_only: false,
};
window.EnxRtc.joinRoom(result.token, streamOpt, roomOpt);
After joining room onRoomConnected listener is called. In this listener you have to initiate local view and remote view by following function.
// To init local view
var initLocalViewOptions = {
height: 130,
width: 100,
margin_top: 50,
margin_left: 0,
margin_right: 15,
margin_bottom: 00,
position: "right"
};
window.EnxRtc.initLocalView(initLocalViewOptions, function (data) {
console.log(JSON.stringify(data.data));
}, function (err) {
console.log('Uh oh... error' + JSON.stringify(err));
});
// To init Remote view
var initRemoteViewOptions = {
height: 1020,
width: 480,
margin_top: 50,
margin_left: 0,
margin_right: 15,
margin_bottom: 00,
position: "right"
};
window.EnxRtc.initRemoteView(initRemoteViewOptions, function (data) {
console.log(JSON.stringify(data.data));
}, function (err) {
console.log('Uh oh... error' + JSON.stringify(err));
});
For mute/UnMute Audio
window.EnxRtc.muteSelfAudio(true/false);
true - mute
falsw - unmute
For mute/UnMute Video.
window.EnxRtc.muteSelfVideo(true/false);
true - mute
falsw - unmute
Registered all Listener in onDeviceReady function
onDeviceReady: function() {
// Do Your Stuff Here!
window.EnxRtc.addEventListner("onRoomConnected", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onRoomError", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onEventError", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onAudioEvent", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onVideoEvent", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onRoomDisConnected", function (data) {
console.log(+ JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onNotifyDeviceUpdate",function (data) {
console.log( JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onScreenSharedStarted", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onScreenSharedStopped", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onCanvasStarted", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onCanvasStopped", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onUserConnected", function (data) {
console.log(JSON.stringify(data.data));
});
window.EnxRtc.addEventListner("onUserDisConnected", function (data) {
console.log(JSON.stringify(data.data));
});
}