Page History

Example of web phone with dialer GUI

On the screenshot below (from left to right)

...

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:

...

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 code

Code Block

language	js
theme	RDark

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 code

Code Block

language	js
theme	RDark

var phone = new Phone();

phone.init();

...

1. Initialization of the API. line 584API is initialized after loading the page. For Flash support, the path to SWF file is passed to the

Flashphoner.init() method. code

Code Block

language	js
theme	RDark

        Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf',
            mediaProvidersReadyCallback: function(mediaProviders) {
                //hide remote video if current media provider is Flash
                if (mediaProviders[0] == "Flash") {
                    $("#remoteVideoWrapper").removeClass().hide();
                    $("#localVideoWrapper").attr('class', 'b-video__video ui-widget-content');
                }
            }});

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

Flashphoner.createSession() code

Object with connection options is passed to the method

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

Code Block

language	js
theme	RDark

    var url = setURL();

    this.sipOptions = {};
    this.sipOptions.login = $('#sipLogin').val();
    this.sipOptions.password = $('#sipPassword').val();
    this.sipOptions.authenticationName = $('#sipAuthenticationName').val();
    this.sipOptions.domain = $('#sipDomain').val();
    this.sipOptions.outboundProxy = $('#sipOutboundProxy').val();
    this.sipOptions.port = $('#sipPort').val();
    this.sipOptions.useProxy = true;
    this.sipOptions.registerRequired = true;

    var connectionOptions = {
        urlServer: url,
        sipOptions: this.sipOptions
    };

    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){
        ...
    });

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED code

Code Block

language	js
theme	RDark

    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);
  ...
    });

4. Receiving the event confirming successful registration on SIP server

ConnectionStatusEvent REGISTERED code

Code Block

language	js
theme	RDark

    callFlashphoner.createSession(connectionOptions).on(CALLSESSION_STATUS.RINGESTABLISHED, function(session){
        me..callStatusListener(CALL_STATUS.RING);
    }).on(CALLSESSION_STATUS.ESTABLISHEDREGISTERED, function(session){
        me..callStatusListener(CALL_STATUS.ESTABLISHED);
    }).on(CALLSESSION_STATUS.FINISHDISCONNECTED, function(){
        me.callStatusListener(CALL...
    }).on(SESSION_STATUS.FINISH);FAILED, function(){
        me.currentCall = null;...
    }).on(SESSION_STATUS.INCOMING_CALL, function(call){
        me.incomingCall = false;
...
    });

5. Receiving the event on incoming call

ConnectionStatusEvent INCOMING_CALL code

Code Block

language	js
theme	RDark

    }Flashphoner.createSession(connectionOptions).on(CALLSESSION_STATUS.FAILEDESTABLISHED, function(session){
        me.callStatusListener(CALL...
    }).on(SESSION_STATUS.FAILED);REGISTERED, function(session){
        me.currentCall = null;...
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        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

...

.on(SESSION_STATUS.FAILED, function(){
        ...
    }).on(SESSION_STATUS.INCOMING_CALL

...

, function(call){
        call.on(CALL_STATUS.RING,

...

 function(){
            ...
        });
        me.onCallListener(call);
    });

6. Outgoing call. line 93New call is created with method Session

session.createCall(), call(). код

The following parameters are passed when call is created

...

Code Block

language	js
theme	RDark

    var constraints = {
        audio: true,
        video: hasVideo
    };

    var outCall = this.session.createCall({
        callee: callee,
        visibleName: this.sipOptions.login,
        localVideoDisplay: this.localVideo,
    remoteVideoDisplay: this.remoteVideo,
    constraintsremoteVideoDisplay: constraints
}).on(CALL_STATUS.RING, function(){this.remoteVideo,
    me.callStatusListener(CALL_STATUS.RING);
}).on(CALL_STATUS.ESTABLISHED, function(){
    me.callStatusListener(CALL_STATUS.ESTABLISHED);
}).on(CALL_STATUS.FINISH, function(){constraints: constraints
    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

Code Block

language	js
theme	RDark

outCall.call();

47. Answering incoming call. line 152

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

...

Code Block

language	js
theme	RDark

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

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

- put on hold: Call сall.hold() - line 193 code

Code Block

language	js
theme	RDark

Phone.prototype.hold = function () {
    trace("Phone - hold callId: " + this.currentCall.id());
    this.currentCall.hold();
};

- retrieve: Call call.unhold() - line 203 code

Code Block

language	js
theme	RDark

Phone.prototype.unhold = function () {
    trace("Phone - hold callId: " + this.currentCall.id());
    this.currentCall.unhold();
};

69. Call hangup. line 182

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

Code Block

language	js
theme	RDark

Phone.prototype.hangup = function () {
    trace("Phone - hangup " + this.currentCall.hangup();

7. Adjusting the volume. line 657

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

Code Block

language	js
theme	RDark

phone.currentCall.setVolume(ui.value);

8. Disconnection. line 75

...

id() + " status " + this.currentCall.status());
    this.hideFlashAccess();
    if (this.currentCall.status() == CALL_STATUS.PENDING) {
        this.callStatusListener(this.currentCall);
    } else {
        this.currentCall.hangup();
    }
    this.flashphonerListener.onHangup();
};

10. Disconnection.

session.disconnect(). code

Code Block

language	js
theme	RDark

Phone.prototype.disconnect = function () {
    trace("Phone - disconnect");
    this.session.disconnect();
};

Space shortcuts

Page tree

Versions Compared

Old Version 2

New Version 3

Key

Example of web phone with dialer GUI

Code of the example

Work with code of the web phone