Click to Call example
This example allows to place outgoing audio call with one button click using account specified in server config file
/usr/local/FlashphonerWebCallServer/conf/apps/click-to-call/accounts.xml
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 example
To analyze the code, let's take the version of file click-to-call.js with hash 26fc5afa246baea80867fa011305da811edab1f0, which is available here and can be downloaded with corresponding build 0.5.5.1894.
1. Initialization of the API. line 11API is initialized after loading the page. For Flash support, the path to SWF file is passed to the
Flashphoner.init() method. code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'}); |
2. Connection to server. line 41Connection to server is established when Call button is clicked
createSession() code
Object with connection options is passed to the method when session is created
- urlServer - URL for WebSocket connection to WCS server
- appKey - internal server-side application 'clickToCallApp'
Parameters for SIP connection are taken from config accounts.xml.
Code Block | ||||
---|---|---|---|---|
| ||||
var url = $('#urlServer').val(); var appKey = "clickToCallApp"; var connectionOptions = { urlServer: url, appKey: appKey }; //create session console.log("Create new session with url " + url); Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.REGISTEREDESTABLISHED, function(session){ setStatus("Session", SESSION_STATUS.REGISTERED); //session connected, place call ... }); |
3. Receiving the event confirming successful connection
ConnectionStatusEvent ESTABLISHED code
On this event, outgoing call is created
Code Block | ||||
---|---|---|---|---|
| ||||
call(session); }Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.DISCONNECTEDESTABLISHED, function(session){ setStatus("Session", SESSION_STATUS.DISCONNECTEDESTABLISHED); //session connected, place call onHangup call(session); }).on(SESSION_STATUS.FAILEDDISCONNECTED, function(){ setStatus("Session", SESSION_STATUS.FAILED); ... onHangup(); }); |
...
.on(SESSION_STATUS. |
...
Object with connection options is passed to the method when session is created
- urlServer - URL for WebSocket connection to WCS server
- appKey - internal server-side application 'clickToCallApp'
Parameters for SIP connection are taken from config accounts.xml.
3. Outgoing call. line 62
...
FAILED, function(){
...
}); |
4. Outgoing call.
session.createCall(), call() code
The following parameters are passed when call is created
- callee - callee SIP username
- visibleName - display name
- localVideoDisplay - <div> element for local display (will be used for Flash Player settings dialog in case of Flash media provider)
- remoteVideoDisplay - <div> element for remote audio
- constraints - constraints for the call (in this case 'video' is set to 'false' to call with audio only - line 56)
receiveAudio - set to true to receive audio
receiveVideo - set to false to receive audio only
Code Block | ||||
---|---|---|---|---|
| ||||
var constraints = { audio: true, video: false }; |
- receiveAudio - set to 'true' to receive audio
- receiveVideo - set to 'false' to receive audio only
Code Block | ||||
---|---|---|---|---|
| ||||
}; //prepare outgoing call var outCall = session.createCall({ callee: $("#callee").val(), visibleName: "Click To Call", localVideoDisplay: localDisplay, remoteVideoDisplay: remoteDisplay, constraints: constraints, receiveAudio: true, receiveVideo: false }).on(CALL_STATUS.RING, function(){ setStatus("Call", CALL_STATUS.RING ... }); }).on(CALL_STATUS.ESTABLISHED, function(){ setStatus("Call", CALL_STATUS.ESTABLISHED); }).on(CALL_STATUS.FINISH, outCall.call(); |
5. Call hangup
call.hangup() code
Code Block | ||||
---|---|---|---|---|
| ||||
$("#callBtn").text("Hangup").removeClass("btn-success").addClass("btn-danger").off('click').click(function(){ setStatus("Call", CALL_STATUS.FINISH $(this).prop('disabled', true); onHangupoutCall.hangup(); }); |
When call is created, callback functions for events CALL_STATUS.RING, CALL_STATUS.ESTABLISHED, CALL_STATUS.FINISH are added to make appropriate changes in controls of the interface.
Outgoing call is placed with method call(). line 79
Code Block | ||||
---|---|---|---|---|
| ||||
outCall.call(); |
4. Call hangup. line 83
Method hangup() is used to hang up call.
Code Block | ||||
---|---|---|---|---|
| ||||
outCall.hangup(.prop('disabled', false); |