Android SDK

Mobile Android SDK

The VeriShow Android API aims to provide text and video chat functionality to native Android apps.

Overview

The API for Android is based on the CrossWalk project (https://crosswalk-project.org/).

This document describes how to add VeriShow functionality to a native Android application.application.

Perquisites

Hardware & Software Requirements

Installing CrossWalk

Inside the “build.gradle” add the following to “dependencies” section:

Compile fileTree(dir: 'libs', include: ['*.jar'])
Compile 'com.android.support:appcompat-v7:22.2.1'
Compile 'org.xwalk:xwalk_core_library:14.43.343.24'
  • Inside the “build.gradle” add the following to “repositories”:
maven { url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2' 
  • Click on ‘Sync Now’.·
    Add cross-walk to the ‘activity_main.xml’:
<org.xwalk.core.XWalkView        android:id="@+id/xwalkWebView"        android:orientation="vertical"        android:layout_width="1dp"        android:layout_height="1dp"        android:background="#000000"        />

Initializing CrossWalk & Event Handling

  1. Loading the VeriShow page (from MainActivity.java) creates a new visit the Visitors list in the VeriShow backend, from where the agent can take call:
XWalkView xWalkWebView=(XWalkView)findViewById(R.id.xwalkWebView);
String url="http://platform.verishow.com/files/native_app.html?ts="+new Date().getTime();
url+="&aid="+<YOUR_ACCOUNT_ID>; 
xWalkWebView.load(url, null);
  1. Create sub class inside MainActivity.java that will handle the various events during a session (e.g. session started, session closed):
class JavaScriptInteractions{
@JavascriptInterface
public String verishowStarted(){
Message msg= Message.obtain();
arg1=1;
mHandler.sendMessage(msg); return ""; 
} 
@JavascriptInterface public void verishowClosed(){
 Message msg= Message.obtain(); 
 arg1=2; 
 mHandler.sendMessage(msg);
 } 
} 
@Override protected void onPause() {
 super.onPause(); 
 if (xWalkWebView != null) { 
 xWalkWebView.pauseTimers(); 
 xWalkWebView.onHide(); 
} 
} 
@Override protected void onResume() { 
super.onResume(); 
if (xWalkWebView != null) { 
 xWalkWebView.resumeTimers();
 xWalkWebView.onShow(); 
} 
} 
@Override protected void onDestroy() {
 xWalkWebView.onDestroy(); 
if (xWalkWebView != null) {
 xWalkWebView.onDestroy(); 
} 
} 
@Override public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it is present. 
getMenuInflater().inflate(R.menu.menu_main, menu); 
return true; 
} 
@Override public boolean onOptionsItemSelected(MenuItem item) {
 // Handle action bar item clicks here. The action bar will 
// automatically handle clicks on the Home/Up button, so long 
// as you specify a parent activity in AndroidManifest.xml. 
int id = item.getItemId(); //noinspection SimplifiableIfStatement 
if (id == R.id.action_settings) { 
return true; 
} 
return super.onOptionsItemSelected(item); 
} 
public XWalkView getxWalkWebView() { 
return xWalkWebView; 
} 
public void setxWalkWebView(XWalkView xWalkWebView) {
 xWalkWebView = xWalkWebView; 
} 
public Display getCurrentDisplay() {
 return currentDisplay; 
} 
public void setCurrentDisplay(Display currentDisplay) {
 currentDisplay = currentDisplay; 
} 
}
  1. Add a subclass as a JavaScript Interface for CrossWalk:
addJavascriptInterface(new JavaScriptInteractions(), "NativeInterface");
  1. Create a Handler that will receive UI notifications events (for example: when chat starts it will resize the hidden CrossWalk component to full size):
mHandler= new Handler(){
@Override
public void handleMessage(Message msg) {
// on live help image click message
if(msg.arg1==1){
DisplayMetrics displaymetrics = new DisplayMetrics();
getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
LayoutParams params=xWalkWebView.getLayoutParams();
params.height=height;
params.width=width;
xWalkWebView.setLayoutParams(params);
}

// On close message
else{
DisplayMetrics displaymetrics = new DisplayMetrics();
getMetrics(displaymetrics);
int height = 1;
int width = 1;
LayoutParams params=xWalkWebView.getLayoutParams();
params.height=height;
params.width=width;
xWalkWebView.setLayoutParams(params);
xWalkWebView.load(url, null);
setVisibility(View.VISIBLE);
}}};

Making a call

The following code will create a call. Once the call starts it will send an event to display the whole xWalkWebView.

evaluateJavascript("performClick()", null);
DisplayMetrics displaymetrics = new DisplayMetrics();
getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
LayoutParams params=xWalkWebView.getLayoutParams();
params.height=height;
params.width = width;
xWalkWebView.setLayoutParams(params);
xWalkWebView.setVisibility(View.INVISIBLE);

Application Permissions

VeriShow for Android requires the following permission in the application manifest:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.VIBRATE"/>

Example Application

The example application holds an image button (the ‘Talk to Us’ button) that starts the chat. By default the sample application calls the VeriShow’s sales account.

To receive a sample application, please contact us.