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:
/usr/local/FlashphonerWebCallServer/client/examples/demo/sip/click-to-call
click-to-call.html - page of the example
click-to-call.js - script providing functionality for the example
This example can be tested using the following address:
https://host:8888/client/examples/demo/sip/click-to-call/click-to-call.html
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
Flashphoner.init() code
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'});
2. Connection to server.
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.
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.ESTABLISHED, function(session){ ... });
3. Receiving the event confirming successful connection
ConnectionStatusEvent ESTABLISHED code
On this event, outgoing call is created
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){ setStatus("Session", SESSION_STATUS.ESTABLISHED); //session connected, place call call(session); }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.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
receiveAudio - set to true to receive audio
receiveVideo - set to false to receive audio only
var constraints = { audio: true, video: false }; //prepare outgoing call var outCall = session.createCall({ callee: $("#callee").val(), visibleName: "Click To Call", localVideoDisplay: localDisplay, remoteVideoDisplay: remoteDisplay, constraints: constraints, receiveAudio: true, receiveVideo: false ... }); outCall.call();
5. Call hangup
call.hangup() code
$("#callBtn").text("Hangup").removeClass("btn-success").addClass("btn-danger").off('click').click(function(){ $(this).prop('disabled', true); outCall.hangup(); }).prop('disabled', false);