npm - @telegenta/webclient - Versions diffs - 2.0.11 → 3.0.0 - Mend

@telegenta/webclient 2.0.11 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/README.md +102 -81
package/demos/add_phone_number.html +8 -7
package/demos/calldata_available.html +5 -5
package/demos/embedded_config.html +95 -95
package/demos/event_client.html +226 -226
package/demos/phone_client.html +564 -558
package/dist/telegenta.js +3627 -0
package/dist/telegenta.min.js +1 -0
package/docs/EventClient.html +3 -1093
package/docs/InvalidMediaDevice.html +3 -0
package/docs/InvalidOptions.html +3 -0
package/docs/InvalidParameter.html +3 -0
package/docs/LogHandler.html +7 -0
package/docs/MediaNotPrepared.html +3 -0
package/docs/NoActiveSession.html +3 -0
package/docs/NotAllowed.html +3 -0
package/docs/NotReady.html +3 -0
package/docs/Phone.html +4 -2837
package/docs/Request.html +3 -0
package/docs/Requestor.html +3 -0
package/docs/Session.html +3 -2599
package/docs/UnableToConnect.html +3 -0
package/docs/data/search.json +1 -0
package/docs/event-client.js.html +346 -0
package/docs/exceptions.js.html +94 -0
package/docs/fonts/Inconsolata-Regular.ttf +0 -0
package/docs/fonts/OpenSans-Regular.ttf +0 -0
package/docs/fonts/WorkSans-Bold.ttf +0 -0
package/docs/global.html +5 -4950
package/docs/index.html +3 -66
package/docs/logger.js.html +106 -0
package/docs/phone-client.js.html +2155 -0
package/docs/requestor.js.html +223 -0
package/docs/scripts/core.js +726 -0
package/docs/scripts/core.min.js +23 -0
package/docs/scripts/resize.js +90 -0
package/docs/scripts/search.js +265 -0
package/docs/scripts/search.min.js +6 -0
package/docs/scripts/{prettify → third-party}/Apache-License-2.0.txt +202 -202
package/docs/scripts/third-party/fuse.js +9 -0
package/docs/scripts/third-party/hljs-line-num-original.js +369 -0
package/docs/scripts/third-party/hljs-line-num.js +1 -0
package/docs/scripts/third-party/hljs-original.js +5171 -0
package/docs/scripts/third-party/hljs.js +1 -0
package/docs/scripts/third-party/popper.js +5 -0
package/docs/scripts/third-party/tippy.js +1 -0
package/docs/scripts/third-party/tocbot.js +672 -0
package/docs/scripts/third-party/tocbot.min.js +1 -0
package/docs/styles/clean-jsdoc-theme-base.css +1159 -0
package/docs/styles/clean-jsdoc-theme-dark.css +412 -0
package/docs/styles/clean-jsdoc-theme-light.css +482 -0
package/docs/styles/clean-jsdoc-theme-scrollbar.css +30 -0
package/docs/styles/clean-jsdoc-theme-without-scrollbar.min.css +1 -0
package/docs/styles/clean-jsdoc-theme.min.css +1 -0
package/package.json +46 -34
package/babel.config.js +0 -16
package/browser/telegenta.min.js +0 -1
package/docs/fonts/OpenSans-Bold-webfont.eot +0 -0
package/docs/fonts/OpenSans-Bold-webfont.svg +0 -1830
package/docs/fonts/OpenSans-Bold-webfont.woff +0 -0
package/docs/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-BoldItalic-webfont.svg +0 -1830
package/docs/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Italic-webfont.eot +0 -0
package/docs/fonts/OpenSans-Italic-webfont.svg +0 -1830
package/docs/fonts/OpenSans-Italic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Light-webfont.eot +0 -0
package/docs/fonts/OpenSans-Light-webfont.svg +0 -1831
package/docs/fonts/OpenSans-Light-webfont.woff +0 -0
package/docs/fonts/OpenSans-LightItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-LightItalic-webfont.svg +0 -1835
package/docs/fonts/OpenSans-LightItalic-webfont.woff +0 -0
package/docs/fonts/OpenSans-Regular-webfont.eot +0 -0
package/docs/fonts/OpenSans-Regular-webfont.svg +0 -1831
package/docs/fonts/OpenSans-Regular-webfont.woff +0 -0
package/docs/fonts/OpenSans-Semibold-webfont.eot +0 -0
package/docs/fonts/OpenSans-Semibold-webfont.svg +0 -1830
package/docs/fonts/OpenSans-Semibold-webfont.ttf +0 -0
package/docs/fonts/OpenSans-Semibold-webfont.woff +0 -0
package/docs/fonts/OpenSans-SemiboldItalic-webfont.eot +0 -0
package/docs/fonts/OpenSans-SemiboldItalic-webfont.svg +0 -1830
package/docs/fonts/OpenSans-SemiboldItalic-webfont.ttf +0 -0
package/docs/fonts/OpenSans-SemiboldItalic-webfont.woff +0 -0
package/docs/scripts/linenumber.js +0 -25
package/docs/scripts/prettify/lang-css.js +0 -2
package/docs/scripts/prettify/prettify.js +0 -28
package/docs/styles/jsdoc-default.css +0 -692
package/docs/styles/prettify-jsdoc.css +0 -111
package/docs/styles/prettify-tomorrow.css +0 -132
package/embedded_client/embedded_phone.js +0 -325
package/embedded_client/index.html +0 -201
package/embedded_client/server.php +0 -28
package/embedded_client/styles.css +0 -310
package/embedded_client/tiny_rest_client.php +0 -73
package/embedded_client/webphone_sprites.png +0 -0
package/es5/event-client.js +0 -322
package/es5/index.js +0 -44
package/es5/phone-client.js +0 -1739
package/src/event-client.js +0 -1
package/src/index.js +0 -10
package/src/phone-client.js +0 -1
package/webpack.config.js +0 -39

package/demos/phone_client.html CHANGED Viewed

@@ -1,558 +1,564 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Telegenta Phone client Demo</title>
-    <script src="telegenta.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="styles.css">
-</head>
-<body>
-<!-- Logo -->
-<div class="groupelementsnoline" id="Telegenta"></div>
-<!-- Logo end -->
-<div>
-    <div class="groupelementsnoline">
-        <h2>Telegenta Phone Client Demo</h2>
-    </div>
-    <div class="groupelements">
-        <H3>STEP 1: Get account list</H3>
-        <div class="inputelements">
-            <label for="api_key">API Key</label>
-            <input type="text" size="40" id="api_key" placeholder="Enter API Key"
-                   value="">
-            <button onclick="populateSelectElements()">Get sip accounts</button>
-        </div>
-    </div>
-    <div class="groupelements">
-        <H3>STEP 2: Start phone</H3>
-        <div class="inputelements">
-            <label for="account_selector">SIP Accounts</label><span class="smallright"><small>Connection: <span
-                id="conn_status">DISCONNECTED</span></small></span>
-            <select id="account_selector">
-                <option value="" disabled selected>Waiting for SIP accounts</option>
-            </select>
-            <button onclick="startPhoneClient()">Start phone and use selected account</button>
-            <button onclick="stopPhoneClient()">Stop the phone client</button>
-        </div>
-    </div>
-    <div class="groupelements">
-        <H3>STEP 3: Add a new call</H3>
-        <div class="inputelements">
-            <label for="destination_number">Number to call</label><span class="smallright"><small>Status: <span
-                id="call_status">IDLE</span>
-                &nbsp;| Duration: <span id="call_duration">-</span></small></span>
-            <input type="text" size="40" id="destination_number" placeholder="Enter phone number" value="">
-            <button onclick="makeCall()">Call number now</button>
-        </div>
-    </div>
-    <div class="groupelements">
-        <H3>Transfer call</H3>
-        <div class="inputelements">
-            <h3 id="transfer_from"></h3>
-            <label for="transfer_selector">Select call: </label>
-            <select id="transfer_selector">
-                <option value="" disabled selected>No call to transfer</option>
-            </select>
-            <button onclick="doCallTransfer()">Transfer call</button>
-        </div>
-    </div>
-    <div class="groupelements">
-        <H3>Listen call</H3>
-        <div class="inputelements">
-            <h3>Listen to another call</h3>
-            <label for="listen_key">Call listen key</label>
-            <input type="text" size="40" id="listen_key" placeholder="Enter call listen key" value="">
-            <button onclick="doListen()">Listen now</button>
-        </div>
-    </div>
-    <div class="groupelements">
-        <H3>Playback</H3>
-        <div class="inputelements">
-            <label for="media_file_selector">Media files</label>
-            <select id="media_file_selector">
-                <option value="" disabled selected>Select media file</option>
-            </select>
-        </div>
-    </div>
-    <div class="groupelementsnoline">
-        <H3>Active calls</H3>
-        <table id="session_table">
-            <tr>
-                <th>Direction</th>
-                <th>Destination number</th>
-                <th>State</th>
-                <th>Duration</th>
-                <th>Quality metrics</th>
-                <th>Mic muted</th>
-                <th>Recording</th>
-                <th>On hold</th>
-                <th>Actions</th>
-            </tr>
-        </table>
-    </div>
-    <div class="groupelementsnoline">
-        <small>Tip: Press F12 (developer console) to get additional information</small>
-    </div>
-</div>
-</body>
-<!-- Javascript stuff -->
-<script>
-    const API_URL = 'https://api.telegenta.com/api';
-    let phoneClient = null;
-    let logger;
-    let transferSession;
-    // Start when DOM is ready
-    window.onload = function () {
-        // Create phone instance first
-        logger = new Telegenta.Logger.LogHandler(Telegenta.Logger.LOGLVL.DEBUG);
-        phoneClient = new Telegenta.Phone(logger);
-        // Check browser is supported first
-        if (!phoneClient.browserSupported) {
-            console.error('Your browser is not supported');
-        }
-    };
-    /*
-     * STEP 1: Get a list of sip accounts from API server and populate select box with these accounts
-     */
-    function populateSelectElements() {
-        // SIP Accounts
-        jsonApiGetRequest('/sip-trunks/').then(function (data) {
-            console.info(`Fetched ${data.results.length} sip accounts:`);
-            console.debug(data);
-            // Now reset and populate select box with accounts
-            document.getElementById('account_selector').innerHTML = '';
-            for (const account of data.results) {
-                document.getElementById('account_selector').appendChild(new Option(account.name, account.id));
-            }
-        }, function (reason) {
-            console.error(`Request failed ${reason}`);
-        });
-        // Media files
-        jsonApiGetRequest('/media-files/').then(function (data) {
-            console.info(`Fetched ${data.results.length} media files:`);
-            console.debug(data);
-            // Now reset and populate select box with accounts
-            document.getElementById('media_file_selector').innerHTML = '';
-            for (const mfile of data.results) {
-                document.getElementById('media_file_selector').appendChild(new Option(mfile.name, mfile.id));
-            }
-        }, function (reason) {
-            console.error(`Request failed ${reason}`);
-        });
-    }
-    /*
-     * STEP 2: Get a new call_token from API and start phone client with account chosen in select box
-     */
-    function startPhoneClient() {
-        const accountId = document.getElementById('account_selector').value;
-        console.info(`Starting phone client with account id ${accountId}`);
-        // Create call session and get provision token
-        jsonApiGetRequest(`/get-call-session/?id=${accountId}`).then(function (data) {
-            console.info('Fetched a new call session');
-            console.debug(data);
-            // Now prepare media and get access to microphone
-            phoneClient.prepareMedia().then(function () {
-                // Media was prepared, now hook up events to display whats going on
-                // Connection state shows the client connection to the phone services
-                phoneClient.on('connectionStateChange', function (event) {
-                    console.info(`Phone connection is now: ${event.state}`);
-                    document.getElementById('conn_status').innerHTML = event.state;
-                });
-                // Get local information about call after it has ended
-                phoneClient.on('callEnded', function (data) {
-                    console.info('Call ended event:');
-                    console.info(data);
-                });
-                // Get remote information about call after it has ended
-                phoneClient.on('callDataInfo', function (data) {
-                    console.info('Call data info event:');
-                    console.info(data);
-                });
-                // New session created
-                phoneClient.on('sessionCreated', function (data) {
-                    newSession(data.session);
-                });
-                // Session removed
-                phoneClient.on('sessionRemoved', function (data) {
-                    console.log(data);
-                    removeSession(data.session);
-                });
-                // Show incoming call
-                phoneClient.on('incomingCall', function (data) {
-                    console.log(`Incoming call from ${data.originatingNumber}`);
-                });
-                // Now start phone with the following options
-                const opts = {
-                    // Enable event client
-                    connectEventService: true,
-                    // Subscribe to detailed information about call after processing
-                    useCallDataInfoEvent: true,
-                    // Enable incoming calls (you must set a phone number to call the account also)
-                    register: true,
-                    // Configure client with provision token
-                    provisionToken: data.provision_token,
-                    // Enable signal tones (busy, invalid, etc)
-                    playSignalTones: true,
-                    // Enable call initialized tone
-                    playCallInitializedTone: true
-                };
-                try {
-                    phoneClient.start(opts);
-                    console.info('Media prepared and phone started');
-                } catch (e) {
-                    console.error('Unable to start phone');
-                    console.error(e);
-                }
-            }, function (reason) {
-                console.error('Unable to get media permission: ' + reason);
-            });
-        }, function (reason) {
-            console.error(`Request failed ${reason}`);
-        });
-    }
-    // Stop phone client
-    function stopPhoneClient() {
-        phoneClient.stop();
-    }
-    /*
-     * STEP 3: Make a test call
-     */
-    function makeCall() {
-        const destination_number = document.getElementById('destination_number').value;
-        phoneClient.call(destination_number, {
-            // Change this to number of days to keep recording (enables recording)
-            record: 0,
-            // Change this maximum amount in customer currency the call must cost before hanging up (0 = no checking)
-            maximumCallCost: 0,
-            // Include this to force a specific caller id (use id of phone number from api service)
-            // explicitCallerId: 35,
-            // Include this to force a specific smart cid (use id of shot-cid from api service)
-            // explicitShortCallerId: 1,
-            // Configure answer call timeout
-            answerCallTimeout: 0,
-            // Add meta info to call
-            metaInfo: 'You can add up to 256 bytes of meta info for your call (including json like {"type": "json"})'
-        });
-    }
-    // Set the source of call transfer and populate transfer destination selector
-    function setTransferSession(session) {
-        transferSession = session;
-        var otherSessions = session.getOtherSessions();
-        if (otherSessions.length < 1) {
-            document.getElementById('transfer_from').innerHTML = 'Requires two active sessions to perform transfer!';
-            return;
-        }
-        // Show source call destination number
-        document.getElementById('transfer_from').innerHTML = session.destinationNumber + ' => ';
-        // Add all other sessions to transfer selector
-        document.getElementById('transfer_selector').innerHTML = '';
-        for (const tSession of otherSessions) {
-            document.getElementById('transfer_selector').appendChild(new Option(tSession.destinationNumber, tSession.uuid));
-        }
-    }
-    // Transfer call from "transferSession" to item in transfer_selector
-    function doCallTransfer() {
-        if (!transferSession) {
-            console.error('No session selected');
-            return;
-        }
-        // Use session uuid from selectbox and get session object
-        const dstSession = phoneClient.getSessionByUUID(document.getElementById('transfer_selector').value);
-        // Now do transfer
-        transferSession.transfer(dstSession);
-    }
-    // Create listen session
-    function doListen() {
-        phoneClient.listen(document.getElementById('listen_key').value);
-    }
-    // Playback message
-    function playback(session) {
-        const hangup_after = false;
-        session.playback(document.getElementById('media_file_selector').value, hangup_after).then(() => {
-            console.info('Playback started');
-        })
-    }
-    /*
-     * Helper functions
-     */
-    // Create new session
-    // Add table row for session using session_<uuid> as element id,
-    // (We do this so we can find and remove row when session ends)
-    function newSession(session) {
-        const rowId = `session_${session.uuid}`;
-        // Create row in table for session
-        const table = document.getElementById("session_table");
-        const newRow = table.insertRow();
-        newRow.id = rowId;
-        for (let i = 0; i < table.rows[0].cells.length; i++)
-            newRow.insertCell();
-        // Set cells
-        newRow.cells[0].innerText = session.direction;
-        // Show name of local number called for inbound
-        if (session.localNumberName) {
-            newRow.cells[1].innerText = session.destinationNumber + ' (' + session.localNumberName + ')';
-        } else {
-            newRow.cells[1].innerText = session.destinationNumber;
-        }
-        // Hookup events
-        // Session state show the current calling state
-        session.on('sessionStateChange', function (event) {
-            console.info(`Phone session is now: ${event.state}`);
-            newRow.cells[2].innerHTML = event.state;
-            // Add failure cause
-            if (event.state === 'FAILED') {
-                newRow.cells[2].innerHTML = newRow.cells[2].innerHTML + ` (${event.cause})`;
-            }
-            updateButtons(newRow.cells[8], session);
-        });
-        // Get record state events
-        newRow.cells[6].innerHTML = session.isRecording;
-        session.on('recordingStateChange', function (data) {
-            console.info(`Recording state changed to ${data.state}`);
-            newRow.cells[6].innerHTML = data.state;
-        });
-        // Get mute state events
-        newRow.cells[5].innerHTML = session.isMuted;
-        session.on('muteStateChange', function (data) {
-            console.info(`Microphone mute state changed to ${data.state}`);
-            newRow.cells[5].innerHTML = data.state;
-        });
-        // Get hold state events
-        newRow.cells[7].innerHTML = session.isOnHold;
-        session.on('holdStateChange', function (data) {
-            console.info(`Call hold state changed to ${data.state}`);
-            newRow.cells[7].innerHTML = data.state;
-        });
-        // Get call duration update events
-        session.on('callDurationUpdate', function (data) {
-            newRow.cells[3].innerHTML = `${data.durationStr} (${data.activeDurationStr})`;
-        });
-        // Get call duration update events
-        session.on('callQualityReportUpdate', function (data) {
-            console.info('Call quality report:');
-            console.info(data);
-            newRow.cells[4].innerHTML = `${data.delta.effectiveLatency.toFixed(1)} ms (${data.delta.rFactor.toFixed(1)} R)`;
-        });
-        // Get local information about call after it has ended
-        session.on('callEnded', function (data) {
-            console.info('Call ended event:');
-            console.debug(data);
-        });
-        session.on('whisperModeChange', function (data) {
-            console.info('Whisper mode: ' + data.mode);
-        });
-    }
-    // Remove table row for session
-    function removeSession(session) {
-        const row = document.getElementById(`session_${session.uuid}`);
-        if (row) {
-            row.parentNode.removeChild(row);
-        }
-    }
-    // Add buttons based on session state on element (the table row)
-    function updateButtons(element, session) {
-        // Remove all buttons first
-        let e = element.firstElementChild;
-        while (e) {
-            e.remove();
-            e = element.firstElementChild;
-        }
-        // Put session on TD element, so buttons can use it
-        element._session = session;
-        // NON TERMINATED/INCOMING/FAILED BUTTONS
-        if (session.state !== 'TERMINATED' && session.state !== 'INCOMING' && session.state !== 'FAILED') {
-            const btn = document.createElement("BUTTON");
-            btn.innerHTML = 'Hangup';
-            btn.onclick = function () {
-                this.parentNode._session.hangup();
-            };
-            element.appendChild(btn)
-        }
-        if (session.direction === 'OUTBOUND' || session.direction === 'INBOUND') {
-            // ACTIVE CALL BUTTONS
-            if (session.state === 'ACTIVE' || session.state === 'ON_HOLD') {
-                const btn = document.createElement("BUTTON");
-                btn.innerHTML = 'Play tone';
-                btn.onclick = function () {
-                    phoneClient.playTone(1000, 440, 880, function () {
-                        console.info('Play tone complete!')
-                    });
-                };
-                element.appendChild(btn);
-                const btn2 = document.createElement("BUTTON");
-                btn2.innerHTML = 'Send DTMF 1';
-                btn2.onclick = function () {
-                    this.parentNode._session.sendDTMF(1);
-                };
-                element.appendChild(btn2);
-                const btn3 = document.createElement("BUTTON");
-                btn3.innerHTML = 'Toggle mute mic';
-                btn3.onclick = function () {
-                    this.parentNode._session.toggleMute();
-                };
-                element.appendChild(btn3);
-                const btn4 = document.createElement("BUTTON");
-                btn4.innerHTML = 'Toggle recording';
-                btn4.onclick = function () {
-                    this.parentNode._session.toggleRecording();
-                };
-                element.appendChild(btn4);
-                const btn5 = document.createElement("BUTTON");
-                btn5.innerHTML = 'Toggle hold';
-                btn5.onclick = function () {
-                    this.parentNode._session.toggleHold();
-                };
-                element.appendChild(btn5);
-                const btn6 = document.createElement("BUTTON");
-                btn6.innerHTML = 'Transfer';
-                btn6.onclick = function () {
-                    setTransferSession(this.parentNode._session);
-                };
-                element.appendChild(btn6);
-                const btn7 = document.createElement("BUTTON");
-                btn7.innerHTML = 'Playback';
-                btn7.onclick = function () {
-                    playback(this.parentNode._session);
-                };
-                element.appendChild(btn7);
-            }
-            // INCOMING BUTTONS
-            if (session.state === 'INCOMING') {
-                const btn = document.createElement("BUTTON");
-                btn.innerHTML = 'Answer';
-                btn.onclick = function () {
-                    this.parentNode._session.answer(metaInfo = 'When answering calls you can add meta info as well');
-                };
-                element.appendChild(btn);
-                const btn2 = document.createElement("BUTTON");
-                btn2.innerHTML = 'Reject';
-                btn2.onclick = function () {
-                    this.parentNode._session.reject();
-                };
-                element.appendChild(btn2);
-            }
-        }
-        // LISTEN BUTTONS
-        if (session.direction === 'LISTEN' && session.state === 'ACTIVE') {
-            const btn = document.createElement("BUTTON");
-            btn.innerHTML = 'Start whisper';
-            btn.onclick = function () {
-                this.parentNode._session.setWhisperMode(1);
-            };
-            element.appendChild(btn);
-            const btn2 = document.createElement("BUTTON");
-            btn2.innerHTML = 'End whisper';
-            btn2.onclick = function () {
-                this.parentNode._session.setWhisperMode(0);
-            };
-            element.appendChild(btn2);
-        }
-    }
-    // Perform authenticated ajax request to api server and return json payload on success
-    function jsonApiGetRequest(path) {
-        const xhr = new XMLHttpRequest();
-        const url = API_URL + path;
-        xhr.open('GET', url, true);
-        xhr.responseType = 'json';
-        const apiToken = document.getElementById('api_key').value;
-        xhr.setRequestHeader('Authorization', 'Bearer ' + apiToken);
-        xhr.setRequestHeader('Accept', 'application/json');
-        return new Promise(function (resolve, reject) {
-            xhr.onreadystatechange = function () {
-                if (xhr.readyState === 4) {
-                    if (xhr.status !== 200) {
-                        reject(xhr.status + ' ' + xhr.statusText);
-                        return;
-                    }
-                    resolve(xhr.response);
-                }
-            };
-            console.debug(`API Request: ${url}`);
-            xhr.send();
-        })
-    }
-</script>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<meta name="keywords" content="telegenta, phone client, webrtc, demo">
+<meta name="description" content="Telegenta Phone client demo application using telegenta client library">
+<head>
+    <meta charset="UTF-8">
+    <title>Telegenta Phone client Demo</title>
+    <script src="../dist/telegenta.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+<!-- Logo -->
+<div class="groupelementsnoline" id="Telegenta"></div>
+<!-- Logo end -->
+<div>
+    <div class="groupelementsnoline">
+        <h2>Telegenta Phone Client Demo</h2>
+    </div>
+    <div class="groupelements">
+        <h3>STEP 1: Get account list</h3>
+        <div class="inputelements">
+            <label for="api_key">API Key</label>
+            <input type="text" size="40" id="api_key" placeholder="Enter API Key"
+                   value="">
+            <button onclick="populateSelectElements()">Get sip accounts</button>
+        </div>
+    </div>
+    <div class="groupelements">
+        <h3>STEP 2: Start phone</h3>
+        <div class="inputelements">
+            <label for="account_selector">SIP Accounts</label><span class="smallright"><small>Connection: <span
+                id="conn_status">DISCONNECTED</span></small></span>
+            <select id="account_selector">
+                <option value="" disabled selected>Waiting for SIP accounts</option>
+            </select>
+            <button onclick="startPhoneClient()">Start phone and use selected account</button>
+            <button onclick="stopPhoneClient()">Stop the phone client</button>
+        </div>
+    </div>
+    <div class="groupelements">
+        <h3>STEP 3: Add a new call</h3>
+        <div class="inputelements">
+            <label for="destination_number">Number to call</label><span class="smallright"><small>Status: <span
+                id="call_status">IDLE</span>
+                &nbsp;| Duration: <span id="call_duration">-</span></small></span>
+            <input type="text" size="40" id="destination_number" placeholder="Enter phone number" value="">
+            <button onclick="makeCall()">Call number now</button>
+        </div>
+    </div>
+    <div class="groupelements">
+        <h3>Transfer call</h3>
+        <div class="inputelements">
+            <h3 id="transfer_from"></h3>
+            <label for="transfer_selector">Select call: </label>
+            <select id="transfer_selector">
+                <option value="" disabled selected>No call to transfer</option>
+            </select>
+            <button onclick="doCallTransfer()">Transfer call</button>
+        </div>
+    </div>
+    <div class="groupelements">
+        <h3>Listen call</h3>
+        <div class="inputelements">
+            <h3>Listen to another call</h3>
+            <label for="listen_key">Call listen key</label>
+            <input type="text" size="40" id="listen_key" placeholder="Enter call listen key" value="">
+            <button onclick="doListen()">Listen now</button>
+        </div>
+    </div>
+    <div class="groupelements">
+        <h3>Playback</h3>
+        <div class="inputelements">
+            <label for="media_file_selector">Media files</label>
+            <select id="media_file_selector">
+                <option value="" disabled selected>Select media file</option>
+            </select>
+        </div>
+    </div>
+    <div class="groupelementsnoline">
+        <h3>Active calls</h3>
+        <table id="session_table">
+            <tr>
+                <th>Direction</th>
+                <th>Destination number</th>
+                <th>State</th>
+                <th>Duration</th>
+                <th>Quality metrics</th>
+                <th>Mic muted</th>
+                <th>Recording</th>
+                <th>On hold</th>
+                <th>Actions</th>
+            </tr>
+        </table>
+    </div>
+    <div class="groupelementsnoline">
+        <small>Tip: Press F12 (developer console) to get additional information</small>
+    </div>
+</div>
+</body>
+<!-- Javascript stuff -->
+<script>
+    const API_URL = 'https://api.telegenta.com/api';
+    let phoneClient = null;
+    let logger;
+    let transferSession;
+    // Start when DOM is ready
+    window.onload = function () {
+        // Create phone instance first
+        logger = new Telegenta.LogHandler(Telegenta.LOGLVL.DEBUG);
+        phoneClient = new Telegenta.Phone(logger);
+        // Check browser is supported first
+        if (!phoneClient.browserSupported) {
+            console.error('Your browser is not supported');
+        } else {
+            console.info('Your browser is supported');
+        }
+    };
+    /*
+     * STEP 1: Get a list of sip accounts from API server and populate select box with these accounts
+     */
+    function populateSelectElements() {
+        // SIP Accounts
+        jsonApiGetRequest('/sip-trunks/').then(function (data) {
+            console.info(`Fetched ${data.results.length} sip accounts:`);
+            console.debug(data);
+            // Now reset and populate select box with accounts
+            document.getElementById('account_selector').innerHTML = '';
+            for (const account of data.results) {
+                document.getElementById('account_selector').appendChild(new Option(account.name, account.id));
+            }
+        }, function (reason) {
+            console.error(`Request failed ${reason}`);
+        });
+        // Media files
+        jsonApiGetRequest('/media-files/').then(function (data) {
+            console.info(`Fetched ${data.results.length} media files:`);
+            console.debug(data);
+            // Now reset and populate select box with accounts
+            document.getElementById('media_file_selector').innerHTML = '';
+            for (const mfile of data.results) {
+                document.getElementById('media_file_selector').appendChild(new Option(mfile.name, mfile.id));
+            }
+        }, function (reason) {
+            console.error(`Request failed ${reason}`);
+        });
+    }
+    /*
+     * STEP 2: Get a new call_token from API and start phone client with account chosen in select box
+     */
+    function startPhoneClient() {
+        const accountId = document.getElementById('account_selector').value;
+        console.info(`Starting phone client with account id ${accountId}`);
+        // Create call session and get provision token
+        jsonApiGetRequest(`/get-call-session/?id=${accountId}`).then(function (data) {
+            console.info('Fetched a new call session');
+            console.debug(data);
+            // Now prepare media and get access to microphone
+            phoneClient.prepareMedia().then(function () {
+                // Media was prepared, now hook up events to display whats going on
+                // Connection state shows the client connection to the phone services
+                phoneClient.on('connectionStateChange', function (event) {
+                    console.info(`Phone connection is now: ${event.state}`);
+                    document.getElementById('conn_status').innerHTML = event.state;
+                });
+                // Get local information about call after it has ended
+                phoneClient.on('callEnded', function (data) {
+                    console.info('Call ended event:');
+                    console.info(data);
+                });
+                // Get remote information about call after it has ended
+                phoneClient.on('callDataInfo', function (data) {
+                    console.info('Call data info event:');
+                    console.info(data);
+                });
+                // New session created
+                phoneClient.on('sessionCreated', function (data) {
+                    newSession(data.session);
+                });
+                // Session removed
+                phoneClient.on('sessionRemoved', function (data) {
+                    console.log(data);
+                    removeSession(data.session);
+                });
+                // Show incoming call
+                phoneClient.on('incomingCall', function (data) {
+                    console.log(`Incoming call from ${data.originatingNumber}`);
+                });
+                // Now start phone with the following options
+                const opts = {
+                    // Enable event client
+                    connectEventService: true,
+                    // Subscribe to detailed information about call after processing
+                    useCallDataInfoEvent: true,
+                    // Enable incoming calls (you must set a phone number to call the account also)
+                    register: true,
+                    // Configure client with provision token
+                    provisionToken: data.provision_token,
+                    // Enable signal tones (busy, invalid, etc)
+                    playSignalTones: true,
+                    // Enable call initialized tone
+                    playCallInitializedTone: true
+                };
+                try {
+                    phoneClient.start(opts);
+                    console.info('Media prepared and phone started');
+                } catch (e) {
+                    console.error('Unable to start phone');
+                    console.error(e);
+                }
+            }, function (reason) {
+                console.error('Unable to get media permission: ' + reason);
+            });
+        }, function (reason) {
+            console.error(`Request failed ${reason}`);
+        });
+    }
+    // Stop phone client
+    function stopPhoneClient() {
+        phoneClient.stop();
+    }
+    /*
+     * STEP 3: Make a test call
+     */
+    function makeCall() {
+        const destination_number = document.getElementById('destination_number').value;
+        phoneClient.call(destination_number, {
+            // Change this to number of days to keep recording (enables recording)
+            record: 0,
+            // Change this maximum amount in customer currency the call must cost before hanging up (0 = no checking)
+            maximumCallCost: 0,
+            // Include this to force a specific caller id (use id of phone number from api service)
+            // explicitCallerId: 35,
+            // Include this to force a specific smart cid (use id of shot-cid from api service)
+            // explicitShortCallerId: 1,
+            // Configure answer call timeout
+            answerCallTimeout: 0,
+            // Add meta info to call
+            metaInfo: 'You can add up to 256 bytes of meta info for your call (including json like {"type": "json"})'
+        });
+    }
+    // Set the source of call transfer and populate transfer destination selector
+    function setTransferSession(session) {
+        transferSession = session;
+        var otherSessions = session.getOtherSessions();
+        if (otherSessions.length < 1) {
+            document.getElementById('transfer_from').innerHTML = 'Requires two active sessions to perform transfer!';
+            return;
+        }
+        // Show source call destination number
+        document.getElementById('transfer_from').innerHTML = session.destinationNumber + ' => ';
+        // Add all other sessions to transfer selector
+        document.getElementById('transfer_selector').innerHTML = '';
+        for (const tSession of otherSessions) {
+            document.getElementById('transfer_selector').appendChild(new Option(tSession.destinationNumber, tSession.uuid));
+        }
+    }
+    // Transfer call from "transferSession" to item in transfer_selector
+    function doCallTransfer() {
+        if (!transferSession) {
+            console.error('No session selected');
+            return;
+        }
+        // Use session uuid from selectbox and get session object
+        const dstSession = phoneClient.getSessionByUUID(document.getElementById('transfer_selector').value);
+        // Now do transfer
+        transferSession.transfer(dstSession);
+    }
+    // Create listen session
+    function doListen() {
+        phoneClient.listen(document.getElementById('listen_key').value);
+    }
+    // Playback message
+    function playback(session) {
+        const hangup_after = false;
+        session.playback(document.getElementById('media_file_selector').value, hangup_after).then(() => {
+            console.info('Playback started');
+        })
+    }
+    /*
+     * Helper functions
+     */
+    // Create new session
+    // Add table row for session using session_<uuid> as element id,
+    // (We do this so we can find and remove row when session ends)
+    function newSession(session) {
+        const rowId = `session_${session.uuid}`;
+        // Create row in table for session
+        const table = document.getElementById("session_table");
+        const newRow = table.insertRow();
+        newRow.id = rowId;
+        for (let i = 0; i < table.rows[0].cells.length; i++)
+            newRow.insertCell();
+        // Set cells
+        newRow.cells[0].innerText = session.direction;
+        // Show name of local number called for inbound
+        if (session.localNumberName) {
+            newRow.cells[1].innerText = session.destinationNumber + ' (' + session.localNumberName + ')';
+        } else {
+            newRow.cells[1].innerText = session.destinationNumber;
+        }
+        // Hookup events
+        // Session state show the current calling state
+        session.on('sessionStateChange', function (event) {
+            console.info(`Phone session is now: ${event.state}`);
+            newRow.cells[2].innerHTML = event.state;
+            // Add failure cause
+            if (event.state === 'FAILED') {
+                newRow.cells[2].innerHTML = newRow.cells[2].innerHTML + ` (${event.cause})`;
+            }
+            updateButtons(newRow.cells[8], session);
+        });
+        // Get record state events
+        newRow.cells[6].innerHTML = session.isRecording;
+        session.on('recordingStateChange', function (data) {
+            console.info(`Recording state changed to ${data.state}`);
+            newRow.cells[6].innerHTML = data.state;
+        });
+        // Get mute state events
+        newRow.cells[5].innerHTML = session.isMuted;
+        session.on('muteStateChange', function (data) {
+            console.info(`Microphone mute state changed to ${data.state}`);
+            newRow.cells[5].innerHTML = data.state;
+        });
+        // Get hold state events
+        newRow.cells[7].innerHTML = session.isOnHold;
+        session.on('holdStateChange', function (data) {
+            console.info(`Call hold state changed to ${data.state}`);
+            newRow.cells[7].innerHTML = data.state;
+        });
+        // Get call duration update events
+        session.on('callDurationUpdate', function (data) {
+            newRow.cells[3].innerHTML = `${data.durationStr} (${data.activeDurationStr})`;
+        });
+        // Get call duration update events
+        session.on('callQualityReportUpdate', function (data) {
+            console.info('Call quality report:');
+            console.info(data);
+            newRow.cells[4].innerHTML = `${data.delta.effectiveLatency.toFixed(1)} ms (${data.delta.rFactor.toFixed(1)} R)`;
+        });
+        // Get local information about call after it has ended
+        session.on('callEnded', function (data) {
+            console.info('Call ended event:');
+            console.debug(data);
+        });
+        session.on('whisperModeChange', function (data) {
+            console.info('Whisper mode: ' + data.mode);
+        });
+    }
+    // Remove table row for session
+    function removeSession(session) {
+        const row = document.getElementById(`session_${session.uuid}`);
+        if (row) {
+            row.parentNode.removeChild(row);
+        }
+    }
+    // Add buttons based on session state on element (the table row)
+    function updateButtons(element, session) {
+        // Remove all buttons first
+        let e = element.firstElementChild;
+        while (e) {
+            e.remove();
+            e = element.firstElementChild;
+        }
+        // Put session on TD element, so buttons can use it
+        element._session = session;
+        // NON TERMINATED/INCOMING/FAILED BUTTONS
+        if (session.state !== 'TERMINATED' && session.state !== 'INCOMING' && session.state !== 'FAILED') {
+            const btn = document.createElement("BUTTON");
+            btn.innerHTML = 'Hangup';
+            btn.onclick = function () {
+                this.parentNode._session.hangup();
+            };
+            element.appendChild(btn)
+        }
+        if (session.direction === 'OUTBOUND' || session.direction === 'INBOUND') {
+            // ACTIVE CALL BUTTONS
+            if (session.state === 'ACTIVE' || session.state === 'ON_HOLD') {
+                const btn = document.createElement("BUTTON");
+                btn.innerHTML = 'Play tone';
+                btn.onclick = function () {
+                    phoneClient.playTone(1000, 440, 880, function () {
+                        console.info('Play tone complete!')
+                    });
+                };
+                element.appendChild(btn);
+                const btn2 = document.createElement("BUTTON");
+                btn2.innerHTML = 'Send DTMF 1';
+                btn2.onclick = function () {
+                    this.parentNode._session.sendDTMF(1);
+                };
+                element.appendChild(btn2);
+                const btn3 = document.createElement("BUTTON");
+                btn3.innerHTML = 'Toggle mute mic';
+                btn3.onclick = function () {
+                    this.parentNode._session.toggleMute();
+                };
+                element.appendChild(btn3);
+                const btn4 = document.createElement("BUTTON");
+                btn4.innerHTML = 'Toggle recording';
+                btn4.onclick = function () {
+                    this.parentNode._session.toggleRecording();
+                };
+                element.appendChild(btn4);
+                const btn5 = document.createElement("BUTTON");
+                btn5.innerHTML = 'Toggle hold';
+                btn5.onclick = function () {
+                    this.parentNode._session.toggleHold();
+                };
+                element.appendChild(btn5);
+                const btn6 = document.createElement("BUTTON");
+                btn6.innerHTML = 'Transfer';
+                btn6.onclick = function () {
+                    setTransferSession(this.parentNode._session);
+                };
+                element.appendChild(btn6);
+                const btn7 = document.createElement("BUTTON");
+                btn7.innerHTML = 'Playback';
+                btn7.onclick = function () {
+                    playback(this.parentNode._session);
+                };
+                element.appendChild(btn7);
+            }
+            // INCOMING BUTTONS
+            if (session.state === 'INCOMING') {
+                const btn = document.createElement("BUTTON");
+                btn.innerHTML = 'Answer';
+                btn.onclick = function () {
+                    this.parentNode._session.answer(metaInfo = 'When answering calls you can add meta info as well');
+                };
+                element.appendChild(btn);
+                const btn2 = document.createElement("BUTTON");
+                btn2.innerHTML = 'Reject';
+                btn2.onclick = function () {
+                    this.parentNode._session.reject();
+                };
+                element.appendChild(btn2);
+            }
+        }
+        // LISTEN BUTTONS
+        if (session.direction === 'LISTEN' && session.state === 'ACTIVE') {
+            const btn = document.createElement("BUTTON");
+            btn.innerHTML = 'Start whisper';
+            btn.onclick = function () {
+                this.parentNode._session.setWhisperMode(1);
+            };
+            element.appendChild(btn);
+            const btn2 = document.createElement("BUTTON");
+            btn2.innerHTML = 'End whisper';
+            btn2.onclick = function () {
+                this.parentNode._session.setWhisperMode(0);
+            };
+            element.appendChild(btn2);
+        }
+    }
+    // Perform authenticated ajax request to api server and return json payload on success
+    function jsonApiGetRequest(path) {
+        const xhr = new XMLHttpRequest();
+        const url = API_URL + path;
+        xhr.open('GET', url, true);
+        xhr.responseType = 'json';
+        const apiToken = document.getElementById('api_key').value;
+        xhr.setRequestHeader('Authorization', 'Bearer ' + apiToken);
+        xhr.setRequestHeader('Accept', 'application/json');
+        return new Promise(function (resolve, reject) {
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    if (xhr.status !== 200) {
+                        reject(xhr.status + ' ' + xhr.statusText);
+                        return;
+                    }
+                    resolve(xhr.response);
+                }
+            };
+            console.debug(`API Request: ${url}`);
+            xhr.send();
+        })
+    }
+</script>
+</html>