Page History

Example of web phone with dialer GUI

On the screenshot below (from left to right)

• parameters for SIP connection are entered in to the login form
• callee SIP username is entered
• video call is established

Image Added

Video or voice call is placed when corresponding button is clicked and terminated when Hangup button is clicked.
Call can be put on hold using the 'pause' icon.
The volume can be adjusted using the 'loudspeaker' icon in the top left corner.

Code of the example

The path to the source code of the example on WCS server is:

/usr/local/FlashphonerWebCallServer/client/examples/demo/sip/phone-ui

gui - directory containing files required for the GUI: file with styles, fonts, images
listener - directory containing event listener scripts
sounds - directory containing sound files for events
SoundControl.js - script providing functionality for playing sounds
Phone.js - script providing functionality for the web phone
Phone.html - page of the web phone

This example can be tested using the following address:

https://host:8888/client/examples/demo/sip/phone-ui/Phone.html

Here host is the address of the WCS server.

Work with code of the web phone

To analyze the code, let's take the version of file Phone.js with hash bb13dd898ed9ef182abcf44dd7fdc159e8d66f4a, which is available here and can be downloaded with corresponding build 0.5.8.1894.

In this script, Flashphoner API methods are called from the corresponding methods of Phone object.
For example, method createSession() for establishing connection to server is called from method connect(). line 20

Phone.prototype.connect = function () {
    var me = this;
    .....
    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){
    .....

The Phone object is created and initialized after API initialization. line 594

var phone = new Phone();

phone.init();

Besides the methods required for the calling functionality, it has listener methods for changing controls of the interface depending on the connection and call status (line 227 - line 497).

1. Initialization of the API. line 584

API is initialized after loading the page. For Flash support, the path to SWF file is passed to the init() method.

Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'});

2. Connection to server. line 44

Connection to server is established when 'log in' button in the login form is clicked.

Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){
    me.session = session;
    me.connectionStatusListener(SESSION_STATUS.ESTABLISHED);
}).on(SESSION_STATUS.REGISTERED, function(session){
        me.registrationStatusListener(SESSION_STATUS.REGISTERED);
}).on(SESSION_STATUS.DISCONNECTED, function(){
        me.connectionStatusListener(SESSION_STATUS.DISCONNECTED);
}).on(SESSION_STATUS.FAILED, function(){
        me.connectionStatusListener(SESSION_STATUS.FAILED);
}).on(SESSION_STATUS.INCOMING_CALL, function(call){
    me.onCallListener(call);
    call.on(CALL_STATUS.RING, function(){
        me.callStatusListener(CALL_STATUS.RING);
    }).on(CALL_STATUS.ESTABLISHED, function(){
        me.callStatusListener(CALL_STATUS.ESTABLISHED);
    }).on(CALL_STATUS.FINISH, function(){
        me.callStatusListener(CALL_STATUS.FINISH);
        me.currentCall = null;
        me.incomingCall = false;
    }).on(CALL_STATUS.FAILED, function(){
        me.callStatusListener(CALL_STATUS.FAILED);
        me.currentCall = null;
        me.incomingCall = false;
    });
});

Session is created with method createSession().

Object with connection options is passed to the method

• urlServer - URL for WebSocket connection to WCS server
• sipOptions - object with parameters for SIP connection

Callback functions for the following session statuses are added to make appropriate changes in controls of the interface

• SESSION_STATUS.REGISTERED - successful SIP registration
• SESSION_STATUS.DISCONNECTED - connection is closed
• SESSION_STATUS.FAILED - connection failure
• SESSION_STATUS.INCOMING_CALL - incoming call is received

When incoming call is received, callback functions for events CALL_STATUS.RING, CALL_STATUS.ESTABLISHED, CALL_STATUS.FINISH and CALL_STATUS.FAILED are added.

3. Outgoing call. line 93

New call is created with method Session.createCall().

The following parameters are passed when call is created

• callee - callee SIP username
• visibleName - display name
• localVideoDisplay - <div> element, in which video from camera will be displayed
• remoteVideoDisplay - <div> element, in which video from the other party will be displayed
• constraints - object with parameters specifying if the call should have audio and video

var outCall = this.session.createCall({
    callee: callee,
    visibleName: this.sipOptions.login,
    localVideoDisplay: this.localVideo,
    remoteVideoDisplay: this.remoteVideo,
    constraints: constraints
}).on(CALL_STATUS.RING, function(){
    me.callStatusListener(CALL_STATUS.RING);
}).on(CALL_STATUS.ESTABLISHED, function(){
    me.callStatusListener(CALL_STATUS.ESTABLISHED);
}).on(CALL_STATUS.FINISH, function(){
    me.callStatusListener(CALL_STATUS.FINISH);
    me.currentCall = null;
}).on(CALL_STATUS.FAILED, function(){
    me.callStatusListener(CALL_STATUS.FAILED);
    me.currentCall = null;
});

When call is created, callback functions for events CALL_STATUS.RING, CALL_STATUS.ESTABLISHED, CALL_STATUS.FINISH and CALL_STATUS.FAILED are added to make appropriate changes in controls of the interface.

Outgoing call is placed with method Call.call(). line 111

outCall.call();

4. Answering incoming call. line 152

Incoming call is answered with method Call.answer().
Object with answer options is passed to the method

• localVideoDisplay - <div> element, in which video from camera will be displayed
• remoteVideoDisplay - <div> element, in which video from the other party will be displayed

this.currentCall.answer({
    localVideoDisplay: this.localVideo,
    remoteVideoDisplay: this.remoteVideo
});

5. Call hold.

The following methods are used to put call on hold and retrieve

- put on hold: Call.hold() - line 193

this.currentCall.hold();

- retrieve: Call.unhold() - line 203

this.currentCall.unhold();

6. Call hangup. line 182

Method Call.hangup() is used to hang up call.

this.currentCall.hangup();

7. Adjusting the volume. line 657

Method Call.setVolume() is used to adjust the volume.

phone.currentCall.setVolume(ui.value);

8. Disconnection. line 75

Method Session.disconnect() is called to close connection to the server.

this.session.disconnect();