Home

Welcome,

This documentation will get you up to speed with the Cloudonix SIP Over WebSocket developer SDK. This SDK is provided as a rapid development library, enabling web developer to integrate Real Time Communications (RTC) capabilities into existing web applications, at ease.


Disclaimer:

This SDK is not production grade yet and may contain bugs and missing features. By using this SDK you are admiting and agreeing to the following:

  1. You are a professional developer and you know what you are doing.
  2. You are experimenting with this tool and will happily provide Cloudonix with feedback and bug reports, as you able to do so.
  3. You accept the fact that this tool comes with no warrenty or assurance of proper functionality - it is an Alpha release.

You are welcome to contact our support with questions and assistance requests via email, at support@cloudonix.io

Additional information can be obtained at our website, located at https://cloudonix.io


Step 1: Your HTML Boiler plate

We will assume you are integrating with a simple web page, thus, you will most probably begine with something that looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>
</head>
</html>

Now, let's throw some "basic elements" into the page, in this case, a simple button that will generate a call to a specification destination.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="myCallButton" name="myCallButton">Call Now!!!</button>
    <button id="myHangupButton" name="myHangupButton">Hangup</button>
</body>
</head>
</html>

Step 2: Activating the SDK

Now, he have a very basic framework - let's load our SDK and relevant resources.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="myCallButton" name="myCallButton">Call Now!!!</button>
    <button id="myHangupButton" name="myHangupButton">Hangup</button>

    <!-- Add the following section to the bottom of your HTML body tag -->
    <script type="text/javascript" src="https://webinc.cloudonix.io/sdk/js/cloudonix.js"></script>
    <script>
        Cloudonix.load();
        Cloudonix.init();
    </script>

</body>
</head>
</html>

Step 3: To Register or not to Register

The WebSDK enables three modes of operations: Traditional SIP, Registrationless Operation and RegFree Dialing.

Traditional SIP

This is the traditional method of using SIP communications, utilising normal SIP based signalling. In this mode, the WebSDK will register to the remote server using a DIGEST authentication mechanism. This method is designed for situations where the client is required to receiving inbound calls (not implemented yet).

To use this method, your code will now look like this:

    <!-- Add the following section to the bottom of your HTML body tag -->
    <script type="text/javascript" src="https://webinc.cloudonix.io/sdk/js/cloudonix.js"></script>
    <script>
        Cloudonix.load();
        Cloudonix.init();
        Cloudonix.setCredentials('your.cloudonix.domain','username','password');
        Cloudonix.sipRegister();
    </script>
    

Registrationless Operation

This method is very similar to "Traditional SIP", however, it does not require the "REGISTER" function to be invoked.

To use this method, your code will now look like this:

    <!-- Add the following section to the bottom of your HTML body tag -->
    <script type="text/javascript" src="https://webinc.cloudonix.io/sdk/js/cloudonix.js"></script>
    <script>
        Cloudonix.load();
        Cloudonix.init();
        Cloudonix.setCredentials('your.cloudonix.domain','username','password');
    </script>
    

RegFree Dialing

This is a highly secure method of providing "single time authorization tokens" for each initiated call. This method uses an external mechanism, to obtain a remote single time token. You can use the Cloudonix.setRegFree and Cloudonix.requestRegFreeToken functions, to simulate the "external request".

To use this method, your code will now look like this:

    <!-- Add the following section to the bottom of your HTML body tag -->
    <script type="text/javascript" src="https://webinc.cloudonix.io/sdk/js/cloudonix.js"></script>
    <script>
        Cloudonix.load();
        Cloudonix.init();
        Cloudonix.setRegFreeToken('username','password','cloudonix-token');
    </script>
    

Step 4: Making an outbound call

Now, we shall add two new functions - make a call and hangup a call.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="myCallButton" name="myCallButton" onClick="makeCall(your.destination); return false;">Call Now!!!</button>
    <button id="myHangupButton" name="myHangupButton" onClick="hangupCall(); return false;">Hangup</button>

    <!-- Add the following section to the bottom of your HTML body tag -->
    <script type="text/javascript" src="https://webinc.cloudonix.io/sdk/js/cloudonix.js"></script>
    <script>
        Cloudonix.load();
        Cloudonix.init(your.cloudonix.provided.token.string);
        
        <!-- Your selected method of operation goes here -->
        
        function makeCall(destination) {
            Cloudonix.sipStartCall(destination);
        }
        
        function hangupCall() {
            Cloudonix.sipStopCall();
        }
    </script>

</body>
</head>
</html>

Congratulations - you had completed your first call button - YES, IT WAS THAT SIMPLE!

Step 5: Handling events

The SDK provides multiple events - which represent various states of the SIP stack and active SIP session. These events can be used to create your unique user experience. Let us assume you will want to change the color of your call button to 'green' when the call is connected and light up the 'hangup' button in 'red' to indicate you can press that button to hangup. That would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button id="myCallButton" name="myCallButton" onClick="makeCall(your.destination); return false;">Call Now!!!</button>
    <button id="myHangupButton" name="myHangupButton" onClick="hangupCall(); return false;">Hangup</button>

    <!-- Add the following section to the bottom of your HTML body tag -->
    <script type="text/javascript" src="https://webinc.cloudonix.io/sdk/js/cloudonix.js"></script>
    <script>
        Cloudonix.load();
        Cloudonix.init(your.cloudonix.provided.token.string);
        
        function makeCall(destination) {
            Cloudonix.sipStartCall(destination);
        }
        
        function hangupCall() {
            Cloudonix.sipStopCall();
        }
        
        Cloudonix.sessionEvents.onSessionConnected(function (ev) {
            document.getElementById('myCallButton').style.background = 'green';
            document.getElementById('myHangupButton').style.background = 'red';
        });
        
    </script>

</body>
</head>
</html>

Awesome - you're ready to create something new and amazing. Take a deeper dive into the methods and callback documentation and learn more about the relevant process.

cloudonix.js

Cloudonix SIP Over WebSocket Library (JavaScript Wrapper for SIPml5) - Alpha 4.
Version:
  • 0.1.2
Author:
  • nirs@cloudonix.io <https://cloudonix.io>