A call between two browsers made via the SIP server¶
Overview¶
A SIP call between browsers made via WCS is a special case of calls between a browser and a SIP device when the web application in a browser serves as a softphone for both parts of the call.
Supported platforms and browsers¶
Chrome | Firefox | Safari | Edge | |
---|---|---|---|---|
Windows | ✅ | ✅ | ❌ | ✅ |
Mac OS | ✅ | ✅ | ✅ | ✅ |
Android | ✅ | ✅ | ❌ | ✅ |
iOS | ✅ | ✅ | ✅ | ✅ |
Supported protocols¶
- WebRTC
- RTP
- SIP
Supported codecs¶
- H.264
- VP8
- G.711
- Speex
- G.729
- Opus
Supported SIP functions¶
- DTMF
- Holding a call
- Transferring a call
SIP functions are managed using the WebSDK.
Operation flowchart¶
1. SIP server as a proxy server to transfer calls and RTP media¶
- The browser 1 begins a call from the
Caller
account to theCallee
account - WCS connects to the SIP server
- The SIP server transfers the call to the
Callee
to WCS - WCS sends to the browser 2 an event that a call is received
- Browsers exchange audio and video streams
2. SIP server as a server to transfer calls only¶
- The browser 1 begins a call from the
Caller
account to theCallee
account - WCS connects to the SIP server
- The SIP server transfers the call to the
Callee
to WCS - WCS sends to the browser 2 an event that a call is received
- Browsers exchange audio and video streams
3. Without an external SIP server. SIP and RTP media are processed by WCS¶
- The browser 1 begins a call from the
Caller
account to theCallee
account - WCS establishes a SIP connection between accounts
- WCS sends to the browser 2 an event that a call is received
- Browsers exchange audio and video streams
Quick manual on testing¶
- For the test we use:
- two SIP accounts;
-
the Phone web application to make a call
-
Open the Phone web application. Enter the data of the SIP account and click the
Connect
button to establish a connection with the server:
-
Open the Phone web application in a new browser tab. Enter the data of the second SIP account and click the
Connect
button:
-
Enter the identifier of the SIP account receiving the call and click the
Call
button:
-
Answer the call by clicking the
Answer
button:
The call starts:
-
To terminate the call, click the
Hangup
button.
Call flow¶
Below is the call flow when using the Phone example to create a call. The SIP server is used as a proxy server to transfer commands and media.
-
Creating a call using WebSDK
Session.createCall()
,Call.call()
code
-
Sending
SIP INVITE
to the SIP server -
The SIP server sends
SIP INVITE
to WCS because callee is registered on it -
Sending to the second browser an event notifying about the incoming call
CALL_STATUS.RING
code
-
The second browser answers the call
Call.answer()
code
function onIncomingCall(inCall) { currentCall = inCall; showIncoming(inCall.caller()); $("#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 }); showAnswered(); }).prop('disabled', false); ... }
-
Sending a confirmation to the SIP server
-
Receiving a confirmation from the SIP server
-
The first browser receives from the server an event confirming successful call establishing
CALL_STATUS.ESTABLISHED
code
-
The caller and the callee exchange audio and video streams
-
Terminating the call
Call.hangup()
code
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); }
-
Sending
SIP BYE
to the SIP server -
Receiving
SIP BYE
from the SIP server -
Sending to the second browser an event confirming termination of the call
CALL_STATUS.FINISH
code
Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session, connection){ ... }).on(SESSION_STATUS.INCOMING_CALL, function(call){ call.on(CALL_STATUS.RING, function(){ ... }).on(CALL_STATUS.FINISH, function(){ setStatus("#callStatus", CALL_STATUS.FINISH); onHangupIncoming(); currentCall = null; ... }); ... });
-
Sending a confirmation to the SIP server
-
Receiving a confirmation from the SIP server
SIP calls without an external SIP server¶
WCS may establish a SIP call and process its traffic withoun an external SIP server (see the scheme above). To do this, the following parameters must be set in flashphoner.properties file
- For test we use:
-
Phone web application to make a call
-
Open Phone web application page. Enter the following:
- user name
- password
- SIP Domain: set WCS server IP address (not domain name!)
- SIP Outbound Proxy: set WCS server IP address (not domain name!)
- set SIP Port to 0
-
clean
Register requred
checkbox
ClickConnect
-
Open Phone web application page in another browser window. Enter the following:
- second user name
- password
- SIP Domain: set WCS server IP address (not domain name!)
- SIP Outbound Proxy: set WCS server IP address (not domain name!)
- set SIP Port to 0
-
clean
Register requred
checkbox
ClickConnect
-
Enter callee name and click
Call
-
Accept the call by clicking
Answer
-
The call is established