Installation and Configuration Guide

AudioCodes WebRTC Solutions For Enterprises

WebRTC Click-to-Call Widget

Version 1.0

Version 1.0 3 WebRTC

WebRTC Widget Contents

Table of Contents 1 Introduction ......................................................................................................... 7

1.1 WebRTC Benefits .................................................................................................... 7 1.2 About this Guide ....................................................................................................... 7

2 Installation ........................................................................................................... 9

3 Configuration ..................................................................................................... 11

Version 1.0 5 WebRTC

WebRTC Widget Notices

Notice Information contained in this document is believed to be accurate and reliable at the time of printing. However, due to ongoing product improvements and revisions, AudioCodes cannot guarantee accuracy of printed material after the Date Published nor can it accept responsibility for errors or omissions. Updates to this document can be downloaded from https://www.audiocodes.com/library/technical-documents.

This document is subject to change without notice.

Date Published: Jan-29-2018

WEEE EU Directive Pursuant to the WEEE EU Directive, electronic and electrical waste must not be disposed of with unsorted waste. Please contact your local recycling authority for disposal of this product.

Customer Support Customer technical support and services are provided by AudioCodes or by an authorized AudioCodes Service Partner. For more information on how to buy technical support for AudioCodes products and for contact information, please visit our Web site https://www.audiocodes.com/services-support/maintenance-and-support.

Abbreviations and Terminology Each abbreviation, unless widely used, is spelled out in full when first used.

WebRTC Widget 6 Document #: LTRT-14030

Installation and Configuration Guide

Related Documentation

Document Name

https://www.audiocodes.com/solutions-products/solutions/enterprise-voice/webrtc-connectivity

Document Revision Record

LTRT Description

14030 Initial document release for Version 1.0

Documentation Feedback AudioCodes continually strives to produce high quality documentation. If you have any comments (suggestions or errors) regarding this document, please fill out the Documentation Feedback form on our Web site at https://online.audiocodes.com/documentation-feedback.

Version 1.0 7 WebRTC

WebRTC Widget 1. Introduction

1 Introduction WebRTC technology enriches user experience by adding voice, video and data communication to the browser, as well as to mobile applications. AudioCodes WebRTC gateway provides seamless connectivity between WebRTC clients and existing VoIP deployments. A typical WebRTC solution comprises a WebRTC gateway, which is an integrated functionality on AudioCodes' SBCs, and a client application running on a browser or a mobile app. AudioCodes' WebRTC Widget can easily be integrated into websites and blogs without any JavaScript knowhow. The Widget creates a click-to-call button on your web site. It works with AudioCodes' SBC and can make calls to any user registered in the SBC.

1.1 WebRTC Benefits Here's a summary of the WebRTC benefits: Simple deployment - a single WebRTC gateway device for both signaling and media Strong security and interoperability capabilities resulting from integration with SBC Client SDK for browsers. OPUS powered IP phones for superb, transcoder-less voice quality Optional recording of WebRTC calls

1.2 About this Guide This guide shows how to install and configure the WebRTC Widget.

WebRTC Widget 8 Document #: LTRT-14030

Installation and Configuration Guide

This page is intentionally left blank.

Version 1.0 9 WebRTC

WebRTC Widget 2. Installation

2 Installation You need to install the Widget.

To install the Widget:

1. Unzip the attached webrtc-clicktocall-widget.zip to a folder. Save the folder to root from where the company page will call the click-to-call widget.

2. Include the js and css files on your HTML page (you can use your own jquery if you already have one):

<link rel="stylesheet" href="webrtc-clicktocall-widget/css/c2c.css"> <script src=webrtc-clicktocall-widget/js/jquery-1.10.2.js"></script> <script src="webrtc-clicktocall-widget/jconf/config.js"></script> <script src="webrtc-clicktocall-widget/js/webrtc-c2c-widget.js"></script>

3. Add the HTML code to your HTML page, edit the button text and tooltip to suit your preferences. • The button caption and title are defined in file /conf/config.js. • There is an option to change the button ID per /conf/config.js file:

btnID: "btn-c2c-id". <button id=”btn-c2c-id” class=”btn-c2c "></button> <video id="local_video" style="display: none;"></video> <video id="remote_video" autoplay style="display: none;"></video>

4. You can add a css class to the button to suit your site design requirements.

WebRTC Widget 10 Document #: LTRT-14030

Installation and Configuration Guide

This page is intentionally left blank.

Version 1.0 11 WebRTC

WebRTC Widget 3. Configuration

3 Configuration You need to configure the Widget.

To configure the Widget:

Open the conf/config.js file and update its properties. BLUE values must be updated (mandatory); the other values are optional.

let DefaultServerConfig = { domain: 'DOMAINNAME.com', addresses: ['wss://SBC_IP_ADDRESS'], iceServers: ['74.125.140.127:19302', '74.125.143.127:19302'] } let DefaultAccount = { user: 'THE CALLER NAME', displayName: 'THE CALLER DISPLAY NAME', callTo: 'CALL TO SIP URI' }

Use this table as reference.

Parameter Description

Domain The SIP domain name.

Address The SBC IP address

User The caller's user name.

DisplayName The caller's display name.

CallTo The SIP URI to call to.

Optional configuration values:

let DefaultPhoneConfig = { hideLocalVideo: true, // when open remote video hide local video. videoSize: 'Small', // one of Default,Tiny,XSmall,Small,Medium,Large,X Large,Huge enableTimer: true,//show or display the call time duration on the button enableRing: true, // play or not outgoing call ring btnID: "btn-c2c-id", // the button ID in HTML page btnNormalStateClassName: "btn-normal-state", // button default state class name. Click: make call, event is handling per this class name. Can be changed to an existing class name. btnCallingStateClassName: "btn-calling-state",// button calling state class name. Click: terminate call, event is handling per this class name. Can be changed to an existing class name. btnInCallStateClassName: "btn-call-established-state",// button call established state class name.

WebRTC Widget 12 Document #: LTRT-14030

Installation and Configuration Guide

Click: terminate call, event is handling per this class name. Can be changed to an existing class name. btnNormalStateCaption: "Call Us Now!", // button default state caption. btnNormalStateTitle: "Call Audiocodes Now!", // button default state title. btnCallingStateCaption: "Hangup",// button calling state caption. btnCallingStateTitle: "Calling to Audiocodes",// button calling state title. btnInCallStateCaption: "Hangup", // button call established state caption. btnInCallStateTitle: "Call established",// button call established state title. timerSpanClassName: "call-timer", //call duration element class name. Html element shows the call duration on the button. Can be changed in duplicated name case. showErrorAlert: false //if the method: guiStatus(msg, level) is not implemented, this option show the browser alert error message (if value is true only).

}

To get status messages from the SBC, implement this method:

guiStatus(msg, level); Arguments: msg – API message. level – Message level: “error”, “warning”, “info”.

Version 1.0 13 WebRTC

WebRTC Widget 3. Configuration

This page is intentionally left blank.

`

International Headquarters 1 Hayarden Street, Airport City Lod 7019900, Israel Tel: +972-3-976-4000 Fax: +972-3-976-4040 AudioCodes Inc. 27 World’s Fair Drive, Somerset, NJ 08873 Tel: +1-732-469-0880 Fax: +1-732-469-2298 Contact us: https://www.audiocodes.com/corporate/offices-worldwide Website: https://www.audiocodes.com/ ©2018 AudioCodes Ltd. All rights reserved. AudioCodes, AC, HD VoIP, HD VoIP Sounds Better, IPmedia, Mediant, MediaPack, What’s Inside Matters, OSN, SmartTAP, User Management Pack, VMAS, VoIPerfect, VoIPerfectHD, Your Gateway To VoIP, 3GX, VocaNom, AudioCodes One Voice and CloudBond are trademarks or registered trademarks of AudioCodes Limited. All other products or trademarks are property of their respective owners. Product specifications are subject to change without notice.

Document #: LTRT-14030