Table of Contents |
---|
Example of web phone for audio calls
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 26fc5afa246baea80867fa011305da811edab1f0 ecbadc3, which is available here and can be downloaded with corresponding build 2.0.5.5212.1894.
1. Initialization of the API
Flashphoner.init() code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'}); |
2. Connection to server.
Flashphoner.createSession() code
Object with connection options is passed to the method
...
Code Block | ||||
---|---|---|---|---|
| ||||
function createSession(authToken) { var url = $('#urlServer').val(); var registerRequired = $("#sipRegisterRequired").is(':checked'); var sipOptions = { login: $("#sipLogin").val(), authenticationName: $("#sipAuthenticationName").val(), password: $("#sipPassword").val(), domain: $("#sipDomain").val(), outboundProxy: $("#sipOutboundProxy").val(), port: $("#sipPort").val(), registerRequired: registerRequired }; if (authToken) { var connectionOptions = { urlServer: url, authToken: authToken, keepAlive: true }; }if else(authToken) { connectionOptions.authToken = {authToken; } urlServer: url,else { connectionOptions.sipOptions = sipOptions: sipOptions, keepAlive: true }; } //create session console.log("Create new session with url " + url); Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session, connection){ ... }); } |
3. Receiving the event confirming successful connection
ConnectionStatusEvent ESTABLISHED codeESTABLISHED code
On this event, the token is stored to connect to the same session in 1 hour
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session, connection){ setStatus("#regStatus", SESSION_STATUS.ESTABLISHED); $("#authToken").val(connection.authToken); onConnected(session); if (!registerRequired) { disableOutgoing(false); } }).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
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session, connection){ ... }).on(SESSION_STATUS.REGISTERED, function(session){ setStatus("#regStatus", SESSION_STATUS.REGISTERED); onConnected(session); if (registerRequired) { disableOutgoing(false); } }).on(SESSION_STATUS.DISCONNECTED, function(){ ... }).on(SESSION_STATUS.FAILED, function(){ ... }).on(SESSION_STATUS.INCOMING_CALL, function(call){ ... }); |
...
ConnectionStatusEvent INCOMING_CALL CALL code
Code Block | ||||
---|---|---|---|---|
| ||||
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session, connection){ ... }).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(){ ... }); onIncomingCall(call); }); |
...
session.createCall(), call.call() code
The following parameters are passed when call is created
...
Code Block | ||||
---|---|---|---|---|
| ||||
var constraints = { audio: true, video: false }; //prepare outgoing call var outCall = session.createCall({ callee: $("#callee").val(), visibleName: $("#sipLogin").val(), localVideoDisplay: localDisplay, remoteVideoDisplay: remoteDisplay, constraints: constraints, receiveAudio: true, receiveVideo: false, stripCodecs:"SILK" ... }); outCall.call() |
7. Answering incoming call.
call.answer() code
Object with answer options is passed to the method
...
Code Block | ||||
---|---|---|---|---|
| ||||
$("#answerBtn").off('click').click(function(){
$(this).prop('disabled', true);
var constraints = {
audio: true,
video: false
};
inCall.answer({
localVideoDisplay: localDisplay,
remoteVideoDisplay: remoteDisplay,
receiveVideo: false,
constraints: constraints,
stripCodecs:"SILK"
});
showAnswered();
}).prop('disabled', false); |
8. Outgoing call hangup.
call.hangup() code
Code Block | ||||
---|---|---|---|---|
| ||||
$("#callBtn").text("Hangup").off('click').click(function(){ $(this).prop('disabled', true); outCall.hangup(); }).prop('disabled', false); |
9. Incoming call hangup.
call.hangup() code
Code Block | ||||
---|---|---|---|---|
| ||||
$("#hangupBtn").off('click').click(function(){ $(this).prop('disabled', true); $("#answerBtn").prop('disabled', true); inCall.hangup(); }).prop('disabled', false); |
10. Call hangup on session disconnection
call.hangup() code
Code Block | ||||
---|---|---|---|---|
| ||||
function onConnected(session) { $("#connectBtn, #connectTokenBtn").text("Disconnect").off('click').click(function(){ $(this).prop('disabled', true); if (currentCall) { showOutgoing(); disableOutgoing(true); setStatus("#callStatus", ""); currentCall.hangup(); } session.disconnect(); }).prop('disabled', false); } |
...
currentCall.muteAudio(), currentCall.unmuteAudio() code
Code Block | ||||
---|---|---|---|---|
| ||||
// Mute audio in the call function mute() { if (currentCall) { currentCall.muteAudio(); } } // Unmute audio in the call function unmute() { if (currentCall) { currentCall.unmuteAudio(); } } |