Example of web phone with dialer GUI

On the screenshot below (from left to right)screenshots below

• parameters for SIP connection are entered in to the login form

Image Added

• callee SIP username is entered

Image Added

• video call is established

Image RemovedImage Added

Video or voice call is placed establishing when corresponding button is clicked and is 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.

...

Analyzing the code

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

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().

code

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.

code

var phone = new Phone();

phone.init();

Besides In addition to the methods required for the calling functionality, it Phone object has listener methods for changing controls of the interface depending on the connection and call status (line 227194 - line 497416).

1. Initialization of the API.

Flashphoner.init()   code

        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.

Flashphoner.createSession()   code

Object with connection options is passed to the method

...

3. Receiving the event confirming successful connection

ConnectionStatusEvent ESTABLISHED ESTABLISHED code

    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){
        me.session = session;
        me.connectionStatusListener(SESSION_STATUS.ESTABLISHED);
    }).on(SESSION_STATUS.REGISTERED, function(session){
        ...
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        ...
    }).on(SESSION_STATUS.FAILED, function(){
        ...
    }).on(SESSION_STATUS.INCOMING_CALL, function(call){
        ...
    });

4. Receiving the event confirming successful registration on SIP server

ConnectionStatusEvent REGISTERED REGISTERED code

    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){
        ...
    }).on(SESSION_STATUS.REGISTERED, function(session){
           ... me.registrationStatusListener(SESSION_STATUS.REGISTERED);
     }).on(SESSION_STATUS.DISCONNECTED, function(){
        ...
    }).on(SESSION_STATUS.FAILED, function(){
        ...
    }).on(SESSION_STATUS.INCOMING_CALL, function(call){
        ...
    });

...

ConnectionStatusEvent INCOMING_CALL CALL code

    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){
        ...
    }).on(SESSION_STATUS.REGISTERED, function(session){
        ...
    }).on(SESSION_STATUS.DISCONNECTED, function(){
        ...
    }).on(SESSION_STATUS.FAILED, function(){
        ...
    }).on(SESSION_STATUS.INCOMING_CALL, function(call){
        call.on(CALL_STATUS.RING, function(){
            ...
        });
        me.onCallListener(call);
    });

6. Outgoing call.

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

The following parameters are passed when call is created

...

7. Answering incoming call.

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

...

Phone.prototype.answer = function () {
    trace("Phone - answer " + this.currentCall.id());
    this.flashphonerListener.onAnswer(this.currentCall.id());
    this.currentCall.answer({
        localVideoDisplay: this.localVideo,
        remoteVideoDisplay: this.remoteVideo
    });
};

8. Call hold.

- put on hold:  сallсall.hold()   code

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

- retrieve:  callcall.unhold()   code

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

9. Call hangup.

сall.hangup()   code

Phone.prototype.hangup = function () {
    trace("Phone - hangup " + this.currentCall.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

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