Table of Contents |
---|
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
- callee SIP username is entered
- video call is established
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(). line 20
Code Block | ||||
---|---|---|---|---|
| ||||
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 Block | ||||
---|---|---|---|---|
| ||||
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. line 584API is initialized after loading the page. For Flash support, the path to SWF file is passed to the init() method.
Flashphoner.init() code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init(); |
2. Connection to server.
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 | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'}); |
2. Connection to server. line 44
...
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
callFlashphoner.createSession(connectionOptions).on(CALLSESSION_STATUS.RINGESTABLISHED, function(session){ me..callStatusListener(CALL_STATUS.RING); }).on(CALLSESSION_STATUS.ESTABLISHEDREGISTERED, function(session){ me.callStatusListener(CALL me.registrationStatusListener(SESSION_STATUS.ESTABLISHEDREGISTERED); }).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 | ||||
---|---|---|---|---|
| ||||
}Flashphoner.createSession(connectionOptions).on(CALLSESSION_STATUS.FAILEDESTABLISHED, function(session){ ... me}).callStatusListeneron(CALLSESSION_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.call() code
The following parameters are passed when call is created
...
Code Block | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
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 }); }; |
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 | ||||
---|---|---|---|---|
| ||||
Phone.prototype.hold = function () { trace("Phone - hold callId: " + this.currentCall.id()); this.currentCall.hold(); }; |
- retrieve: Callcall.unhold() - line 203 code
Code Block | ||||
---|---|---|---|---|
| ||||
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 | ||||
---|---|---|---|---|
| ||||
Phone.prototype.hangup = function () { trace("Phone - hangup " + this.currentCall.id() + " status " + this.currentCall.hangupstatus()); |
7. Adjusting the volume. line 657
Method Call.setVolume() is used to adjust the volume.
Code Block | ||||
---|---|---|---|---|
| ||||
phone.currentCall.setVolume(ui.value); |
8. Disconnection. line 75
...
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 | ||||
---|---|---|---|---|
| ||||
Phone.prototype.disconnect = function () { trace("Phone - disconnect"); this.session.disconnect(); }; |