Embedding of browser-based online calls to mobile an SIP phones on a web page

To embed the Click to Call button you should embed the HTML code and all dependency scripts of the API to your website

Use these instructions for quick installation and configuration of the server. In addition to that, you can connect to our demo server demo.flashphoner.com via the Websockets protocol to perform the tests.

Step-by-step instructions for embedding Click to Call buttons on a web page

To embed the Click to Call button on your web page, create two empty click-to-call-min.html and click-to-call-min.js files. These files will contain the minimum code.

Let’s analyze the contents of the files

HTML

Let’s place the necessary elements in click-to-call-min.html:

1. Import the main API script

<script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>

2. Import the Click to Call button script

<script type="text/javascript" src="click-to-call-min.js"></script>

3. Initialize the API on page load

<body onload="init_page()">

4. Add the button “Call”, clicking which will place, a call to a given number

<input type="button" id="callBtn" Value="Call"/>

5. Add div elements for playing audio

<div id="localAudio"></div>
<div id="remoteAudio"></div>

The full HTML code of the page looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://flashphoner.com/downloads/builds/flashphoner_client/wcs_api-2.0/current/flashphoner.js"></script>
    <script type="text/javascript" src="click-to-call-min.js"></script>

</head>
<body onload="init_page()">
    <input type="button" id="callBtn" Value="Call"/>
    <div id="remoteAudio"></div>
    <div id="localAudio"></div>
</body>
</html>

before Click to call SIP phone SIP WCS WebSocket browser

JavaScript

1. Create a constant for the status of the work WCS and call operation status

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var CALL_STATUS = Flashphoner.constants.CALL_STATUS;

2. Create global variables for audio stream and current call

var localAudio;
var remoteAudio;

3. When you load an HTML page, initialize the API, get div elements for playing audio and invoke the function “connect()”, which provides connection to the WCS and SIP servers

function init_page() {
    Flashphoner.init({});
    localAudio = document.getElementById("localAudio");
    remoteAudio = document.getElementById("remoteAudio");
    connect();
}

4. The function “connect()” declares variables for the connection settings to the WCS and SIP servers. For correct work, you should replace the values on your own. URL – the URL of your WCS, sipOptions – data to connect to your SIP server. After declaring the variables, the function starts a new connection with the WCS and SIP servers

function connect() {
    var url = "wss://demo.flashphoner.com:8443"
    var registerRequired = true;
    var sipOptions = {
        login: "10001",
        authenticationName: "10001",
        password: "Pass123",
        domain: "your_sip_server.com",
        outboundProxy: "your_sip_server.com",
        port: "5060",
        registerRequired: registerRequired
    };
    var connectionOptions = {
        urlServer: url,
        sipOptions: sipOptions
    };
    console.log("Create new session with url " + url);
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log(SESSION_STATUS.ESTABLISHED);
    }).on(SESSION_STATUS.REGISTERED, function(session) {
        console.log(SESSION_STATUS.REGISTERED);
    });
    callBtn.onclick = call
}

5. The function “call(session)” is called when the “Call” button is clicked and initiates an outgoing call to a predefined number. The number is specified in the parameter “callee”

function call(session) {
    var constraints = {
        audio: true,
        video: false
    };
    var session = Flashphoner.getSessions()[0];
    var outCall = session.createCall({
        callee: "10002",
        remoteVideoDisplay: remoteAudio,
        localVideoDisplay: localAudio,
        constraints: constraints,
        stripCodecs: "SILK"
    });
    outCall.call();
    callBtn.value = "Hangup";
    callBtn.onclick = function() {
        callBtn.value = "Call";
        outCall.hangup();
        connect();
    }
}

The full JavaScript code looks like this:

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var CALL_STATUS = Flashphoner.constants.CALL_STATUS;
var localAudio;
var remoteAudio;

function init_page() {
    Flashphoner.init({});
    localAudio = document.getElementById("localAudio");
    remoteAudio = document.getElementById("remoteAudio");
    connect();
}

function connect() {
    var url = "wss://demo.flashphoner.com:8443"
    var registerRequired = true;
    var sipOptions = {
        login: "10001",
        authenticationName: "10001",
        password: "Pass123",
        domain: "your_sip_server.com",
        outboundProxy: "your_sip_server.com",
        port: "5060",
        registerRequired: registerRequired
    };
    var connectionOptions = {
        urlServer: url,
        sipOptions: sipOptions
    };
    console.log("Create new session with url " + url);
    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session) {
        console.log(SESSION_STATUS.ESTABLISHED);
    }).on(SESSION_STATUS.REGISTERED, function(session) {
        console.log(SESSION_STATUS.REGISTERED);
    });
    callBtn.onclick = call
}

function call(session) {
    var constraints = {
        audio: true,
        video: false
    };
    var session = Flashphoner.getSessions()[0];
    var outCall = session.createCall({
        callee: "10002",
        remoteVideoDisplay: remoteAudio,
        localVideoDisplay: localAudio,
        constraints: constraints,
        stripCodecs: "SILK"
    });
    outCall.call();
    callBtn.value = "Hangup";
    callBtn.onclick = function() {
        callBtn.value = "Call";
        outCall.hangup();
        connect();
    }
}

The appearance of the Click to Call button during a call

after Click to call SIP phone SIP WCS WebSocket browser

You can add a button created in this way to any of your web pages so that users can call you without leaving your site by clicking just one button.

The above example is a variant of the minimum working code for implementing the Click to Call function on a web page. It is not safe to transmit connection parameters to a SIP server in JS code, therefore, for production implementations, we recommend to use REST hook technology to transfer those parameters. The details are here.