Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

Work with code of the web phone

To analyze the code, let's take the version of file phone.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 24API is initialized after loading the page. For Flash support, the path to SWF file is passed to the

Flashphoner.init() method. code

Code Block
languagejs
themeRDark
Flashphoner.init({flashMediaProviderSwfLocation: '../../../../media-provider.swf'});

2. Connection to server. line 62Connection to server is established when Connect button is clicked..

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
languagejs
themeRDark
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session){
    setStatus("#regStatus", SESSION_STATUS.ESTABLISHED);
    onConnected(session);
    if (!registerRequired) {
        disableOutgoing(false);
    }
})    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) {
        connectionOptions = {
            urlServer: url,
            authToken: authToken,
            keepAlive: true
        };
    } else {
        connectionOptions = {
            urlServer: url,
            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 code

Code Block
languagejs
themeRDark
    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.REGISTEREDESTABLISHED, function(session, connection){
        setStatus("#regStatus", SESSION_STATUS.REGISTEREDESTABLISHED);
        onConnected(session$("#authToken").val(connection.authToken);
        onConnected(session);
		if (!registerRequired) {
            disableOutgoing(false);
		}
    }
}).on(SESSION_STATUS.DISCONNECTEDREGISTERED, function(session){
    setStatus("#regStatus",     ...
    }).on(SESSION_STATUS.DISCONNECTED, function();{
        onDisconnected();
...
    }).on(SESSION_STATUS.FAILED, function(){
       setStatus("#regStatus", SESSION_STATUS.FAILED); ...
    onDisconnected();
}).on(SESSION_STATUS.INCOMING_CALL, function(call){ 
     call   ...
    });

4. Receiving the event confirming successful registration on SIP server

ConnectionStatusEvent REGISTERED code

Code Block
languagejs
themeRDark
    Flashphoner.createSession(connectionOptions).on(CALLSESSION_STATUS.RINGESTABLISHED, function(session, connection){
        setStatus("#callStatus", CALL_STATUS.RING);...
    }).on(CALLSESSION_STATUS.ESTABLISHEDREGISTERED, function(session){
        setStatus("#callStatus#regStatus", CALLSESSION_STATUS.ESTABLISHED);
REGISTERED);
        onConnected(session);
        if (registerRequired) {
            enableMuteToggledisableOutgoing(truefalse);
		}
    }).on(CALLSESSION_STATUS.FINISHDISCONNECTED, function(){
        ...
    setStatus("#callStatus", CALL}).on(SESSION_STATUS.FINISH);FAILED, function(){
        onHangupIncoming();...
    }).on(SESSION_STATUS.INCOMING_CALL, function(call){ 
  currentCall = null;
    });...
    onIncomingCall(call);
});

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

5. Receiving the event on incoming call

ConnectionStatusEvent INCOMING_CALL code

Code Block
languagejs
themeRDark
    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);
    });

6. Outgoing call. line 104

New call is created with method 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 video set to false to make audio only call)
  • receiveAudio - set to 'true' to receive audio
  • receiveVideo - set to 'false' to call with receive audio only - line 98)
Code Block
languagejs
themeRDark
    var constraints = {
        audio: true,
        video: false
};
  • receiveAudio - set to 'true' to receive audio
  • receiveVideo - set to 'false' to receive audio only
Code Block
languagejs
themeRDark
    };
	
	//prepare outgoing call 
    var outCall = session.createCall({
    		callee: $("#callee").val(),
              visibleName: $("#sipLogin").val(),
        		localVideoDisplay: localDisplay,
		 remoteVideoDisplay: remoteDisplay,
	 	constraints: constraints,
		 receiveAudio: true,
        receiveVideo: false
        ...
    }).on(CALL_STATUS.RING, function(){
;
	
	outCall.call()

7. Answering incoming call.

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

  • localVideoDisplay - <div> element for local display
  • remoteVideoDisplay - <div> element for remote audio
Code Block
languagejs
themeRDark
    setStatus$("#callStatus", CALL_STATUS.RING);
}).on(CALL_STATUS.ESTABLISHED, function()#answerBtn").off('click').click(function(){
		$(this).prop('disabled', true);
        var constraints = {
    setStatus("#callStatus", CALL_STATUS.ESTABLISHED);
    enableMuteToggle(true);
}).on(CALL_STATUS.FINISH,         audio: true,
            video: false
        };
		inCall.answer({
            localVideoDisplay: localDisplay,
            remoteVideoDisplay: remoteDisplay,
            receiveVideo: false,
            constraints: constraints
        });
		showAnswered();
    }).prop('disabled', false);

8. Outgoing call hangup.

call.hangup() code

Code Block
languagejs
themeRDark
	$("#callBtn").text("Hangup").off('click').click(function(){
    setStatus("#callStatus", CALL_STATUS.FINISH    $(this).prop('disabled', true);
	    onHangupOutgoingoutCall.hangup();
    currentCall = null;
}}).prop('disabled', false);

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 1239. Incoming call hangup.

call.hangup() code

Code Block
languagejs
themeRDark
outCall.call();

4. Answering incoming call. line 176

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

...

    $("#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
languagejs
themeRDark
inCall.answer(function onConnected(session) {
    $("#connectBtn, #connectTokenBtn").text("Disconnect").off('click').click(function(){
    localVideoDisplay: localDisplay,
    remoteVideoDisplay: remoteDisplay
});

5. Call hangup.

Method hangup() is used to hang up call

  • hang up outgoing call: outCall.hangup(); line 128
  • hang up incoming call: inCall.hangup(); line 186
  • hang up current call when session is disconnected: currentCall.hangup(); line 139

6. Mute/unmute. line 276, line 283

The following methods are used to mute/unmute audio

...

$(this).prop('disabled', true);
		if (currentCall) {
			showOutgoing();
			disableOutgoing(true);
			setStatus("#callStatus", "");
			currentCall.hangup();
		}
        session.disconnect();
    }).prop('disabled', false);
}

11. Mute/unmute audio

currentCall.muteAudio(), currentCall.unmuteAudio() code

Code Block
languagejs
themeRDark
// Mute audio in the call
function mute() {
	if (currentCall) {
	    currentCall.muteAudio();
	}
}

// Unmute audio in the call
function unmute() {
	if (currentCall) {
        currentCall.unmuteAudio();
	}
}