Jump to: navigation, search

Client SDK

The Client SDK is available for Javascript. The Javascript SDK works in all desktop browsers using Flash as well as WebRTC.

Classes and methodologies from the low level API of the CallManager to the higher level Model-View-Controller classes which implement the UI are listed in the Javascript Class Reference. You can download the API Reference from the following page:

Using the Client SDK

This is a tutorial for creating a page where a call is made upon loading and the results displayed in the center of the screen. By default, a video call is made and the video and audio that the server receives is sent sent to genesys@gvp.genrtc.net.

Support CSS and scripts

To use the Client SDK on a browser page, you must include the following CSS and JavaScript in your HTML source: 

<link rel="stylesheet" type="text/css" href="//<yourdomain.com>/user/demo/css/zsdk.css">
<script id="zsdkjs" type="text/javascript" src="//<yourdomain.com>/ZMobile_JS/ZMobile_JS/lib/SDK/sdk/zcontact/build/zsdk.js?v=3.1"></script>
Important
Some components require that other libraries, such as jQuery, be included as well.

Set some basics

In this section, we will gather information such as where the call should go and what kind of call it should be, and save it in some variables. 

// Developer ID 
ConnectionManager.partner = "home"; 

// Destination to dial. 
var destination = GeneralUtils.getURLParameter("destination");
if (!destination)
	destination = “sip:genesys@gvp.genrtc.net”; 

// Passing Custom SIP header
// Appears to SIP-Server in INVITE as:
// X-Custom-2: val2
// X-Custom-1: val1
CallManager._arg1 = "ch%23X-Custom-1%23val1%23ch%23X-Custom-2%23val2";
	
// Voice or Video call
var videoCall = true; 
if (GeneralUtils.getURLParameter("type")=="VOICE")
videoCall = false;

ConnectionManager.partner is used to tell the server which customer is calling, and from that it figures out which settings it should load. You should not need to change this value.

The destination variable is used to determine the destination of the call. The videoCall variable is used as a parameter for the PlaceCall() function. In this page, it specifies that a video call is to be made (instead of voice). In this example, custom SIP headers are specified. In general, any customer SIP headers may be assigned to CallManager._arg1. When a call is placed, the custom SIP headers will be included.

Create session with service

A session and a connection to the server must be established before a call can be made. This example assumes that login information and possibly a session ID are passed to the page. If a session has already been established, then the session ID can be used to locate and use the existing session. If it has not been established, then a session must be established by logging in. 

var session = GeneralUtils.getURLParameter("session");
var login = GeneralUtils.getURLParameter("login"); 
var password = GeneralUtils.getURLParameter("password");
/* Authenticate user with service */
if (session)
	ConnectionManager.locateAndLogin('', '', '',session,'spm');  //  obtain session using provisioning API or login directly
else
	ConnectionManager.locateAndLogin(login,password); // username and password

Initialize the calling SDK

To create a screen where the call actually takes place, we use the ZUI class. The ZUI class is a UI element that displays the call. There are settings to control the display, such as setting whether or not it is a video-only call. It is important to note that the uiParent parameter must be the ID of an existing HTML element with a # prepended. In this example, the HTML element is <div id="myVideoClient"> </div> and uiParent is #myVideoClient. The ID should be unique in the page. This element is usually a <div> element. After creating a ZUI, we have CallManager use that ZUI to display the video and output audio by using setZUI(): 

var zui;
$(document).ready(function() {

zui=new ZUI({
       		"uiParent": "#myVideoClient",
              	"widget": "phone",
             	"video": videoCall,
             	"showTimer": true,
              	"allowDeny": "tomato dash",
             	"podTitle": "Phone Pod",
              	"showStatus": true,
              	"draggable": true,
              	"resizable": true,
             	"showControls": true,
		"showTechCheck":true,
		"flashBgColor":"#333333"
                });


CallManager.setZUI(zui,  videoCall ?  CallManager.CAM_MIC : CallManager.MIC, false);
});

Place the call

Now the page will wait for the server to be ready to place a call. This is done by listening for the ZWRTC_READY event on the ConnectionManager. A call is made to the destination that was specified earlier. 

ConnectionManager.addListener('ZWRTC_READY', this, function(event) {
if (destination)
CallManager.placeCall(videoCall ? "VIDEO" : "VOICE", destination,  "Sample Call");
});

Send DTMF from web client

After a call is successfully placed and established, DTMF tones can be sent from the client application to the remote peer via the GVG platform. You can achieve this by using the CallManager class, which allows placing and receiving voice and video calls. Also, you must update the MCU configuration, as described below.

The supported DTMF tones are: 0,1,2,3,4,5,6,7,8,9,*,#

The following simple example shows how a DTMF dial-pad can be created using Javascript, and then the DTMF tones can be sent using that dial-pad: 

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
. . .
<body>
. . .
<div id="dialingPad"> </div>
. . .
<script type = "text/javascript” >
// Send DTMF tone
function sendDTMF(tone) {
  console.log("Sending DTMF [" + tone + "]");
  CallManager.sendDTMF(tone);
};
 
// Create a phone like dialing pad for sending DTMF to remote peer.
function createDialingPad() {
  var tones = '1234567890*#';
  var dialingPad = document.getElementById('dialingPad');
  for (var i = 0; i < tones.length; ++i) {
    var tone = tones.charAt(i);
    dialingPad.innerHTML += '<button id="' +
      tone + '" onclick="sendDTMF(\'' + tone +
      '\')" style="height:40px; width: 30px">' + tone + '</button>';
    if ((i + 1) % 4 == 0) {
      dialingPad.innerHTML += '<br>';
    }
  }
};
 
createDialingPad();
</script>
. . .
</body>
</html>

Update MCU configuration

Updating the MCU configuration is required for sending DTMF to the remote peer as telephone-events, as per RFC 2833. In the Application Server, update the following configuration file:

/opt/zenon/public_html/WEB-INF/infotypes_saypage.xml

In this file, locate the parameter SIPUserInputMode, and replace the default value of SIPINFO with the value RFC2833. 

<config>
    <name>SIPUserInputMode</name>
    <!-- <value>SIPINFO</value> -->
    <value>RFC2833</value>
    <type>replace</type>
</config>

Mute/un-mute speaker/microphone/camera

The ZUI class provides methods for muting/un-muting the local audio/video devices. In your HTML page, you can use those methods to mute/un-mute your camera or microphone once a call is established.

Speaker

  • spkmute - mutes the speaker device
  • spkunmute - unmutes the speaker device

Example: 

<a href="#" onclick="zui.spkmute();">Disable Speaker</a>
<a href="#" onclick="zui.spkunmute();">Enable Speaker</a>

Microphone

  • mute - mutes the microphone
  • unmute - un-mutes the microphone

Example: 

<a href="#" onclick="zui.mute();">Disable Microphone</a>
<a href="#" onclick="zui.unmute();">Enable Microphone</a>

Camera

  • cammute - stops the camera
  • camunmute - starts the camera

Example: 

<a href="#" onclick="zui.cammute();">Stop Camera</a>
<a href="#" onclick="zui.camunmute();">Start Camera</a>

Full HTML

<!doctype html>
<html>
<head>
	<title>SDK Sample</title>
	<link rel="stylesheet" type="text/css" href="//<yourdomain.com>/user/demo/css/zsdk.css">
  	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  	<script src="//code.jquery.com/jquery-1.9.1.js"></script>
  	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script id="zsdkjs" type="text/javascript" src="//<yourdomain.com>/ZMobile_JS/ZMobile_JS/lib/SDK/sdk/zcontact/build/zsdk.js?v=3.1"></script>
</head>

<script type = "text/javascript" >

/* Basic steps */
	// Developer ID 
	ConnectionManager.partner = "home"; 
	// Destination to dial.
	var destination = GeneralUtils.getURLParameter("destination");
	if (!destination)
		destination = "sip:genesys@gvp.genrtc.net";
	// Passing Custom SIP header
	CallManager._arg1 = "ch%23X-Custom-1%23val1%23ch%23X-Custom-2%23val2";
	// Voice or Video call
	var videoCall = true; 
	if (GeneralUtils.getURLParameter("type")=="VOICE")
                videoCall = false;


/* Authenticate user with service */
	var session = GeneralUtils.getURLParameter("session");
	var login = GeneralUtils.getURLParameter("login"); 
	var password = GeneralUtils.getURLParameter("password");
	if (session)
		ConnectionManager.locateAndLogin('', '', '',session,'spm');  
	else
		ConnectionManager.locateAndLogin(login,password); 

/* Initialise the calling SDK with the DOM components to be used for rendering */
	var zui;
	$(document).ready(function() {

                zui=new ZUI({
                    "uiParent": "#myVideoClient",
                    "widget": "phone",
                    "video": videoCall,
                    "showTimer": true,
                    "allowDeny": "tomato dash",
                    "podTitle": "Phone Pod",
                    "showStatus": true,
                    "draggable": true,
                    "resizable": true,
                    "showControls": true,
		    "showTechCheck":true,
		    "flashBgColor":"#333333"
                });


	  	CallManager.setZUI(zui,  videoCall ?  CallManager.CAM_MIC : CallManager.MIC, false);
	});

/* Place the call */
	ConnectionManager.addListener('ZWRTC_READY', this, function(event) {
	if (destination)
	    CallManager.placeCall(videoCall ? "VIDEO" : "VOICE", destination,  "Sample Call");
	});

</script>

<!-- HTML UI -->
<body>
	<center><h2>Test Call</h2></center>
	<div id="myVideoClient"> </div>
</body>
This page was last edited on June 3, 2016, at 15:11.
Comments or questions about this documentation? Contact us for support!