Web SDK 2.0 - EN
Space shortcuts
Page tree

Versions Compared

Old Version 4

changes.mady.by.user admin

Saved on

compared with

New Version Current

changes.mady.by.user admin

Saved on

Key

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

Table of Contents

Example of web phone for audio calls

Image RemovedImage Added

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 66cc393 ecbadc3, which is available here and and can be downloaded with corresponding build build  2.0.5.28.2753.133.212.

1. Initialization of the API

Flashphoner.init()   code

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

2. Connection to server.

Flashphoner.createSession()   code

Object with connection options is passed to the method

...

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

...

session.createCall(), call.call()   code
The following parameters are passed when call is created

...

7. Answering incoming call.

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

...

8. Outgoing call hangup.

call.hangup()   code

Code Block
languagejs
themeRDark
	$("#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
languagejs
themeRDark
    $("#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
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
languagejs
themeRDark
// Mute audio in the call
function mute() {
	if (currentCall) {
	    currentCall.muteAudio();
	}
}

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