@telegenta/webclient 3.1.1 → 3.1.2

package/README.md

@@ -39,63 +39,49 @@ and you are ready to go. The client has no external requirements (like jQuery an
 
 Before starting, you will need an account on telegenta.com, to create sip accounts and api tokens.
 
-#### Example 1: Simple phone with static account
+Runnable examples live in `demos/`. They load the browser bundle from `../dist/telegenta.min.js`, so
+run `npm run build` first, then serve the directory over https. WebRTC requires a secure context;
+`localhost` counts as secure, but opening a demo as `file://...` does not - media permissions are not
+remembered there, so you will be prompted for the microphone every time.
 
-In this example we will use a normal SIP User account, as it does not require you to use our API service.
+#### Example: phone with a provisioning token
 
-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
-library /embedded_client/index.html and modify the credentials:
+`demos/phone_client.html` is a complete softphone - start/stop, outbound calls, transfer, listen-in,
+incoming calls and the event client.
 
-```
-// SIP account username and password
-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.
-
-#### Example 2: Using SIP Flex accounts
+First create a static API token in the admin interface
+(https://admin.telegenta.com/integration/access-tokens). Open the demo and paste the token in; it then
 
-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.
+1. requests a short-lived provisioning token with `GET /api/get-call-session/?id=<account id>`, and
+2. starts the phone with that token:
 
-First go to the admin interface and create following 2 items:
+```
+const opts = {
+    // Enable event client
+    connectEventService: true,
 
-1. SIP Flex account with "flex account identification" set to 'test'
-2. A static api token (https://admin.telegenta.com/integration/access-tokens).
+    // Subscribe to detailed information about call after processing
+    useCallDataInfoEvent: true,
 
-Now open the file /embedded_client/server.html and insert the API token at the top of the file:
+    // Enable incoming calls (you must set a phone number to call the account also)
+    register: true,
 
-```
-// Your API Token
-$api_auth_token = '<your api token>';
+    // Configure client with provision token
+    provisionToken: data.provision_token,
+};
 
-// The flex account identification (this is set when configuring your flex accounts)
-// It possible to have multiple sip flex accounts with different configurations
-$flex_identification = 'test';
-...
+phoneClient.start(opts);
 ```
 
-Once you have added the token, you can start the php Webserver (requires php v5.4+) like this:
+Issuing the provisioning token from your own backend is the recommended integration: the short-lived
+token is all that reaches the browser, and your API token stays on the server.
 
-```
-cd embedded_client
-php -S localhost:9000
-```
+The remaining demos cover narrower cases:
 
-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
-localhost using your ssh client for testing.
+- `demos/event_client.html` - the event client on its own, without a phone
+- `demos/calldata_available.html` - subscribing to call data after a call completes
+- `demos/add_phone_number.html` - adding a phone number through the API
+- `demos/embedded_config.html` - embedding the admin config pages with a config token
 
 ## Approaching the integration
 
@@ -106,15 +92,10 @@ Depending on how much flexibility you need, you can choose between the following
     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.
+2.  Use our free library and provide your own frontend.
+    Load `dist/telegenta.min.js` in the browser (global `Telegenta`) or import the package in your
+    bundler, then handle events and use javascript methods like call, hangup, startRecord, etc..
+    `demos/phone_client.html` shows the whole flow end to end.
 
 ## Migrating from 2.x
 

package/dist/telegenta.js

@@ -25,23 +25,23 @@ class LogHandler {
     }
 
     debug(...args) {
-        this._doLog(LOGLVL$1.DEBUG, args);
+        this._doLog(LOGLVL.DEBUG, args);
     }
 
     info(...args) {
-        this._doLog(LOGLVL$1.INFO, args);
+        this._doLog(LOGLVL.INFO, args);
     }
 
     warn(...args) {
-        this._doLog(LOGLVL$1.WARN, args);
+        this._doLog(LOGLVL.WARN, args);
     }
 
     warning(...args) {
-        this._doLog(LOGLVL$1.WARN, args);
+        this._doLog(LOGLVL.WARN, args);
     }
 
     error(...args) {
-        this._doLog(LOGLVL$1.ERROR, args);
+        this._doLog(LOGLVL.ERROR, args);
     }
 
     _doLog(level, args) {
@@ -60,19 +60,19 @@ class LogHandler {
             this.extHandler(LOGLVLSTR[level], args);
         } else {
             switch (level) {
-                case LOGLVL$1.DEBUG:
+                case LOGLVL.DEBUG:
                     console.debug(args);
                     break;
 
-                case LOGLVL$1.INFO:
+                case LOGLVL.INFO:
                     console.info(args);
                     break;
 
-                case LOGLVL$1.WARN:
+                case LOGLVL.WARN:
                     console.warn(args);
                     break;
 
-                case LOGLVL$1.ERROR:
+                case LOGLVL.ERROR:
                     console.error(args);
                     break;
 
@@ -91,7 +91,7 @@ class LogHandler {
  * @property {number} INFO 2 Informational messages (default)
  * @property {number} DEBUG 3 Debug messages
  */
-const LOGLVL$1 = {
+const LOGLVL = {
     DEBUG: 3,
     INFO: 2,
     WARN: 1,
@@ -386,7 +386,7 @@ class Request {
 class Requestor extends EventEmitter {
     constructor(logger = null) {
         super();
-        this.log = logger ? logger : new LogHandler(LOGLVL$1.INFO);
+        this.log = logger ? logger : new LogHandler(LOGLVL.INFO);
         this._pendingRequests = [];
     }
 
@@ -401,13 +401,13 @@ class Requestor extends EventEmitter {
         let msg;
         try {
             msg = JSON.parse(message);
-        } catch (err) {
+        } catch {
             this.log.warning("Unable to parse message: " + message);
             return;
         }
 
         // Validate msg fields
-        if (!msg.hasOwnProperty("type") || !msg.hasOwnProperty("id")) {
+        if (!Object.hasOwn(msg, "type") || !Object.hasOwn(msg, "id")) {
             this.log.warning(`Invalid message received: ${msg} - missing type or id`);
             return;
         }
@@ -658,7 +658,7 @@ class EventClient {
             throw new InvalidParameter('You must specify both event spec and callback function');
         }
 
-        if (!eventSpecification.hasOwnProperty('event_name')) {
+        if (!Object.hasOwn(eventSpecification, 'event_name')) {
             throw new InvalidParameter('Your event specification must contain event name');
         }
 
@@ -1663,10 +1663,10 @@ class Phone extends EventEmitter {
         this._oscillator2 = null;
 
         // Set default logger
-        this.log = logger ? logger : new LogHandler(LOGLVL$1.INFO);
+        this.log = logger ? logger : new LogHandler(LOGLVL.INFO);
 
         // Handle jssip debug logs
-        if (this.log.level === LOGLVL$1.DEBUG) {
+        if (this.log.level === LOGLVL.DEBUG) {
             JsSIP.debug.disable('JsSIP:*');
         } else {
             JsSIP.debug.disable('JsSIP:*');
@@ -1741,10 +1741,10 @@ class Phone extends EventEmitter {
 
         // Unpack provisioning token if specified
         if (this._options.provisionToken) {
-            let pt = null;
+            let pt;
             try {
                 pt = JSON.parse(atob(this._options.provisionToken));
-            } catch (err) {
+            } catch {
                 throw new InvalidOptions('provisionToken', 'Invalid token');
             }
 
@@ -1820,7 +1820,7 @@ class Phone extends EventEmitter {
             );
         }
 
-        let wsSocket = null;
+        let wsSocket;
         try {
             wsSocket = new JsSIP.WebSocketInterface(this._options.wssServer);
         } catch (err) {
@@ -1932,7 +1932,7 @@ class Phone extends EventEmitter {
         try {
             this._eventClient.disconnect();
             delete this._eventClient;
-        } catch (e) {
+        } catch {
             this.log.warning('Unable to disconnect event client');
         }
 
@@ -2023,7 +2023,7 @@ class Phone extends EventEmitter {
      */
     getSessionByUUID(uuid) {
         for (let key in this._activeSessions) {
-            if (this._activeSessions.hasOwnProperty(key)) {
+            if (Object.hasOwn(this._activeSessions, key)) {
                 if (this._activeSessions[key].uuid === uuid) {
                     return this._activeSessions[key];
                 }
@@ -2048,7 +2048,7 @@ class Phone extends EventEmitter {
     get sessions() {
         let s = [];
         for (let key in this._activeSessions) {
-            if (this._activeSessions.hasOwnProperty(key)) {
+            if (Object.hasOwn(this._activeSessions, key)) {
                 s.push(this._activeSessions[key]);
             }
         }
@@ -2213,7 +2213,7 @@ class Phone extends EventEmitter {
 
         // Iterate through all active calls and hold them
         for (let key in this._activeSessions) {
-            if (this._activeSessions.hasOwnProperty(key)) {
+            if (Object.hasOwn(this._activeSessions, key)) {
                 let session = this._activeSessions[key];
                 if (session.state === 'ACTIVE') {
                     session.hold();
@@ -2287,7 +2287,7 @@ class Phone extends EventEmitter {
     // Return true if there are calls currently connecting
     _checkForConnectingCalls() {
         for (let key in this._activeSessions) {
-            if (this._activeSessions.hasOwnProperty(key)) {
+            if (Object.hasOwn(this._activeSessions, key)) {
                 let session = this._activeSessions[key];
                 if (
                     session.state === 'INITIALIZING' ||
@@ -2671,7 +2671,7 @@ class Session extends EventEmitter {
                         self.log.info(`Answer call timeout after ${self._answerCallTimeout} seconds`);
                         try {
                             self.hangup();
-                        } catch (e) {
+                        } catch {
                             self.log.info('No active session, ignoring answer call timeout');
                         }
                     }, self._answerCallTimeout * 1000);
@@ -3742,4 +3742,4 @@ class Session extends EventEmitter {
     }
 }
 
-export { EventClient, EventServiceNotConnected, InvalidMediaDevice, InvalidOptions, InvalidParameter, LOGLVL$1 as LOGLVL, LogHandler, MediaNotPrepared, NoActiveSession, NotAllowed, NotReady, Phone, Request, Requestor, Session, UnableToConnect, browserIsChrome, browserIsEdge, browserIsFirefox, browserIsOpera, browserIsSafari, buildCustomHeaders, compareObjects, createDurationString, createUUID };
+export { EventClient, EventServiceNotConnected, InvalidMediaDevice, InvalidOptions, InvalidParameter, LOGLVL, LogHandler, MediaNotPrepared, NoActiveSession, NotAllowed, NotReady, Phone, Request, Requestor, Session, UnableToConnect, browserIsChrome, browserIsEdge, browserIsFirefox, browserIsOpera, browserIsSafari, buildCustomHeaders, compareObjects, createDurationString, createUUID };