@telegenta/webclient 2.0.12 → 3.0.1

package/README.md

@@ -1,72 +1,79 @@
 # Telegenta client lib
-A browser client library for using Telegenta phone services 
+
+A browser client library for using Telegenta phone services
 
 # Detailed documentation
+
 Please go to: https://www.telegenta.com/docs/index.html
 
 ## Why this library?
-There are many great implementations of WebRTC based SIP clients and most work really well, but we found there are 
-still many things which must handled before you can actually start using them and it just requires a lot of domain 
-specific knowledge and time to get everything working.  
-If you want to provide a good phone service in you application, you will (probably) need to deal with the following issues:  
-  
- 1. Supporting all browsers takes time and needs extensive regular testing because of inconsistencies in browser 
- WebRTC implementations  
- 2. Handling media and devices in the browser requires rarely used knowledge (MediaDevices and WebRTC API)  
- 3. Features like recording, show number, call privacy are provider specific and not standardized, you will need to 
- develop your own support for this  
- 4. It is almost impossible to use WebRTC on "server side" generated frameworks (like PHP), if you click a link and page 
- is reloaded, your call is terminated  
- 5. Browsers support multiple tabs and you risk having multiple calls at the same time, you need to handle this scenario  
- 6. The SIP account credentials can be viewed by everybody, using browser developer console (F12) making them susceptible
- to abuse and fraud  
- 7. Unless all your agents uses the same credentials (pretty bad security practise), you'll need to handle and 
- maintain individual accounts, which can take a lot of your time  
- 8. Make sure you don't accidentally close the window, click a link or reload the page during active calls  
- 
-As you start developing, you will probably find more issues (these are just the most common). They all require 
-your time and developer resources, making the case less and less attractive.  
-
-Using this library and api service you will have at least one solution to all these challenges, providing you a quick 
-way to get up and running.  
-We also provide a simple embedded html client, which you can use as a "starting point", just include it in your project 
+
+There are many great implementations of WebRTC based SIP clients and most work really well, but we found there are
+still many things which must handled before you can actually start using them and it just requires a lot of domain
+specific knowledge and time to get everything working.
+If you want to provide a good phone service in you application, you will (probably) need to deal with the following issues:
+
+1.  Supporting all browsers takes time and needs extensive regular testing because of inconsistencies in browser
+    WebRTC implementations
+2.  Handling media and devices in the browser requires rarely used knowledge (MediaDevices and WebRTC API)
+3.  Features like recording, show number, call privacy are provider specific and not standardized, you will need to
+    develop your own support for this
+4.  It is almost impossible to use WebRTC on "server side" generated frameworks (like PHP), if you click a link and page
+    is reloaded, your call is terminated
+5.  Browsers support multiple tabs and you risk having multiple calls at the same time, you need to handle this scenario
+6.  The SIP account credentials can be viewed by everybody, using browser developer console (F12) making them susceptible
+    to abuse and fraud
+7.  Unless all your agents uses the same credentials (pretty bad security practise), you'll need to handle and
+    maintain individual accounts, which can take a lot of your time
+8.  Make sure you don't accidentally close the window, click a link or reload the page during active calls
+
+As you start developing, you will probably find more issues (these are just the most common). They all require
+your time and developer resources, making the case less and less attractive.
+
+Using this library and api service you will have at least one solution to all these challenges, providing you a quick
+way to get up and running.
+We also provide a simple embedded html client, which you can use as a "starting point", just include it in your project
 and you are ready to go. The client has no external requirements (like jQuery and Bootstrap) - only our client library of cause.
 
 ## Getting started
-Before starting, you will need an account on telegenta.com, to create sip accounts and api tokens.  
+
+Before starting, you will need an account on telegenta.com, to create sip accounts and api tokens.
 
 #### Example 1: Simple phone with static account
-In this example we will use a normal SIP User account, as it does not require you to use our API service.  
+
+In this example we will use a normal SIP User account, as it does not require you to use our API service.
 
 Log into the administration frontend (https://admin.telegenta.com) and create a "SIP User account", this will provide
-you with credentials (username and password). Once you have these open the embedded html client provided with this 
+you with credentials (username and password). Once you have these open the embedded html client provided with this
 library /embedded_client/index.html and modify the credentials:
 
 ```
 // SIP account username and password
-var USERNAME='your username';   
+var USERNAME='your username';
 var PASSWORD='your password';
 
 window.onload = function () {
-...      
+...
 ```
 
-Now open the file (index.html) in your browser. After you have been prompted for permission to use the audio devices, 
-you should have a working phone.  
-Note: If you are viewing a file using "file://index.html", it is not considered a secure connection by the browser 
-and media permissions are not remembered, so you will be prompted every time you open the file.    
-However, once you move the file to a secure webserver (https), this will no longer be an issue.  
+Now open the file (index.html) in your browser. After you have been prompted for permission to use the audio devices,
+you should have a working phone.
+Note: If you are viewing a file using "file://index.html", it is not considered a secure connection by the browser
+and media permissions are not remembered, so you will be prompted every time you open the file.
+However, once you move the file to a secure webserver (https), this will no longer be an issue.
 
 #### Example 2: Using SIP Flex accounts
-When using SIP flex accounts, you need to use our API service to retrieve account information first.  
-This approach solves the authentication problem and provides you with short-lived sip accounts used in client sessions. 
-For this example we need a backend service and we provide a simple example in PHP using the built in Webserver.  
+
+When using SIP flex accounts, you need to use our API service to retrieve account information first.
+This approach solves the authentication problem and provides you with short-lived sip accounts used in client sessions.
+For this example we need a backend service and we provide a simple example in PHP using the built in Webserver.
 
 First go to the admin interface and create following 2 items:
-1. SIP Flex account with "flex account identification" set to 'test'  
-2. A static api token (https://admin.telegenta.com/integration/access-tokens).  
 
-Now open the file /embedded_client/server.html and insert the API token at the top of the file:  
+1. SIP Flex account with "flex account identification" set to 'test'
+2. A static api token (https://admin.telegenta.com/integration/access-tokens).
+
+Now open the file /embedded_client/server.html and insert the API token at the top of the file:
 
 ```
 // Your API Token
@@ -78,7 +85,8 @@ $flex_identification = 'test';
 ...
 ```
 
-Once you have added the token, you can start the php Webserver (requires php v5.4+) like this: 
+Once you have added the token, you can start the php Webserver (requires php v5.4+) like this:
+
 ```
 cd embedded_client
 php -S localhost:9000
@@ -86,60 +94,73 @@ php -S localhost:9000
 
 Now open the URL http://localhost:9000/server.php and you should see the phone and be able to perform calls.
 Note: If you use any other host than localhost, you won't be able to call because the built in php webserver does not
-support secure (https) connections and this is required by the browser to use WebRTC. If needed, you can tunnel to  
+support secure (https) connections and this is required by the browser to use WebRTC. If needed, you can tunnel to
 localhost using your ssh client for testing.
 
-## Approaching the integration ##
-Every application is different, so it can be hard to come up with one solution that fits all.  
+## Approaching the integration
+
+Every application is different, so it can be hard to come up with one solution that fits all.
 Depending on how much flexibility you need, you can choose between the following options:
 
- 1. Use an existing WebRTC client like JsSIP, SipML, SipJs, etc..  
- We believe in using standard protocols as much as possible and it will work nicely, but you need to address most 
- of the issues we listed above in the previous section yourself.
-
- 2. Use our free library (lib/telegenta.min.js) and provide your own frontend  
- This way you just need to handle events and use javascript methods like call, hangup, startRecord, etc..  
-
- 3. Use our complete embedded phone client with frontend.  
- We have made a simple phone with frontend, which can be easily included in your own project. Just grab the 
- index.html, style.css and embedded_phone.js and insert it into your own project.  
- We named the JS and CSS to try and avoid any potential conflicts.  
- You only need to provide it with credentials or provisioning token (as in the example above) from you backend and 
- you are set to start calling.
- 
-## Migrating from 1.7.x ##
+1.  Use an existing WebRTC client like JsSIP, SipML, SipJs, etc..
+    We believe in using standard protocols as much as possible and it will work nicely, but you need to address most
+    of the issues we listed above in the previous section yourself.
+
+2.  Use our free library (lib/telegenta.min.js) and provide your own frontend
+    This way you just need to handle events and use javascript methods like call, hangup, startRecord, etc..
+
+3.  Use our complete embedded phone client with frontend.
+    We have made a simple phone with frontend, which can be easily included in your own project. Just grab the
+    index.html, style.css and embedded_phone.js and insert it into your own project.
+    We named the JS and CSS to try and avoid any potential conflicts.
+    You only need to provide it with credentials or provisioning token (as in the example above) from you backend and
+    you are set to start calling.
+
+## Migrating from 2.x
+
+If you are migrating from 2.x, there are only few non breaking code changes.
+
+-   We no longer support ES5 and CommonJS going forward we will only support ES6 and ESM modules.
+-   The utility library @Telegenta/common have been deprecated is now merged into phone client package.
+
+## Migrating from 1.7.x
+
 If you are migrating from 1.7.x release into 2.x, some code breaking changes needs to be handled.
 
-* Library now supports multiple sessions, which means call now returns session object instead of uuid and incoming call event will contain new session as well. 
-If you still need the call uuid, the session object has a UUID property 
-* Many sessions specific methods like hangup(), startRecording(), sendDTMF(), etc. have been moved to the session object
+-   Library now supports multiple sessions, which means call now returns session object instead of uuid and incoming call event will contain new session as well.
+    If you still need the call uuid, the session object has a UUID property
+-   Many sessions specific methods like hangup(), startRecording(), sendDTMF(), etc. have been moved to the session object
 
-* calldataAvailable event no longer exists and has been split into two new separate events:
-  - session.callEnded    : local event containing simple call information
-  - phone.callDataInfo   : Remote server event containing detailed call information (billing info and recording url).
+-   calldataAvailable event no longer exists and has been split into two new separate events:
 
-* Incoming calls will now create a new session, which must be handled by 'incomingCall' event
+    -   session.callEnded : local event containing simple call information
+    -   phone.callDataInfo : Remote server event containing detailed call information (billing info and recording url).
 
-* Audio device selection hs been remove from 2.x release (will be added later)
-  audioInputDeviceList(), audioOutputDeviceList(), setAudioInputDevice(), setAudioOutputDevice(), supportsDeviceSelection() has been removed
+-   Incoming calls will now create a new session, which must be handled by 'incomingCall' event
 
-* New methods to handle sessions have been added, to facilitate switching between calls and transferring them
-  - hold()   : Hold call
-  - unHold() : Unhold call
-  - transfer(<session>) : Transfer call from one session to another (assisted transfer)
+-   Audio device selection hs been remove from 2.x release (will be added later)
+    audioInputDeviceList(), audioOutputDeviceList(), setAudioInputDevice(), setAudioOutputDevice(), supportsDeviceSelection() has been removed
 
-* RemoteAudioElement no longer needed, will be created automatically
+-   New methods to handle sessions have been added, to facilitate switching between calls and transferring them
 
-* Session IDLE state removed and autoIdleTime is replaced with autoRemoveSessionTime
+    -   hold() : Hold call
+    -   unHold() : Unhold call
+    -   transfer(<session>) : Transfer call from one session to another (assisted transfer)
 
-* Remember to update "@telegenta/common" npm
+-   RemoteAudioElement no longer needed, will be created automatically
 
-* Phone state "RINGING" changed named to "INCOMING" because it was ambiguous with outgoing calls
+-   Session IDLE state removed and autoIdleTime is replaced with autoRemoveSessionTime
+
+-   Remember to update "@telegenta/common" npm
+
+-   Phone state "RINGING" changed named to "INCOMING" because it was ambiguous with outgoing calls
+
+-   Added option to play ringing tone on incoming calls (playRingOnIncoming)
 
-* Added option to play ringing tone on incoming calls (playRingOnIncoming)
-    
 #### Acknowledgements
+
 This library uses the JsSIP library (www.jssip.net) created by José Luis Milàn, Iñaki Baz Castillo and Saúl Ibarra Corretgé
 
 #### License
-This software is provided for free together with our service
+
+This software is provided for free together with our service

package/demos/add_phone_number.html

@@ -15,7 +15,7 @@
 
     <!-- STEP 1 -->
     <div class="groupelements">
-        <H3>STEP 1: Add your phone number</H3>
+        <h3>STEP 1: Add your phone number</h3>
         <div class="inputelements">
             <label for="api_key">API Key / OAuth2 token</label>
             <input type="text" size="40" id="api_key" placeholder="Enter API Key" value="">
@@ -25,7 +25,7 @@
 
     <!-- STEP 2 -->
     <div class="groupelements">
-        <H3>STEP 2: Add phone number</H3>
+        <h3>STEP 2: Add phone number</h3>
         <div class="inputelements">
             <label for="country_selector">Phone number country</label>
             <select id="country_selector">
@@ -40,17 +40,18 @@
 
     <!-- STEP 3-->
     <div class="groupelements">
-        <H3>STEP 3: Verify your number (verification call)</H3>
+        <h3>STEP 3: Verify your number (verification call)</h3>
         <div class="inputelements">
             Activation pin code: <span id="pin_code">----</span>
             <p>
             <button onclick="verifyNumber()">Start verification process now</button>
+            </p>
         </div>
     </div>
 
     <!-- STEP 4 -->
     <div class="groupelements">
-        <H3>STEP 4: Check verification status</H3>
+        <h3>STEP 4: Check verification status</h3>
         <div class="inputelements">
             State: <span id="state"></span><br>
             Attempts used: <span id="attempts"></span><br>
@@ -61,7 +62,7 @@
 
     <!-- STEP 5 -->
     <div class="groupelements">
-        <H3>STEP 5: Remove number (cleanup)</H3>
+        <h3>STEP 5: Remove number (cleanup)</h3>
         <div class="inputelements">
             <button onclick="deleteNumber()">Delete number</button><br>
             <small>If you forget to delete number, you can do it manually using the admin interface</small>
@@ -131,7 +132,7 @@
         }
         // Optional START
         // Use event client to listen for verification status
-        // logger = new Telegenta.Logger.LogHandler(Telegenta.Logger.LOGLVL.INFO);
+        // logger = new Telegenta.LogHandler(Telegenta.LOGLVL.INFO);
         // eventClient = new Telegenta.EventClient(logger);
         // Optional END
 
@@ -205,4 +206,4 @@
     }
 </script>
 
-</html>
+</html>

package/demos/calldata_available.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Telegenta Event Calldata Available Demo</title>
-    <script src="telegenta.min.js"></script>
+    <script src="../dist/telegenta.min.js"></script>
     <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 
@@ -15,7 +15,7 @@
 <h2>Telegenta Event Client Demo</h2>
 
 <div class="groupelements">
-    <H3>Input call token</H3>
+    <h3>Input call token</h3>
     <div class="inputelements">
         <label for="call_token">Call token</label>
         <input type="text" size="40" id="call_token" placeholder="Enter Call Token" value="">
@@ -25,7 +25,7 @@
 </div>
 
 <div class="groupelements">
-    <H3>Calldata available event info</H3>
+    <h3>Calldata available event info</h3>
     <textarea id="event_info" cols="180" rows="24">
 </textarea>
 </div>
@@ -41,7 +41,7 @@
     // Start when DOM is ready
     window.onload = function () {
         // Create event client instance
-        logger = new Telegenta.Logger.LogHandler(Telegenta.Logger.LOGLVL.DEBUG);
+        logger = new Telegenta.LogHandler(Telegenta.LOGLVL.DEBUG);
         eventClient = new Telegenta.EventClient(logger);
 
         // Connect to event server
@@ -88,4 +88,4 @@
 
 </script>
 
-</html>
+</html>

package/demos/embedded_config.html

@@ -13,7 +13,7 @@
 
 <h2>Telegenta Event Client Demo</h2>
 <div class="groupelements">
-    <H3>Input API Key</H3>
+    <h3>Input API Key</h3>
     <div class="inputelements">
         <label for="api_key">API Key</label>
         <input type="text" size="40" id="api_key" placeholder="Enter API Key" value="">
@@ -91,5 +91,5 @@
     }
 
 </script>
-
-</html>
+</body>
+</html>