AudioCodes WebRTC Click-To-Call - Deployment Procedure

Adding click to call widget
To an existing web page

September 2020
For SDK Version 1.14 and above.

Click-To-Call widget Highlights
• Easily add a click-to-call button to a web site using few

lines of code
• Does not require web development skills
• Button design and text can be customized
• In the following slides we will describe the steps to add

this widget to any HTML page.
• Please follow the instructions and when done refresh
the HTML page to get the changes.
Click to Call Web Widget
Step 1: File and folders
▪ Unzip the widget zip file to a temporary

directory.
▪ The following folders will be extracted:
▪ 'conf' (Containing configuration file).

▪ 'css' (Containing demo style file).
▪ 'js' (Containing the SDK JS, audio player and widget script code).
▪ 'html' (usage example).
▪ 'docs' (help document).
Step 1: File and folders
▪ Copy the bellow folders to your web server:
▪ 'conf' (Containing configuration file).

▪ 'css' (Containing demo style file).
▪ 'js' (Containing the SDK JS, audio player, and widget script code)
▪ ‘sounds’(Containing sound that played during test call)
▪ The bellow folders may be skipped
▪ 'html' (usage example).

▪ 'docs' (help document).
Step 2: Modify your HTML page
Note:
Add to the HTML HEAD references to js modules The JS file path is
relative and should
be adjusted to the
<html> specific deployment.
<head>
<script src="../js/ac_webrtc.min.js"></script>
<script src="../js/audio_player.js"></script>
<script src="../js/c2c.js"></script>
<script src="../conf/config.js"></script>
</head>
<body>
</body>
</html>
Add to the HTML HEAD link to css file

<html>
<head>
<link rel="stylesheet" href="../css/c2c.css">
</head>
<body>
</body>
</html>
Add to the HTML HEAD link for the browser tab image icon
<html>
<head>
<link rel="stylesheet" href="../css/c2c.css">
<link rel="icon" href="favicon.png">
</head>
<body>
</body>
</html>
Add the widget (C2C_widget) to your html page and add to it 2 buttons:
Test Call button: Note:
<script src="../conf/config.js"></script> Image used here
</head> may be replaced
<body> by customer.
<div id="c2c_widget">
…
<button id="c2c_call_button" title="Click to call us on the phone">
<svg id="c2c_svg_icon" fill="#006DF0" viewBox="0 0 512 512">
<path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6
49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2
378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-
18.6-23.4z"/>
</svg>
<span>Call</span>
</button> Note:
<div id="c2c_message"></div> Span used for
... phone API
</div> messages
</body>
</html>
Add the widget (C2C_widget) to your html page and add to it 2 buttons:
Test Call button: Note:
<body> by customer.
…
<button id="c2c_test_btn" title="Click to test connection quality">
<svg id="c2c_test_svg">
<g fill="none" fill-rule="evenodd">
<path d="M-1-1h24v24H-1z" /> <path d="M21.61 17.99l-9.08-9.08c.93-2.34.45-5.1-1.44-7-2.3-2.3-
5.88-2.51-8.43-.65L6.5 5.11 5.08 6.52 1.25 2.69C-.61 5.23-.4 8.82 1.9 11.11c1.86 1.86 4.57 2.35 6.89
1.48l9.11 9.11c.39.39 1.02.39 1.41 0l2.3-2.3c.4-.38.4-1.01 0-1.41zm-3 1.6l-9.46-9.46c-.61.45-1.29.72-2 .82-
1.36.2-2.79-.21-3.83-1.25C2.37 8.76 1.93 7.5 2 6.26l3.09 3.09 4.24-4.24-3.09-3.09c1.24-.07 2.49.37 3.44
1.31a4.469 4.469 0 011.24 3.96 4.35 4.35 0 01-.88 1.96l9.45 9.45-.88.89z" fill="#1D1D1D" />
</g>
</svg>
<span>Test line</span> Note:
</button> Span used for
<span></span>... phone API
</div> messages
</body>
</html>
Add video controls (will be invisible on auio call configuration)
Note:
<body> by customer.
.
.
.
</div>
<video id="c2c_local_video" style="display: none;" playsinline></video>

<video id="c2c_remote_video" style="display: none;" autoplay playsinline></video>
</body>
</html>
Note:
Span used for
phone API
messages
Add display for connection quality and audio quality
Note:
Image used here
may be replaced
</head>
<body> by customer.
<div id="c2c_quality_info_div">
<span id="c2c_connection_span"></span>
<span id="c2c_quality_span"></span>
</div>
.
.
.
</div>
</body> Note:
</html>
Span used for
phone API
messages
Step 3: Edit the “config.js” file in the “conf” directory
First part (server config) contains the backed servers configuration.
Please edit only the marked in red values keeping the file structure.
▪ Domain: AudioCodes SBC domain name, used to build SIP headers From/To
▪ addresses: AudioCodes SBC secure web socket address. (can be multiple)
▪ iceServers: addresses for STUN servers. (Optional, can be multiple)
▪ iceTransportPolicyRelay: Optional. Should be set always to false unless using only turn server and relay is required.
let c2c_serverConfig = {
domain: 'example.com',
addresses: ['wss://sbc.example.com'],
iceServers: [],
};
Second part (call config) contains the call configuration.
▪ call: Call destination (user or phone number)
▪ caller: Caller user name (One word according SIP RFC 3261).
▪ callerDN: Caller display name (words sequence).
▪ type: Call type possible values: 'audio' or 'video‘ or ‘user_control’
▪ videoCheckboxDefault: For type user_control. Default value of video check box.
▪ videoSize: Window video size (for video call), may be left empty for defaults (default {width: '', height: ‘’})
▪ callAutoStart: ‘no’, ‘yes’, ‘yes force’. Start call automatically after page is loaded.
▪ messageDisplayTime: How long the messages will be displayed (seconds)
▪ restoreCallMaxDelay: time to reload a call after a page refresh (Seconds)
let c2c_config = {
call: 'JohnDoe',
caller: 'Anonymous',
callerDN: 'Anonymous',
type: 'audio',
videoCheckboxDefault: false,
videoSize: {width: ‘480px', height: ‘360px’},
callAutoStart: ‘no’,
messageDisplayTime: 5,
restoreCallMaxDelay: 20,
.
Second part (call config) contains the call configuration.

▪ pingInterval : value (in seconds), defines the interval of sending CRLF for keepalive
▪ pongTimeout : value (true), close and reopen web socket when ping timeout detected
▪ timerThrottlingBestEffort value(true).
▪ keepAliveStats : value (n times), every n amount of pongs print to log min and max delay statistics.
▪ keepAliveDist : value (true / false) either to print to logs the above values.
let c2c_config = {
.
.
pingInteral: 15,
pongTimeout: true,
timerThrottlingBestEffort true,
keepAliveStats: 60,
keepAliveDist: false,
.
.
};
ClicktestCallEnabled:
to Calltrue, testCallUser: '5555', testCallAutoStart: true, testCallVolume: 0.0, testCallMinDuration: 10, testCallMaxDuration: 20,
Web Widget
Third part (call config) contains the test call configuration.
▪ testCallEnabled: If test call enabled (show test call GUI)
▪ testCallSBCScore: use SBC call quality score
▪ testCallUser: Call to this user for test call (It's a special test call user in SBC that auto answer and play sound prompt)
▪ testCallAutoStart: If auto play policy enables it, test call starts automatically after page loading.
▪ testCallUseMicrophone: Instead playing recorded sound, use microphone to test call. May used to bypass auto play policy.
▪ testCallVolume": Set 1.0 to hear (100% volume) or mute(0.0) – Volume of audio prompt received from SBC.
▪ testCallMinDuration": remote-inbound-rtp info statistics is provided only after 5..10 seconds delay (Chrome) or 11..16 seconds (Firefox), Due to that the
min duration indicates the minimum time to wait for this info.
▪ testCallMaxDuration: Call will terminated after max duration in any case even if the info was not received.
▪ testCallQualityText: Mapping SBC quality score color to text messages.
let c2c_config = {
.
testCallEnabled: true,
testCallSBCScore: true,
testCallUser: ‘5555’,
testCallAutoStart: true,
testCallUseMicrophone: false,
testCallVolume: 0.0,
testCallMinDuration: 10,
testCallMaxDuration: 20,
testCallQualityText: {…},
};
Thank You
Stay in the loop

AudioCodes WebRTC Click-To-Call - Deployment Procedure

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AudioCodes WebRTC Click-To-Call - Deployment Procedure

Uploaded by

Copyright:

Available Formats

Adding click to call widget

To an existing web page

For SDK Version 1.14 and above.

• Easily add a click-to-call button to a web site using few

• In the following slides we will describe the steps to add

▪ Unzip the widget zip file to a temporary

▪ 'conf' (Containing configuration file).

▪ Copy the bellow folders to your web server:

▪ 'conf' (Containing configuration file).

▪ The bellow folders may be skipped

▪ 'html' (usage example).

Add to the HTML HEAD link to css file

<video id="c2c_local_video" style="display: none;" playsinline></video>

Second part (call config) contains the call configuration.

Stay in the loop

You might also like